Bubble

Add chatbot embed code to Bubble

Add the widget to a Bubble app through custom header or body settings, then deploy the app.

Bubble

Before you start

Best for

No code apps, member portals, marketplaces, internal tools, and public app landing pages built in Bubble.

Install location

Use app level custom body code for all pages, or page level HTML header only when the chatbot should be limited.

Bubble snippet

<script
  src="https://your-domain.com/widget.js"
  data-workspace-id="WORKSPACE_ID"
  data-chatbot-id="CHATBOT_ID"
  defer
></script>

Install

1Copy the widget snippetOpen the chatbot Embed page and copy the script for the selected chatbot.
2Open custom code settingsIn Bubble settings, open the area for custom headers or body code.
3Paste in body codeAdd the widget script to the body code area when available, or to the page HTML header for selected pages.
4Deploy the appDeploy to live, open the public app URL, and confirm the widget appears for visitors.

Access

Add the custom Bubble app domain.

Add the bubbleapps.io domain only if visitors or testers use it.

Use the live app hostname, not the Bubble editor hostname.

Verify

Bubble custom header or body settings can require a paid plan.

If the widget only appears on one page, confirm whether the code was added to the app level or page level area.

Do not place the snippet inside a visual text element.

Next doc

Use a Carrd Embed element in hidden body end mode to load the widget on a published page.