How to Add Live Chat to a Bubble.io App (Step by Step)

Bubble.io makes it fast to ship a real app without writing a backend, but it does not ship with a support inbox. If you want visitors and signed-in users to message you from inside the app, you need to drop in a live chat widget. The good news is that Bubble gives you a clean place to load third-party scripts, and a chat widget is one of the simplest scripts you can add.

This guide is written specifically for Bubble, not the generic copy-paste instructions you see for plain HTML sites. Bubble renders your whole app as a single-page application, so where you paste the script and how it behaves on page changes both matter. Below is the exact install, the right header box to use, and how to tell the chat who is logged in. You can see the finished result in our live demo before you start.

Where Bubble lets you add a script

Bubble has two places that can hold custom HTML and script tags. Pick based on whether you want chat everywhere or only on certain pages.

• →App-wide (recommended): Open the Settings tab, go to the SEO / metatags section, and find the box labeled Script/meta tags in header. Anything you paste here is injected into the head of every page in your app.
• →Per page: Open a specific page in the editor, open the page's properties, and use the page-level HTML header field. Use this only if you want chat on one page and not the rest.

For a support widget you almost always want the app-wide box. It loads once and is available on the home page, the dashboard, the pricing page, and every other page your users land on.

Paste the muro install snippet

Copy the snippet below into the Script/meta tags in header box under Settings, SEO / metatags. Replace YOUR_WIDGET_ID with the id shown in your muro dashboard.

html<script>
  (function(w,d,s,o){
    w.MuroChat=o;w[o]=w[o]||function(){(w[o].q=w[o].q||[]).push(arguments)};
    var j=d.createElement(s);j.async=1;j.src='https://muro.chat/widget.js';
    d.getElementsByTagName('head')[0].appendChild(j);
  })(window,document,'script','muro');
  muro('init',{widgetId:'YOUR_WIDGET_ID'});
</script>

The script is asynchronous and the widget bundle is tiny (around 6 KB), so it will not slow your Bubble app down or block the page from rendering. Save your settings, then preview or deploy the app and you should see the chat bubble appear in the corner.

Why the widget persists across Bubble page changes

Bubble apps are single-page applications. When a user navigates from one page to another, Bubble does not do a full browser reload. It swaps the page content in place. Because the muro snippet lives in the app-wide header and the script loads itself once into the document head, the widget keeps running the whole time. The chat does not flicker, reload, or lose the open conversation when someone moves between pages.

This is exactly the behavior you want. A visitor can start a question on your landing page, click through to your features page, and the same conversation is still open. You do not need to re-initialize the widget on every page, and you should not paste the snippet into multiple page headers, since that can try to load it more than once.

Identify users who are logged in behind Bubble auth

Many Bubble apps put real functionality behind Current User login. When a logged-in user opens chat, you want their name and email attached to the conversation automatically so you are not asking who they are. You do that with an identify call after init.

In Bubble, the cleanest way is to use a workflow that runs custom JavaScript when the page loads and a user is logged in (the Toolbox plugin's Run JavaScript action is the common no-code route). Pass the Current User's fields into the call:

html<script>
  muro('identify', {
    userId: 'BUBBLE_CURRENT_USER_UNIQUE_ID',
    name:   'BUBBLE_CURRENT_USER_NAME',
    email:  'BUBBLE_CURRENT_USER_EMAIL'
  });
</script>

Replace each placeholder by inserting the matching dynamic data from Current User (unique id, name, email) using Bubble's dynamic expression composer. Only fire identify when Current User is logged in so you do not send empty values for anonymous visitors. Anonymous visitors still get a working chat; they just stay unidentified until they sign in.

Make the AI answer from your own docs

Once the widget is live, point the AI at your help content so it can answer common questions before a human steps in. It reads from your docs and hands off to you when it is unsure, which keeps your inbox calm. If you are worried about cost, you can bring your own AI key so the AI runs unlimited at zero markup instead of charging you per answer. It is also worth understanding why AI support gets expensive on usage-billed tools before you commit.

Quick recap

1. 01Open Settings, then SEO / metatags, then the Script/meta tags in header box.
2. 02Paste the muro snippet and replace YOUR_WIDGET_ID with your dashboard id.
3. 03Preview or deploy, then confirm the bubble appears in run mode (not the editor).
4. 04Add an identify call for logged-in users using Current User data.
5. 05Connect your docs so the AI can answer and hand off when unsure.

That is the whole install. It is one script, it persists across Bubble's single-page navigation, and it knows who your logged-in users are. Ready to try it on your own app? You can start free with a 14-day trial and no card required.