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

<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

FeatureDesktopMobile
Chat window size480 × 720pxFull screen
PositionBottom-right cornerBottom-right (bubble), full screen (window)
Safe area paddingNoYes (for notches)
Close behaviorMinimizes to bubbleSlides down

​
Proactive Messages

Show a message bubble next to the chat icon before the visitor opens it — to encourage engagement.
SettingDescription
Message textWhat the bubble says (max 200 characters)
DelaySeconds 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 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

IssueSolution
Widget doesn’t appearCheck that data-agent-id is correct and the widget is enabled in Publish settings
Widget appears but chat failsCheck your browser’s console for errors. Verify the chatbot has knowledge base content.
Styling conflictsThe Shadow DOM should prevent this. If issues persist, check for !important rules targeting iframe elements.
Widget loads slowlyThe script uses defer and loads config asynchronously. If your site has many scripts, the widget may take a few seconds.
Proactive message not showingCheck that it’s configured in Publish → Embed Widget with a message and delay set.