> For the complete documentation index, see [llms.txt](https://docs.squidrouter.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.squidrouter.com/widget-integration/add-a-widget/widget/installing-the-widget.md).

# Installing the Widget

Preparing to integrate the widget into your app

## Installing the Squid Widget

### Prerequisites

Before installing the Squid Widget, ensure you have:

1. Registered for an Integrator ID with the Squid Team.
2. Node.js and npm (or yarn) installed on your system.

### Requesting an Integrator ID

Squid issues Integrator IDs on a limited basis and upon review. To request an Integrator ID for your widget integration:

1. Submit a [partnership request](https://squidrouter.typeform.com/partnerships) outlining your use case and integration plans.
2. A Squid team member will review your request and follow up regarding approval and credential issuance.

### Installation

#### Step 1: Install the package

Install the Squid Widget npm package using one of the following commands:

Using npm:

```bash
npm install @0xsquid/widget
```

Using yarn:

```bash
yarn add @0xsquid/widget
```

#### Step 2: Update dependencies (if necessary)

Squid v2.0 uses Wagmi v2 and ethers v6. If you have these packages in your project, update them:

```bash
yarn add wagmi@^2.12.8 ethers@^6
```

For more information on upgrading Wagmi, refer to the [official Wagmi upgrade guide](https://wagmi.sh/react/migration-guide).

### Next Steps

After installation, you'll need to integrate the widget into your project. We provide specific guides for different frameworks:

* [React Integration Guide](/widget-integration/add-a-widget/widget/react-installation.md)
* [NextJS Integration Guide](/widget-integration/add-a-widget/widget/nextjs-installation.md)
* [Vite Integration Guide](/widget-integration/add-a-widget/widget/vite-installation.md)
* [iFrame Integration Guide](/widget-integration/add-a-widget/widget/iframe-installation.md)

Choose the guide that matches your project's setup.

### Support

If you have any questions or need assistance, please join our [Discord server](https://discord.gg/squidrouter) and post in the **#⛛│developers** channel.

### Breaking Changes

Be aware that Squid v2.0 introduces several breaking changes, including:

* Updated API URL(v2.api)
* Renamed and removed properties
* New theming system

For details on breaking changes, see the [API Changelog](/changelog/api.md) and [SDK Changelog](/changelog/sdk.md).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.squidrouter.com/widget-integration/add-a-widget/widget/installing-the-widget.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.