Widget Installation

Add the ReplyBubble chat widget to your website. Works with any platform that supports custom HTML.

Time estimate: ~3 minutes

The embed snippet

Copy this from your dashboard — the Install code section on the dashboard home, or Test Widget > Embed code:

<script
  src="https://app.replybubble.com/widget/replybubble.js"
  data-widget-id="YOUR_WIDGET_ID"
  async
></script>

Replace YOUR_WIDGET_ID with your actual widget ID from the dashboard. Paste it just before the closing </body> tag on every page where you want the chatbot to appear.

Plain HTML

Open your website’s HTML file
Find the closing </body> tag
Paste the snippet directly above it
Save and reload the page

<!DOCTYPE html>
<html>
  <head>
    <title>My Site</title>
  </head>
  <body>
    <!-- Your page content -->

    <!-- ReplyBubble widget -->
    <script
      src="https://app.replybubble.com/widget/replybubble.js"
      data-widget-id="YOUR_WIDGET_ID"
      async
    ></script>
  </body>
</html>

WordPress

The easiest way to install the widget on WordPress is with our official plugin. It handles everything automatically — no code editing required. If you prefer a manual approach, use one of the methods below:

Option A: Code Snippets Plugin

Install the Insert Headers and Footers plugin (by WPCode) from Plugins > Add New
Go to Code Snippets > Header & Footer
Paste the snippet into the Footer section
Click Save Changes

Option B: Theme Editor

Go to Appearance > Theme File Editor
Open footer.php (in the right sidebar)
Paste the snippet just before </body>
Click Update File

Note: Theme editor changes may be lost when your theme updates. The plugin method is more durable.

Shopify

The easiest way to install the widget on Shopify is with our dedicated setup guide. It walks you through the theme editor method step by step. If you prefer a quick manual approach:

Go to Online Store > Themes
Click Actions > Edit Code on your active theme
Open theme.liquid in the Layout folder
Find the closing </body> tag
Paste the snippet directly above it
Click Save

The widget will appear on all pages of your store.

Squarespace

Go to Settings > Advanced > Code Injection
Paste the snippet into the Footer field
Click Save

The widget will appear on every page of your site.

Wix

Go to your site’s Dashboard > Settings
Click Custom Code (under Advanced)
Click Add Code
Paste the snippet
Set placement to Body - end
Choose to apply to All pages
Click Apply

Webflow

Go to Project Settings > Custom Code
Paste the snippet into the Footer Code section
Click Save Changes
Publish your site for changes to take effect

Per-page installation

If you only want the widget on specific pages:

Open the page in the Webflow Designer
Go to Page Settings > Custom Code
Paste the snippet into the Before body closing tag section
Save and publish

Google Tag Manager

In GTM, go to Tags > New
Choose Custom HTML as the tag type
Paste the snippet
Set the trigger to All Pages (or specific pages)
Click Save and Publish

Note: Loading the widget through GTM adds a small delay since it loads asynchronously through GTM’s container. In most cases this is not noticeable.

Verifying installation

After adding the snippet:

Open your website in a new browser tab (or hard-refresh with Ctrl+Shift+R)
Look for the chat bubble in the bottom-right corner of the page
Click it and send a test message
Verify the bot responds using your knowledge base content

Check your widget ID — make sure it matches the one in your dashboard
Check for JavaScript errors — open your browser’s developer console (F12) and look for errors
Check your CSP headers — if your site uses Content Security Policy, you need to allow *.replybubble.com. See Troubleshooting for details
Wait a moment — the widget script loads asynchronously and mounts once the page’s HTML has finished parsing

Advanced options

Custom API URL

If you’re using a self-hosted or custom API endpoint, add the data-api-url attribute:

<script
  src="https://app.replybubble.com/widget/replybubble.js"
  data-widget-id="YOUR_WIDGET_ID"
  data-api-url="https://your-custom-api.com"
  async
></script>

The simplest approach is to only include the widget script on pages where you want it. If your templates always include it, you can remove the widget after load instead:

<script>
  window.ReplyBubble?.destroy();
</script>

You can bring it back later in the same page session with window.ReplyBubble.init({ widgetId: "YOUR_WIDGET_ID" }). This is useful for admin pages, checkout flows, or anywhere you don’t want the chatbot to appear.

