---
title: Embed the widget on your site
description: "Copy the two-line snippet from the Widget section, paste it into your page, and make the agent public so the widget is allowed to load."
---

The widget is embedded with one custom element and one script tag. The snippet
already contains the agent's id and is in two places: behind the **Embed Code**
button of the **Widget** section, and in the **Share Agent** dialog once the agent
is public. Both give the widget exactly as it was last saved in the designer.

## Add it to a page

1. **Design and save**

    Style the widget in the [designer](/deploy/widget-and-embed/widget-designer)
    and choose **Save**.

2. **Copy the snippet**

    Choose **Embed Code**, then **Copy** in the **Embed Code** dialog.

3. **Paste it**

    Put it just before the closing `</body>` tag of every page that should show
    the widget, or in your site's shared layout. It looks like this:

    ```html
    <callab-chat agent-id="<your agent id>"></callab-chat>
    <script src="https://unpkg.com/@callab-ai/widget@<version>/dist/callab-chat-widget.iife.js"
      integrity="sha384-…" crossorigin="anonymous" async type="text/javascript"></script>
    ```

    A voice agent's snippet uses `voice-agent-id` instead of `agent-id`, which
    makes the widget open as a call rather than a chat. Attributes for anything
    you changed in the designer, such as `collapsed-text="Talk to us"`, are added
    to the element.

    Keep the `integrity` attribute as copied; it pins the script to the exact
    file the dialog gave you. Copy again from the dialog rather than editing the
    version by hand.

4. **Make the agent public**

    Choose **Share agent** in the workspace header, next to **Save**, and switch
    on **Agent Visibility** in the **Share Agent** dialog. While it is off the
    dialog reads *Private - Only you can access this agent* and the widget on your
    site cannot start a conversation. For a voice agent, the **Widget** section
    says so too: *This agent is private, so calls from the embedded widget will be
    refused.*

![The Embed Code dialog.](/media/deploy/embed-code-dialog.webp)


## Behaviour and limits

- The script loads asynchronously and renders the launcher in the corner set by
  **Placement**; it does not block the page.
- The design is fetched from the agent, so restyling in the designer and saving
  changes the site without a new snippet.
- Conversations started from the widget are listed under
  [Conversations](/operate/conversations) for a text agent, and under
  [Call logs](/operate/call-logs) with `WEB` as the number when a visitor uses
  the call button of a voice agent.
- A public agent can be talked to by anyone who has the id. Keep the prompt's
  <Term>guardrails</Term> tight and watch usage under
  [Usage and history](/account/usage-and-history).

## Verify

- Open the page in a private window. The launcher appears with your **Bubble
  Text**; click it, send a message, and the exchange shows under
  **Conversations** or **Call Logs** within a few seconds.

## Troubleshooting

- **Nothing appears on the page.** The script tag was pasted inside another
  element that hides it, or a content security policy blocks `unpkg.com`. Allow
  the host in `script-src`.
- **The launcher appears but replies fail.** **Agent Visibility** is off. Turn
  it on under **Share agent** in the workspace header.
- **The browser refuses the script.** The `integrity` hash no longer matches
  because the URL's version was edited. Copy the snippet again.

## Related

- [Widget designer](/deploy/widget-and-embed/widget-designer)
- [Share link](/deploy/widget-and-embed/share-link)
- [Conversations](/operate/conversations)