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

# Add the chat widget to your website

> Copy your agent's embed snippet from the AI Agent page and paste it before </body> on any site, including WordPress, Webflow, Squarespace and plain HTML.

# Add the chat widget to your website

The widget works on any site where you can add a script to the page: WordPress (WooCommerce stores
included), Webflow, Squarespace, Wix, or your own HTML. For a Shopify store, use the
[Shopify app](/integrations/store-app) instead.

## Copy your snippet

1. Go to **AI Agent** in the sidebar.
2. Click **Embed Code** at the top of the page.
3. In **Embed Agent Widget**, click the copy icon (**Copy snippet**).

<Frame caption="Illustration of the Embed Agent Widget dialog: copy the snippet with Copy snippet.">
  <img src="https://mintcdn.com/zynfoai/TpFuLv_P_rJXw8fL/images/ui/website-chat-widget-2.png?fit=max&auto=format&n=TpFuLv_P_rJXw8fL&q=85&s=f3b15ab46078999f707c38a33017c661" alt="Embed Agent Widget dialog showing the script snippet, a Copy snippet button and a security note" width="1008" height="592" data-path="images/ui/website-chat-widget-2.png" />
</Frame>

The snippet looks like this, with your own agent ID:

```html theme={null}
<!-- ZynfoAI ChatWidget Embed Code -->
<script id="__chatbotSdk__" src="https://app.zynfo.ai/widget/embed.js" data-chatbot-id="YOUR_AGENT_ID" async></script>
```

Use the snippet you copied rather than typing this one: it already has your agent ID.

## Paste it on your site

Paste the snippet into your site's footer or global code area, just before the closing `</body>` tag,
so it loads on every page. For example:

* **WordPress:** a header and footer code plugin, or your theme's footer.
* **Webflow:** **Site settings → Custom code → Footer code**.

Publish your site and reload a page. The chat button appears in the corner you chose under
**Widget Position**.

## After it's live

* You don't need to change the snippet when you edit the widget's text or look. Changes apply after you
  click **Publish** on the AI Agent page.
* To stop other sites from using your snippet, add your domains in the **Security** tab. See
  [Widget behaviour and settings](/agent-management/advanced-settings).

## Related topics

* [Add the widget to a React app](/embed/react-embed)
* [Chat widget text and appearance](/agent-management/content-and-appearance)


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