Add AI chat to Bubble

Installation steps

1. 1

   Prepare

   Open Bubble Settings → SEO/metatags and review the current custom HTML or script controls for the app.

2. 2

   Configure

   Place the complete loader in the body script location when available, or the page HTML header field if that is the supported control in your editor.

   <script src="https://mivochat.app/widget.js" data-site="YOUR_SITE_KEY" async></script>

   Copy
3. 3

   Publish

   Save and deploy to the live version, then allow its hostname in MivoChat; Bubble development and live domains are different origins.

4. 4

   Verify

   Test both the app page and a navigation transition to ensure the widget is present without duplicating the loader.

Choose the supported HTML field

Bubble settings and editor labels have changed across versions. Use the current Settings → SEO/metatags area as a starting point, then confirm which field accepts script HTML; if it is not present, check Bubble's current documentation rather than using a workflow action intended for page content.

Prefer one app-wide location when chat belongs everywhere. If a page-specific header is the only supported option, add it only to the pages where visitors should see chat and avoid combining it with a second global loader.

<script src="https://mivochat.app/widget.js" data-site="YOUR_SITE_KEY" async></script>

Test development and live separately

Bubble's development and live environments can use different hosts and deployment state. Verify the final published app source for widget.js and allow each origin used during testing.

If the widget loads on a static landing page but not a workflow-heavy app view, check whether the view uses a separate page shell and whether Bubble sanitizes that field. Confirm an answer from pricing, help, or docs and a human handoff before launch.

If the app has multiple page types, test a page with a shared navigation shell and one standalone page. Their HTML settings may be assembled differently, so one successful route does not prove that every published view includes the loader.

Before you change the setup

Who this is for

a Bubble app owner who can change site SEO or HTML settings

What you need

Bubble editor permission, the public key, and both development and live hostnames

Where it goes

the current Settings → SEO/metatags HTML/script field, using body placement when available

Watch out for

Bubble labels and editor capabilities can vary; use only a field that currently accepts executable script

Test the support boundary

• Does the live app source contain the loader?
• Does chat persist across a Bubble page transition?
• Are development and live origins both handled deliberately?

Related guidance

For the ordinary HTML tag see /guides/html; use /guides/widget-troubleshooting when the live loader or configuration request fails.

Frequently asked questions