How to Add Live Chat to a Bubble App: Header Script Setup

To add live chat to Bubble, you create a Talkmio site key, paste the install snippet into your app’s header script setting, deploy to the live version and test the chat on your real domain. There is no plugin to buy and no code to write beyond that one snippet, and the whole job normally takes about ten minutes. This guide walks through each step, explains which Bubble settings to look for, and covers the details that trip people up: development versus live versions, pages that should not show the chat, and what to teach the AI assistant before visitors arrive.

Bubble is a visual development platform, often described as a no-code development platform, used for marketplaces, internal tools, client portals and SaaS products. Apps built on it have two audiences with different needs: logged-out visitors who have pre-sales questions, and logged-in users who need help with the product. A chat serves both, so it is worth thinking about both before you paste anything.

Why Add Live Chat to Bubble Apps at All

Founders who build on Bubble often work alone or in very small teams, which makes every unanswered question expensive. A visitor who cannot find pricing leaves quietly, and a new user who cannot find a setting files no ticket and simply churns. A chat bubble gives both a place to ask, and an AI assistant that answers from your content means the common questions are handled while you are building the next feature.

The setup also scales with the app. You start with the Free plan, one operator and one website. When conversations grow, you add operators, turn on tickets and the e-mail channel on Pro or above, and read the Reports to see which topics keep returning. Those topics are a free product-research channel: the questions users ask in chat are the places where your interface or your copy is unclear.

What You Need Before You Start

• A Bubble app on a plan that lets you add custom scripts to the page header or body. Bubble’s settings and plan limits change, so confirm in the Bubble manual that your plan supports it.
• A free Talkmio account at app.talkmio.com, with your e-mail confirmed.
• A public page or two that describe your product, pricing and policies, so Mio has something to read.

Talkmio works with any website, and the snippet is a single script tag. That is why Bubble needs no special module. Compare this with the platform pages in our integrations list, where WordPress, Shopify and others have dedicated plugins or snippets.

Step 1: Create the Site Key

In Talkmio, open Websites and choose Add. Enter the domain your visitors use. If your Bubble app runs on a custom domain, use that one. You receive a site key and an install snippet. Keep this page open, because you will copy the snippet in step 3.

While you are there, set the basics for the widget: colour, position, assistant name, welcome and offline texts, language and business hours. Language can follow the visitor automatically or be fixed. For a product with international users, auto-detect is the better default because Mio replies in the language the visitor writes in, and the widget text is translated too. Changes apply within five minutes.

Step 2: Teach Mio Before You Install

It is tempting to paste the snippet first. Resist it for ten minutes. Open Mio AI and the Knowledge base, add your website so that Mio reads every public page on the same domain, and upload any documents such as pricing sheets, help articles or onboarding guides (PDF, DOCX, TXT, MD, CSV or HTML up to 15 MB). Then write business instructions that say what you sell, the tone to use and what Mio must never promise.

One caution applies to Bubble specifically. Apps built with dynamic pages often show their real content only after the user logs in or after data loads, so a crawler reading the public domain may find little. If your marketing pages are thin, add the missing information as Q&A pairs or uploaded files. Mio answers only from your content, so what you give it is what it knows. Use Try Mio to check the answers, and see how the chat will behave before it goes live. Our guide to writing AI chatbot instructions gives examples.

Step 3: Paste the Snippet Into Bubble

In the Bubble editor, open the Settings tab and look for the SEO or metatags section. It contains fields for scripts or meta tags in the header and, depending on the editor version, scripts in the body. The labels have changed over time, so look for the field described as a script for the page head or body. Paste the Talkmio snippet there, once, and save.

Prefer the body field if it is available, because the chat does not need to load before the page content. If Bubble only offers the header, that works too, because the Talkmio script is loaded as a normal script tag. Do not paste it twice: duplicate snippets can create two chat bubbles.

Per-page placement

Bubble also lets you add a header to an individual page. That is the place for the snippet if you want the chat only on some pages, for example the landing page and the pricing page but not the admin screens. Decide your rule first: global for simplicity, per page for control. A global snippet is easier to maintain and the right choice for most small apps.

Step 4: Deploy to the Live Version

This is the step people forget. Bubble keeps a development version and a live version of the app. A change made in the editor appears on the development address first, and your real visitors only see it after you deploy to live. Deploy, then open the live domain in a private browser window. The chat bubble should appear in the corner within a couple of seconds.

If it does not appear, work through the checks below.

