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

# Add the chat widget to your website

> Turn on the website widget for an agent, paste one script tag into your site, and allow your domains.

The website widget is a chat button on your site that opens a conversation with your agent. Setup takes about five minutes: turn the channel on, copy one line of code into your site, and list the domains it may run on.

<Info>
  **Who can do this:** admins of the workspace.
  **You need:** an agent that is [published](/agents/overview), and access to edit your website's code or theme.
</Info>

## 1. Turn on the widget

1. Open **Agents** and choose the agent that should answer chats.
2. Go to **Channels** and open **Website widget**.
3. Choose **Enable widget channel**.

The page now shows **Installation** with your snippet and an empty **Allowed origins** list.

## 2. Allow your domains

The widget only loads on domains you list. Until you add one, it won't work anywhere.

1. Under **Allowed origins**, choose **+ Add origin**.
2. Enter your site's address with `https://` and nothing after the domain, for example `https://www.your-shop.no`.

Each address must match exactly what's in the browser's address bar:

| Your site | Add |
| - | - |
| `https://www.your-shop.no` and `https://your-shop.no` | Both. With and without `www` are different origins. |
| A Shopify theme preview | The preview's own address, such as `https://abc123.shopifypreview.com`, while you test. |
| A page under a path, like `https://your-shop.no/help` | `https://your-shop.no`. Paths are not part of an origin. |

You can paste several addresses at once, separated by commas or spaces.

## 3. Paste the snippet into your site

Copy the snippet under **Installation** with **Copy**. It looks like this, with your own key:

```html theme={null}
<script src="https://app.nordic-software.com/widget.js" data-widget-key="your-widget-key"></script>
```

The widget key is public: it identifies your widget, and it is safe in your page source. Your allowed origins are what stop other sites from using it.

<Tabs>
  <Tab title="Shopify">
    1. In Shopify admin, go to **Online Store → Themes**.
    2. Next to your theme, choose **⋯ → Edit code**.
    3. Open `layout/theme.liquid`.
    4. Paste the snippet on the line just above `</body>`, then choose **Save**.

    <Tip>
      Test on a copy of your theme first. Choose **⋯ → Duplicate**, add the snippet to the copy, and preview it. Remember to add the preview's `shopifypreview.com` address to **Allowed origins**.
    </Tip>
  </Tab>

  <Tab title="Any other website">
    Paste the snippet just above the closing `</body>` tag on every page where the chat should appear. On most sites, that means the shared layout or footer template.

    In a website builder, look for a setting called something like **Custom code**, **Footer code** or **Code injection**, and paste it there.
  </Tab>
</Tabs>

## 4. Check that it works

Open your site in a new private window. The chat button appears on the page. Ask it something your agent knows, and the conversation shows up under **Conversations** in Ask.

Conversations carry over as customers move between pages on your site.

## Change how it looks

Under **Appearance** on the same page you can set the primary colour, the text on the chat button, the widget's language, and a proactive message that opens after a delay. The preview on the page updates as you change things.

## Hide the widget for a while

Switch off **Show the widget on your website**. The chat button disappears from every page the next time it loads. A chat that is already open stays until that visitor leaves the page. Switch it on again to bring the button back; you don't need to touch your site's code.

To remove the widget for good, delete the snippet from your site.

## Common problems

<AccordionGroup>
  <Accordion title="The chat button doesn't appear">
    Check, in this order:

    1. **The domain is listed.** The address in the browser must be in **Allowed origins** exactly, including `www` if your site uses it. This is the most common cause.
    2. **The widget is switched on.** **Show the widget on your website** must be on.
    3. **The snippet is on the page.** In your browser, right-click the page, choose **View page source**, and search for `widget.js`.
    4. **The page was reloaded.** Changes apply the next time a page loads.
  </Accordion>

  <Accordion title="It works on my live site but not in Shopify's theme preview">
    Shopify serves previews from a different address, ending in `shopifypreview.com`. Add that address to **Allowed origins** while you test, and remove it afterwards.
  </Accordion>

  <Accordion title="My latest changes don't show up in the chat">
    The widget always talks to the agent's published version. Changes you save as a draft reach customers only after you publish the agent. An agent that has never been published can't start a chat at all.
  </Accordion>
</AccordionGroup>


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