Skip to main content
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

1

Open your chatbot

Go to the chatbot detail page.
2

Go to the Publish tab

Click the Publish tab → Embed Widget sub-tab.
3

Enable the widget

Flip the Floating widget enabled toggle.
4

Copy the code

Copy the embed snippet using the copy button.

​
Embed Code

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

​
Proactive Messages

Show a message bubble next to the chat icon before the visitor opens it — to encourage engagement. 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 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