Symptom	Likely cause	What to do
No chat bubble on live	Change not deployed	Deploy to live and reload in a private window
No chat bubble on any page	Snippet pasted in the wrong field or saved without the full script	Re-copy the snippet from Websites and paste it again
Bubble only on some pages	Snippet added to a single page header	Move it to the app-level setting
Two chat bubbles	Snippet added twice	Remove one copy
Chat appears but answers are thin	Little public content	Add Q&A pairs, free text and files in the knowledge base
Chat hidden behind a page element	A Bubble element with a high layer order	Reduce the element’s stacking or move the widget position in Talkmio

Step 5: Test the Real Conversations

Ask Mio two or three questions your customers actually ask: how pricing works, what happens to their data, how to cancel. Check that each answer comes from your own pages. If something is missing, add it to the site or to the knowledge base and ask again. Then ask something Mio should not answer, such as a question about a specific order or account, and confirm that it hands the chat to a person.

Open the Talkmio Inbox in another window. A handed-off conversation gets a “needs human” badge, you get a browser notification and, if nobody is online, an e-mail. Reply from the Inbox as an agent. Once a person replies, Mio stays out of that conversation.

Logged-In Users and Privacy

A Bubble app often knows who the user is, and a chat can feel more helpful if it knows too. Keep two things in mind. First, the standard widget is anonymous unless the visitor gives their name and e-mail, so do not assume the chat knows the user’s account. You can ask for details in a pre-chat form, set to none, optional or required in the widget settings. Second, remind agents not to ask for passwords or payment details in chat, and say so in your instructions.

Tell users about the chat in your privacy notice. Talkmio stores data on servers in the EU (Germany), only the conversation text and relevant knowledge base excerpts go to the AI model provider, and you can export or delete data at any time. If you serve EU users, our GDPR and live chat guide covers the checklist. For apps that load third-party scripts conditionally, see how to add live chat with Google Tag Manager as an alternative route.

Keeping the Setup Healthy Over Time

A chat that works on launch day can drift. Bubble apps change quickly, pages are renamed and features move, so give the chat a small maintenance routine. After each significant release, ask Mio a question about the changed feature and check that the answer matches the new behaviour. If your public pages changed, use Re-read in the knowledge base so Mio picks up the new text. Check the Inbox weekly for conversations marked as needing a person, and turn repeated questions into short help pages or Q&A pairs.

Also check the snippet whenever you restructure the app. Moving settings, duplicating an app for a new client or restoring a backup can leave the header field empty or hold an outdated key. Keep a note of the site key and the place where it is installed, and confirm the bubble appears on the live domain after any major change.

Performance and Mobile Behaviour

Bubble apps can already be heavy, so any extra script deserves a check. The chat script is loaded once and the widget is small, but measure your page before and after with your preferred speed tool. Our guide to live chat widget page speed explains what to measure. On mobile, open the live app on a phone and check that the bubble does not cover a primary button, such as a floating action button or a cookie banner. If it does, change the widget position in Talkmio rather than editing the Bubble layout.

Finally, set expectations about hours. If nobody is online, visitors are asked for an e-mail before their first message and your reply goes out by e-mail. Write that into your offline text so visitors know what happens next.

Frequently Asked Questions

Do I need a Bubble plugin to add live chat?

No. Talkmio installs with one script snippet, so you paste it into the app’s header or body script setting and deploy. Bubble’s available settings and plan limits change, so check the current Bubble manual to confirm that your plan allows custom scripts before you begin.

Why does the chat not show on my live app?

The usual reason is that the change was made in the development version and not deployed. Deploy to live, then reload your real domain in a private window. If it still does not appear, check that the snippet is complete and was pasted into the app-level script field.

Can I show the chat only on certain pages?

Yes. Add the snippet to the header of individual pages instead of the app-level setting. A global snippet is simpler and fine for most apps, while per-page placement suits cases where you want the chat on marketing pages but not on admin or checkout screens.

Can Mio answer questions about a user’s account?

No. Mio answers from your website, FAQ and uploaded documents and hands the chat to your team when it cannot answer or when the visitor asks about a specific order. Agents can then look at the account in your own system and continue the conversation in the Inbox.

Does the widget slow down my Bubble app?

The widget is a small script loaded once, but any added script has a cost. Measure your key pages before and after, and keep the snippet to a single copy. If you see a problem, check other scripts first, because several stacked tools usually cause more delay than one chat widget.

How much does it cost to add live chat to Bubble?

Talkmio has a Free plan with one operator, one website and 50 AI answers a month, and no card is needed. Pro costs €19 a month and Ultimate €49 a month. Bubble’s own plan costs are separate, so check them for the script features you need.

The Bottom Line

To add live chat to Bubble, create the site key, teach Mio from your public content, paste one snippet into the header or body script field, deploy to live and test with real questions. Keep a single copy of the snippet, decide whether the chat should be global or per page, and tell users about it in your privacy notice. Create a free Talkmio account and have your Bubble app answering questions today.