Identifying logged-in users

If your visitors are authenticated, you can link their chat conversations to their identity. See User Verification for the full setup guide.

window.ReplyBubble.identify({
  id: "user-123",
  email: "[email protected]",
  name: "Jane Doe",
  signature: "hmac-from-your-server",
});

Beyond the declarative data-* attributes, window.ReplyBubble exposes a small programmatic API for controlling the widget from your own code.

Method	Description
`init(config)`	Mounts the widget. Idempotent — only the first call takes effect until `destroy()` is called.
`destroy()`	Tears down the widget and its DOM, allowing a later `init()` call to remount it.
`identify(user)`	Links the current conversation to an authenticated user. Must be called after `init()`. See Identifying logged-in users above.
`reset()`	Clears the current identity and starts a fresh, anonymous conversation.
`open()`	Programmatically opens the widget.
`close()`	Programmatically minimizes the widget.
`toggle()`	Opens the widget if closed, closes it if open.
`on(event, callback)`	Subscribes to a widget event. Returns an unsubscribe function.
`off(event, callback)`	Unsubscribes a previously registered event handler.

Events

on() supports three events, matching the callback style used by Intercom and Crisp:

'open' — fires when the widget expands
'close' — fires when the widget minimizes
'unread' — fires when the unread count changes; the handler receives the new count as its only argument

const unsubscribe = window.ReplyBubble.on("unread", (count) => {
  document.title = count > 0 ? `(${count}) My Site` : "My Site";
});

// Later, to stop listening:
unsubscribe();
// or: window.ReplyBubble.off("unread", handler);

Loading asynchronously (queue pattern)

If you load the widget script with async, window.ReplyBubble may not exist yet when your own code runs. Queue the config before the script loads and it’s picked up as soon as the script finishes loading:

<script>
  window.ReplyBubble = { _q: [{ widgetId: "YOUR_WIDGET_ID" }] };
</script>
<script src="https://app.replybubble.com/widget/replybubble.js" async></script>

Only the first queued config is used if more than one is pushed to _q. For the full visitor-facing feature set (file attachments, CSAT, conversation history, reactions, and more), see Widget Features.

Languages

The widget UI ships in 15 languages: Arabic, German, English, Spanish, French, Hindi, Italian, Japanese, Korean, Dutch, Polish, Brazilian Portuguese, Russian, Turkish, and Simplified Chinese. Arabic renders right-to-left automatically. Locale is configured through workspace or personality settings on the dashboard — not a data-* embed attribute.

Non-English widget UI translations are a Pro plan feature — Free-plan workspaces always show the English widget regardless of visitor locale.

See Widget Features for more detail.

Get Started

Inbox & Conversations

AI & Knowledge

Contacts & Engagement

Widget

Integrations

Workspace & Account

Help

The embed snippet

Plain HTML

WordPress

Option A: Code Snippets Plugin

Option B: Theme Editor

Shopify

Squarespace

Wix

Webflow

Per-page installation

Google Tag Manager

Verifying installation

If the widget doesn’t appear

Advanced options

Custom API URL

Disabling the widget on specific pages

Identifying logged-in users

Widget JavaScript API

Events

Loading asynchronously (queue pattern)

Languages

​The embed snippet

​Plain HTML

​WordPress

​Option A: Code Snippets Plugin

​Option B: Theme Editor

​Shopify

​Squarespace

​Wix

​Webflow

​Per-page installation

​Google Tag Manager

​Verifying installation

​If the widget doesn’t appear

​Advanced options

​Custom API URL

​Disabling the widget on specific pages

​Identifying logged-in users

​Widget JavaScript API

​Events

​Loading asynchronously (queue pattern)

​Languages

The embed snippet

Plain HTML

WordPress

Option A: Code Snippets Plugin

Option B: Theme Editor

Shopify

Squarespace

Wix

Webflow

Per-page installation

Google Tag Manager

Verifying installation

If the widget doesn’t appear

Advanced options

Custom API URL

Disabling the widget on specific pages

Identifying logged-in users

Widget JavaScript API

Events

Loading asynchronously (queue pattern)

Languages