Skip to main content
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 (Settings > Installation): 
<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

  1. Open your website’s HTML file
  2. Find the closing </body> tag
  3. Paste the snippet directly above it
  4. 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

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

​
Option B: Theme Editor

  1. Go to Appearance > Theme File Editor
  2. Open footer.php (in the right sidebar)
  3. Paste the snippet just before </body>
  4. Click Update File
Note: Theme editor changes may be lost when your theme updates. The plugin method is more durable.

​
Shopify

  1. Go to Online Store > Themes
  2. Click Actions > Edit Code on your active theme
  3. Open theme.liquid in the Layout folder
  4. Find the closing </body> tag
  5. Paste the snippet directly above it
  6. Click Save
The widget will appear on all pages of your store.

​
Squarespace

  1. Go to Settings > Advanced > Code Injection
  2. Paste the snippet into the Footer field
  3. Click Save
The widget will appear on every page of your site.

​
Wix

  1. Go to your site’s Dashboard > Settings
  2. Click Custom Code (under Advanced)
  3. Click Add Code
  4. Paste the snippet
  5. Set placement to Body - end
  6. Choose to apply to All pages
  7. Click Apply

​
Webflow

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

​
Per-page installation

If you only want the widget on specific pages:
  1. Open the page in the Webflow Designer
  2. Go to Page Settings > Custom Code
  3. Paste the snippet into the Before body closing tag section
  4. Save and publish

​
Google Tag Manager

  1. In GTM, go to Tags > New
  2. Choose Custom HTML as the tag type
  3. Paste the snippet
  4. Set the trigger to All Pages (or specific pages)
  5. 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:
  1. Open your website in a new browser tab (or hard-refresh with Ctrl+Shift+R)
  2. Look for the chat bubble in the bottom-right corner of the page
  3. Click it and send a test message
  4. Verify the bot responds using your knowledge base content

​
If the widget doesn’t appear

  • 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 loads after the page is idle to avoid slowing down your site. Give it a few seconds

​
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>

​
Disabling the widget programmatically

To prevent the widget from loading on specific pages, add this before the widget script: 
<script>window.__RB_WIDGET_DISABLED = true;</script>
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'
});