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

# Embed Widget

> Add the FIFE.BOT chat widget to any website with a single script tag.

The embed widget is a floating chat bubble that appears on your website. Visitors click it to open a chat window powered by your chatbot's knowledge base.

## Getting the Embed Code

<Steps>
  <Step title="Open your chatbot">
    Go to the chatbot detail page.
  </Step>

  <Step title="Go to the Publish tab">
    Click the **Publish** tab → **Embed Widget** sub-tab.
  </Step>

  <Step title="Enable the widget">
    Flip the **Floating widget enabled** toggle.
  </Step>

  <Step title="Copy the code">
    Copy the embed snippet using the copy button.
  </Step>
</Steps>

## Embed Code

```html theme={null}
<script
  src="https://app.fife.bot/widget.js"
  data-agent-id="YOUR_AGENT_ID"
  defer
></script>
```

Paste this before the closing `</body>` tag on every page where you want the chatbot.

## How It Works

1. The script loads asynchronously (`defer`) — it won't slow down your page
2. It fetches the widget configuration from FIFE.BOT's API (with retry + exponential backoff)
3. A **Shadow DOM** container is created — the widget's CSS is fully isolated from your site
4. A floating chat bubble (64x64px) appears in the bottom-right corner
5. Clicking the bubble opens the chat window

## Widget Behavior

| Feature           | Desktop             | Mobile                                      |
| ----------------- | ------------------- | ------------------------------------------- |
| Chat window size  | 480 × 720px         | Full screen                                 |
| Position          | Bottom-right corner | Bottom-right (bubble), full screen (window) |
| Safe area padding | No                  | Yes (for notches)                           |
| Close behavior    | Minimizes to bubble | Slides down                                 |

## Proactive Messages

Show a message bubble next to the chat icon before the visitor opens it — to encourage engagement.

| Setting          | Description                                     |
| ---------------- | ----------------------------------------------- |
| **Message text** | What the bubble says (max 200 characters)       |
| **Delay**        | Seconds before it appears (1–15 seconds slider) |

Example: "Hi! Need help finding something?" appears after 5 seconds. Visitors can dismiss it by clicking the X.

Configure proactive messages in the **Embed Widget** sub-tab under the embed code.

## Visual Effects

The widget includes subtle animations:

* **Glow pulse** on the chat bubble
* **Slide-up** animation when opening
* **Fade-up** animation for new messages

## Shadow DOM Isolation

The widget uses [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM) to isolate its styles from your website. This means:

* Your site's CSS won't affect the widget
* The widget's CSS won't leak into your site
* No class name conflicts
* Works on any website regardless of CSS framework

## Troubleshooting

| Issue                         | Solution                                                                                                                   |
| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| Widget doesn't appear         | Check that `data-agent-id` is correct and the widget is enabled in Publish settings                                        |
| Widget appears but chat fails | Check your browser's console for errors. Verify the chatbot has knowledge base content.                                    |
| Styling conflicts             | The Shadow DOM should prevent this. If issues persist, check for `!important` rules targeting `iframe` elements.           |
| Widget loads slowly           | The script uses `defer` and loads config asynchronously. If your site has many scripts, the widget may take a few seconds. |
| Proactive message not showing | Check that it's configured in Publish → Embed Widget with a message and delay set.                                         |