Add MyLiveChat to your Bubble site

Bubble lets you add MyLiveChat through its script/meta tags settings — paste the MyLiveChat code once and the chat button loads with your app. Because a Bubble app is a single-page application, it is worth reading the note below about page changes.

Use this guide to add MyLiveChat to Bubble. The free plan includes one agent, unlimited chats, and unlimited websites — no credit card required.

If you do not have a MyLiveChat account yet, create a free MyLiveChat account.

Start free
Live chat setup guide

Step 1. Get your MyLiveChat code

Sign in to the MyLiveChat web console and click Deployment menu on the left. Choose Embedded Chat tab and copy the MyLiveChat code.

Step 2. Add the code to Bubble

  1. In the Bubble editor, open the Settings tab and choose SEO & metatags.
  2. Paste the MyLiveChat code from Step 1 into Script/meta tags in header.
  3. Save your change.
  4. Deploy to Live, then open your live app — the chat button appears with the app.

If you only want chat on part of the app, open a specific page and use that page’s own header script field instead of the app-wide setting.

Check that live chat is working

Do not assume the install worked because you saw no error. Open your site in a private browsing window and walk through this once:

  1. Look for the chat launcher on the page. If it is missing, view the page source and search for mylivechat to confirm the code is really being served.
  2. Start a chat as a visitor and send a test message.
  3. Sign in to the web console and confirm the message arrives and that you can reply.
  4. Close the chat and check the transcript is saved, so you know follow-up will work.

Test the live version, not the development version. Bubble keeps development and live as separate deployments, and it is easy to conclude nothing works because you were looking at the wrong one.

Common Bubble setup mistakes

  • The app was never deployed to live. Changes sit in development until you deploy. This is the most common Bubble mistake.
  • Only the development version was tested. The development version has its own address. Confirm the version your users actually open.
  • The widget looked missing after navigating in-app. Bubble apps are single-page applications, so pages change without a full reload. See the single-page app guide below if the launcher behaves unexpectedly after navigation.
  • The code was added to one page only. A page-level script field covers that page. Use the app-wide setting when you want chat everywhere.

What happens next?

After setup, sign in to the web console to answer visitors from your browser. You can also use the desktop app from the download page if your team prefers it.

Want the AI to answer first? Point the AI assistant at your site content and it handles routine questions 24/7, then hands off to a human with the full transcript when one is needed.

Why add live chat to Bubble?

A Bubble app usually has real users doing real work, and the questions that arrive are specific: something did not save, a screen is not what they expected. Chat gets those questions to you while the user is still in the app, instead of in an email the next day.

Because the code is an app setting rather than an element on a page, it keeps working as you add screens and change workflows.

Bubble live chat FAQ

Does it work inside a single-page app?

Yes. The chat loads with the app rather than per page. If you need the detail on how in-app navigation is handled, read the live chat on a single-page app guide.

Do I have to deploy to live?

Yes. Development changes do not reach your live app until you deploy.

Can I show chat only to logged-in users?

Use a page-level script field for the screens behind login, or control visibility from your MyLiveChat dashboard.

Will it slow my app down?

The chat code loads asynchronously after your app content, so it does not block rendering.

Is it really free?

Yes. One agent, unlimited chats, and unlimited websites are free forever, with no credit card required.

Make the chat window fit your site

Colours, position, language, the pre-chat form and your offline message are all set in your MyLiveChat dashboard rather than in your Bubble code, so you can change them without editing your site again. See customization options for what can be changed, and visitor monitoring if you want to see which page a visitor is on before you reply.

Related guides

New to live chat? Start with how to add live chat to your website and the live chat launch checklist, then live chat best practices once you are answering real conversations. Also useful: Live chat on a single-page app and Live chat for in-app and product users. If you are worried about page speed, see does live chat slow down your website.

Any questions?

If anything is unclear, contact our support team from the chat button on this page or visit the Support page. We can help you choose the right setup path.

Free forever for 1 agent

Give every visitor an instant way to reach you.

Launch live chat, connect your knowledge base, and add AI answers when you are ready. No credit card, no trial clock.