Bubble chatbot embed
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.
Install
Install steps
- 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
Domains
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
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.
Troubleshoot
Bubble troubleshooting
If the launcher does not appear, confirm the chatbot is published, the plan and credits are active, and the exact live hostname is allowed.
If the widget loads in preview but not production, check whether the builder preview URL and the live custom domain are different hostnames.
If the page has a content security policy, allow the OrhanAI app URL and widget requests before retesting.
If the launcher appears twice, remove duplicate snippets from theme files, site settings, and tag managers.
If mobile layout feels crowded, adjust widget position and test the most important conversion pages first.
If these checks pass and the widget still does not load, compare the installed snippet with the current Embed page and review widget setup.