Adding live chat support to a Bubble app is straightforward using third-party widgets like Intercom, Crisp, or Tawk.to. This tutorial shows you how to compare options, install the chat widget via an HTML element or plugin, pass logged-in user data for personalized conversations, and configure availability hours for your support team.
Overview: Live Chat Support in Bubble
This tutorial walks you through adding a live chat widget to your Bubble app so your users can reach your support team in real time. You will compare popular chat tools, install the widget, and pass user information so agents see who they are talking to. This guide is designed for non-technical founders who want professional support functionality without building a chat system from scratch.
Prerequisites
- A Bubble app on any plan
- An account with a live chat provider (Intercom, Crisp, or Tawk.to)
- Your chat provider's embed code or widget ID
- Basic familiarity with Bubble's Design tab
Step-by-step guide
Choose a live chat provider
Choose a live chat provider
Compare the three most popular options for Bubble apps. Tawk.to is completely free with unlimited agents, making it ideal for startups. Crisp offers a free tier with basic live chat and paid plans starting at $25/month for chatbots and automation. Intercom is the most powerful but starts at $39/month per seat, offering full customer support suites with AI features. For most early-stage apps, Tawk.to or Crisp's free tier is the best starting point. Sign up for your chosen provider and complete the initial setup to get your widget embed code.
Expected result: You have an account with your chosen chat provider and access to the embed code or widget ID.
Add the chat widget to your Bubble app
Add the chat widget to your Bubble app
In the Bubble editor, go to the Design tab. Drag an HTML element onto your page — place it anywhere since the chat widget will float in the corner regardless of placement. Paste your chat provider's embed script into the HTML element. If you want the widget on every page, place the HTML element inside a reusable element that appears on all pages like your header or footer. Alternatively, search the Bubble plugin marketplace for official plugins — Intercom and Crisp both have dedicated Bubble plugins that simplify installation.
Pro tip: Using a reusable element for the chat widget HTML means you only need to update it in one place if you change providers or update the code.
Expected result: The chat widget appears as a floating icon in the bottom-right corner of your app when you preview it.
Pass user context to the chat widget
Pass user context to the chat widget
To give your support agents context about who they are chatting with, modify the embed script to include dynamic Bubble data. Use the Insert Dynamic Data button inside the HTML element to reference Current User's email, Current User's first name, and any other relevant fields. For Tawk.to, use the Tawk_API.visitor object. For Crisp, use the $crisp.push method. For Intercom, use the intercomSettings object with email, name, and user_id fields. Make sure to wrap the dynamic data insertion in quotes where the script expects strings.
Pro tip: Include the user's plan type or account creation date as custom attributes so agents can quickly understand the user's context without asking.
Expected result: When a logged-in user opens the chat widget, support agents see the user's name, email, and custom attributes in their dashboard.
Configure availability hours and offline behavior
Configure availability hours and offline behavior
Log into your chat provider's dashboard and set your team's availability hours so the widget shows 'Online' during business hours and switches to an offline message form outside those hours. In Tawk.to, go to Administration → Chat Widget → Scheduler. In Crisp, go to Settings → Availability. In Intercom, go to Settings → Messenger → Availability. Configure the offline form to collect the visitor's email and message so you can follow up later. You can also set up automated greeting messages that appear when a user opens the widget.
Expected result: The chat widget shows online status during business hours and presents an offline contact form outside those hours.
Test the complete chat flow
Test the complete chat flow
Preview your Bubble app and click the chat widget icon. Send a test message. Open your chat provider's dashboard in another browser tab and verify the message appears with the correct user context. Reply from the dashboard and confirm the response shows up in the widget. Test the offline flow by setting your status to offline and verifying the contact form appears instead. Check that the widget loads correctly on mobile by resizing your browser or testing on a phone. Navigate to different pages to confirm the widget persists across your app.
Expected result: Messages flow correctly between the widget and your dashboard, user context displays properly, and the widget works across all pages and devices.
Complete working example
1LIVE CHAT SUPPORT SETUP SUMMARY2=====================================34PROVIDER COMPARISON:5 Tawk.to: Free, unlimited agents, basic features6 Crisp: Free tier + $25/mo for automation7 Intercom: $39/seat/mo, full support suite89INSTALLATION METHOD 1 — HTML ELEMENT:10 Design tab → Drag HTML element onto page11 Paste provider embed script12 Place in reusable header/footer for all pages1314INSTALLATION METHOD 2 — PLUGIN:15 Plugins tab → Add plugins → Search provider name16 Install official plugin17 Configure widget ID in plugin settings1819USER CONTEXT SETUP:20 HTML element → Insert Dynamic Data21 Fields to pass:22 - Current User's email23 - Current User's first name24 - Current User's unique id25 - Current User's plan (custom attribute)2627 Tawk.to:28 Tawk_API.visitor = {29 name: 'Current User's first name',30 email: 'Current User's email'31 };3233 Crisp:34 $crisp.push(['set', 'user:email',35 ['Current User's email']]);36 $crisp.push(['set', 'user:nickname',37 ['Current User's first name']]);3839 Intercom:40 window.intercomSettings = {41 app_id: 'YOUR_APP_ID',42 email: 'Current User's email',43 name: 'Current User's first name',44 user_id: 'Current User's unique id'45 };4647AVAILABILITY CONFIGURATION:48 Provider dashboard → Settings → Availability49 Set business hours schedule50 Configure offline form (email + message)51 Set automated greeting message5253TESTING CHECKLIST:54 Widget loads on preview55 Messages sent/received correctly56 User context visible to agents57 Offline form works outside hours58 Widget persists across pages59 Mobile responsiveCommon mistakes when adding Live Chat Support in Your Bubble App
Why it's a problem: Placing the HTML element on individual pages instead of a reusable element
How to avoid: Place the chat widget HTML inside a reusable element like your app header or footer that is used on every page
Why it's a problem: Not wrapping dynamic data in quotes inside the JavaScript embed code
How to avoid: Wrap each dynamic data insertion in single quotes inside the JavaScript object properties
Why it's a problem: Using the chat widget without passing user context
How to avoid: Pass at minimum the user's email and name using dynamic data inside the embed script
Best practices
- Start with a free provider like Tawk.to and upgrade only when you need advanced features
- Always pass user context to give agents immediate conversation context
- Set up automated greetings to engage users proactively
- Configure offline hours so users know when to expect a response
- Place the widget in a reusable element for consistent availability across all pages
- Test the chat flow from both the user and agent perspectives before going live
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to add live chat support to my Bubble.io app using Tawk.to. How do I embed the widget and pass the logged-in user's name and email to the chat agent?
Help me add a live chat widget to my app. I want it on every page and I want support agents to see the user's name, email, and subscription plan when they start a conversation.
Frequently asked questions
Which live chat provider is best for Bubble?
For most startups, Tawk.to is the best starting point because it is completely free with unlimited agents. Crisp is great if you want chatbot automation. Intercom is best for established businesses needing a full customer support platform.
Does adding a chat widget slow down my Bubble app?
Chat widgets add a small amount of load time (typically 100-300ms) since they load external JavaScript. This is generally negligible for most apps.
Can I use live chat on Bubble's free plan?
Yes. The chat widget is embedded via HTML or plugin and works on any Bubble plan. The chat provider's pricing is separate from Bubble's pricing.
How do I track chat conversations in my Bubble database?
Most chat providers offer webhooks that fire when conversations happen. You can receive these webhooks via a Bubble backend workflow to log conversations in a custom Data Type.
Can I show the chat widget only on certain pages?
Yes. Instead of placing the HTML element in a reusable used on all pages, add it only to specific pages. Alternatively, use conditional visibility to show or hide the HTML element.
Can RapidDev help integrate live chat with my Bubble app?
Yes. RapidDev can set up live chat integration including user context passing, webhook logging, and custom routing rules for your Bubble application.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation