Iframe Installation

Integrating the widget as an Iframe

Squid Widget iFrame Integration Guide

While the Squid Widget is primarily designed as a React component, you can integrate it into other frontend frameworks (such as Vue, Angular, etc.) using an iframe. This guide will walk you through the process of setting up and customizing the Squid Widget iframe.

Why Use the iFrame?

  • Framework Compatibility: If you're not using React, NextJS, or Vite the iframe method allows you to integrate the Squid Widget into any web application.

  • Simplicity: Embedding an iframe is straightforward and doesn't require additional dependencies.

  • Isolation: The widget runs in its own context, minimizing potential conflicts with your existing code.

iFrame Source URL

The base URL for the Squid Widget iframe is:

https://studio.squidrouter.com/iframe?config=...

The config parameter at the end of the URL will contain your custom configuration settings.

Customization

To customize your widget:

  1. Visit the Squid Widget Studio.

  2. Adjust the widget settings to your preferences.

  3. Click the "Get iframe" button when you're satisfied with the customization.

  4. You'll be redirected to a standalone widget page with a URL that includes your custom configuration.

Embedding the Widget

Once you have your customized iframe URL, you can embed it in your HTML like this:

<iframe
  title="squid_widget"
  width="430"
  height="684"
  src="https://studio.squidrouter.com/iframe?config=....."
></iframe>

Important notes:

  • Adjust the width and height attributes as needed to fit your layout.

  • Replace the src URL with your customized URL from the Squid Widget Studio which you can find when you click the export button.

PreviousVite InstallationNextCustomization Guide

Last updated