# Installing the Widget

## 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.

### Getting an Integrator ID

To use the Squid Widget, you need to register for an Integrator ID:

1. Complete the [Integrator ID request form](https://squidrouter.typeform.com/integrator-id?typeform-source=docs.squidrouter.com).
2. You will receive your Integrator ID via email.

### 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

Refer to our [Migration Guide](broken://pages/IMLtI2E2mq7J8LHdcFx4) for detailed information on these changes and how to adapt your integration.


---

# 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/installing-the-widget.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.