# Iframe Installation

## 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](https://www.squidstudio.app).
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:

```html
<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**](https://studio.squidrouter.com/) which you can find when you click the export button.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.squidrouter.com/widget-integration/add-a-widget/widget/iframe-installation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.