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
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
- In the Bubble editor, open the Settings tab and choose SEO & metatags.
- Paste the MyLiveChat code from Step 1 into Script/meta tags in header.
- Save your change.
- 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:
- 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.
- Start a chat as a visitor and send a test message.
- Sign in to the web console and confirm the message arrives and
that you can reply.
- 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.