> ## Documentation Index
> Fetch the complete documentation index at: https://docs.chatnorris.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Install the widget on your website

> How to add your ChatNorris agent to your website with a code snippet.

# Install the widget on your website

The ChatNorris widget is a floating button that appears on your website and lets your visitors chat with the bot directly, without leaving the page.

![TODO: screenshot of the floating widget working on a sample website](https://mintcdn.com/chatnorris/_RNPg7jBCB9AE-Bf/images/PLACEHOLDER-widget-preview.png?fit=max\&auto=format\&n=_RNPg7jBCB9AE-Bf\&q=85\&s=8498d482f969b21b6d3a93983b82a0b2)

## Get the installation code

**1. Go to the agent's detail page**

In the sidebar, click **Agents** and then the agent you want to install.

**2. Make sure the agent is published**

The widget only works with agents in **Published** status. If it's in Draft, click **Publish** first.

**3. Copy the installation snippet**

In `My agents → [your agent] → Deploy`, copy the code from the summary bar or open **Web** to see the full installation page (installation and inactivity close; the language is changed from [Customize](https://docs.chatnorris.ai/en/guias/widget-personalizacion.md)).

![TODO: screenshot of the installation snippet with the copy button](https://mintcdn.com/chatnorris/_RNPg7jBCB9AE-Bf/images/PLACEHOLDER-snippet-instalacion.png?fit=max\&auto=format\&n=_RNPg7jBCB9AE-Bf\&q=85\&s=ad31642a14220afa4950ba8a7da3ba93)

## Paste the code on your site

The snippet is two `<script>` tags that you paste into your website's HTML, **before the closing `</body>` tag**. The first one tells which agent to load and the second one loads the widget:

```html theme={null}
<!-- At the end of your HTML, before </body> -->
<script>
  window.chatnorrisConfig = { chatbotId: "your-chatbot-id" };
</script>
<script src="https://app.chatnorris.ai/widget.js" async></script>
</body>
```

Always copy the snippet from the agent's **Deploy** section: it already includes your agent's ID.

> [tab] Static HTML
>
> Open your site's HTML file and paste the snippet before `</body>`.

> [tab] WordPress
>
> 1. Install the **Insert Headers and Footers** plugin (or a similar one).
> 2. Go to **Settings → Insert Headers and Footers**.
> 3. Paste the snippet in the **Scripts in Footer** section.
> 4. Save the changes.

> [tab] Webflow
>
> 1. Go to **Project Settings → Custom Code**.
> 2. Paste the snippet in the **Footer Code** field.
> 3. Publish the site.

> [tab] Shopify
>
> 1. Go to **Online Store → Themes → Edit code**.
> 2. Open the `theme.liquid` file.
> 3. Paste the snippet before `</body>`.
> 4. Save the changes.

> [tab] Wix
>
> 1. In the Wix editor, click **Settings** → **Custom Code**.
>
> 2. Click **+ Add Custom Code** (in the **Head** or **Body** tab).
>
> 3. Paste the snippet and choose to load it in **Body - end**.
>
> 4. Choose whether it applies to **All pages** or to specific pages.
>
> 5. Save and publish the site.
>
> > [!NOTE]
> >
> > The custom code option requires the Wix Business plan or higher.

> [tab] Squarespace
>
> 1. In the Squarespace panel, go to **Settings** → **Advanced** → **Code Injection**.
>
> 2. Paste the snippet in the **Footer** field.
>
> 3. Save the changes.
>
> > [!NOTE]
> >
> > Code injection is available on Squarespace's Business and Commerce plans.

> [tab] Google Tag Manager
>
> 1. In GTM, create a new **Tag** of type **Custom HTML**.
> 2. Paste the snippet in the HTML field.
> 3. As the **Trigger**, select **All Pages**.
> 4. Save the tag and **publish** the GTM container.

## Set up lead capture (Lead Form)

The lead form isn't configured from the widget installation: it's an agent **Action**. It's configured from `My agents → [your agent] → Actions → Lead Form`, where you can define whether it's required, which fields to ask for, when it should be shown and the form's texts.

When it's on, the widget shows a form with the fields you define before the visitor can type (or during the conversation, depending on the chosen criteria). The details are automatically recorded in the **Leads** section.

See the full guide in [Agent actions → Lead Form](https://docs.chatnorris.ai/en/guias/acciones.md#lead-form).

> [!NOTE]
>
> The lead form is optional. If it's off, the visitor can chat without giving their details.

## Frequently asked questions

> [accordion] Does the widget work on mobile?
>
> Yes, the widget is designed to work on mobile and desktop devices.

> [accordion] Can I install the widget on more than one site?
>
> Yes. The same snippet can be used on multiple sites. The agent will reply the same way on all of them.

> [accordion] Does the widget affect my site's speed?
>
> The script loads asynchronously and doesn't block your page from loading.

> [accordion] Can I customize how the widget looks?
>
> Yes. From `My agents → [your agent] → Customize` you adjust the widget's colors, logo, avatar, position, texts and behavior, without reinstalling the code. See [Customize the widget](https://docs.chatnorris.ai/en/guias/widget-personalizacion.md).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.