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

# Website widget

> Embed a Wirebase agent on your website as a chat bubble.

## Overview

The website widget puts one of your [agents](/docs/user-guide/workspace/agents) on your site as a chat bubble in the bottom-right corner. Visitors chat without signing in. The agent answers from its knowledge bases using your organization's API keys.

<Info>
  The website widget is available on the **Team** and **Enterprise** plans.
</Info>

## Set up the widget

<Steps>
  <Step title="Open the agent">
    Go to **Workspace → Agents**, open the agent and save it if it's new. Scroll to **Publish → Website chat widget**.
  </Step>

  <Step title="Configure it">
    Turn on **Turn on website widget**, then set:

    | Setting | Description |
    | - | - |
    | **Model** | The model visitors chat with. Usage counts against your organization's quota. |
    | **Websites** | The sites the widget may appear on, such as `www.example.com`. If people visit with and without `www`, add both. Up to 20; wildcards aren't supported. |
    | **Welcome message** | Optional first message, up to 500 characters. |
    | **Accent color** | The launcher and highlight color. |

    Click **Save widget settings**.
  </Step>

  <Step title="Add the embed code">
    Copy the **Embed code** and paste it just before the closing `</body>` tag on every page that should show the widget.
  </Step>
</Steps>

## Embed code

```html theme={null}
<script
  src="https://www.wirebase.com/embed/widget.js"
  data-agent-key="wbe_..."
  data-accent="#2563eb"
  async
></script>
```

| Attribute | Required | Description |
| - | - | - |
| `data-agent-key` | Yes | The agent's public embed key (`wbe_…`). Copy it from the widget settings. |
| `data-accent` | No | A 6-digit hex color, such as `#2563eb`. Defaults to blue. |

The script adds a launcher button and, when a visitor opens it, a chat panel. It's self-contained: it runs in a closed shadow root, adds no globals, loads no other dependencies, and doesn't leak styles into your page or pick up yours. The chat runs in a sandboxed iframe that can't navigate your page.

### Single-page apps

Load the script once, for example in your root layout. It mounts a single widget per page, even if the script tag is rendered again.

## What visitors' chats can do

For safety, widget chats are more limited than chats inside Wirebase:

* The agent can search **its own knowledge bases** only. Connectors, other tools and web search are off.
* Messages are limited to 4,000 characters, and the conversation sent to the model is capped at the last 20 messages.
* Visitors sending messages too quickly are rate limited.
* Each chat shows **Powered by Wirebase**.

## Security

* **Allowed websites**: the widget only renders on the sites you list. On any other site, the chat page refuses to be framed.
* **Key rotation**: click **Regenerate key** to issue a new key. The old key stops working immediately, so update the snippet everywhere it's used.
* **Audit trail**: enabling, disabling, updating and regenerating the key are recorded in the [audit log](/docs/admin-guide/usage/audit-logs).

## Troubleshooting

<AccordionGroup>
  <Accordion title="The bubble doesn't appear">
    Check the browser console for `[wirebase] embed: missing or invalid data-agent-key`. Confirm the widget is turned on and saved, and that the exact host of the page (including or excluding `www`) is listed under **Websites**. Pages opened from a file (`file://`) can't show the widget.
  </Accordion>

  <Accordion title="“Chat unavailable”">
    The widget was turned off, the key was regenerated, or the agent or its model is no longer available. Check the agent's widget settings.
  </Accordion>
</AccordionGroup>


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