Build a native live customer support system in Bubble with an agent-side chat interface, customer queue management, canned responses, and conversation history. This gives you real-time support without relying on third-party widgets like Intercom or Zendesk — all built visually in Bubble's editor.
Overview: Adding Live Customer Support in Bubble
This tutorial walks you through building a native live support chat system in Bubble. You will create data types for conversations and messages, build chat interfaces for both customers and support agents, implement a queue system for assigning conversations to available agents, and add canned responses for efficiency. This approach gives you full control over the support experience compared to embedding a third-party widget.
Prerequisites
- A Bubble account with an existing app
- Basic understanding of Bubble data types and workflows
- Familiarity with Repeating Groups and custom states
- Knowledge of Bubble's real-time data refresh behavior
Step-by-step guide
Create the support data types
Create the support data types
Go to the Data tab and create: Conversation with fields: customer (User), agent (User), status (Option Set: Waiting, Active, Resolved), subject (text), started_at (date), resolved_at (date). Message with fields: conversation (Conversation), sender (User), body (text), is_from_agent (yes/no), sent_at (date). CannedResponse with fields: title (text), body (text), category (text).
Expected result: Conversation, Message, and CannedResponse data types exist with all fields.
Build the customer chat widget
Build the customer chat widget
On your app pages, add a floating Group in the bottom-right corner for the chat widget. Add a chat icon button that toggles the widget open/closed using a Custom State. When opened, show a Multiline Input for the message and a Send button. The first message creates a new Conversation (status = Waiting) and a Message record. Subsequent messages create Message records linked to the existing Conversation. Display messages in a Repeating Group sorted by sent_at ascending.
Pro tip: Use Bubble's real-time data refresh — the Message Repeating Group auto-updates when new messages are created by either side.
Expected result: Customers see a chat widget where they can send messages and receive replies in real time.
Build the agent support dashboard
Build the agent support dashboard
Create an agent-dashboard page restricted to support staff. On the left, add a Repeating Group showing Conversations sorted by status (Waiting first, then Active). Each cell shows customer name, subject, status badge, and time waiting. On the right, add the active conversation panel: messages in a Repeating Group, a Multiline Input for the agent's reply, and a Send button. When an agent clicks a Waiting conversation, change its status to Active and assign agent = Current User.
Expected result: Agents see a queue of waiting conversations, can claim them, and respond in real time.
Add canned responses
Add canned responses
On the agent dashboard, add a Dropdown or searchable list of CannedResponses. When an agent selects one, auto-fill the reply Multiline Input with the canned response body. The agent can edit before sending. Create an admin page for managing canned responses — adding, editing, and categorizing them. Common categories: Greetings, Troubleshooting, Billing, Closing.
Expected result: Agents can quickly insert pre-written responses and customize them before sending.
Implement conversation resolution and history
Implement conversation resolution and history
Add a Resolve button on the agent panel. The workflow: Make changes to Conversation — status = Resolved, resolved_at = Current date/time. Resolved conversations move to a separate tab on the dashboard. For the customer, show a message that the conversation has been resolved with an option to reopen. Store all messages permanently for conversation history. For enterprise support systems with SLA tracking and automated routing, consider working with RapidDev.
Expected result: Agents can resolve conversations, and both sides can view conversation history.
Complete working example
1LIVE CUSTOMER SUPPORT — WORKFLOW SUMMARY2==========================================34DATA TYPES:5 Conversation6 - customer (User)7 - agent (User)8 - status (Option Set: Waiting/Active/Resolved)9 - subject (text)10 - started_at (date)11 - resolved_at (date)12 Message13 - conversation (Conversation)14 - sender (User)15 - body (text)16 - is_from_agent (yes/no)17 - sent_at (date)18 CannedResponse19 - title (text), body (text), category (text)2021CUSTOMER WIDGET:22 Floating Group (bottom-right, toggleable)23 Repeating Group: Messages for current conversation24 Multiline Input + Send button2526WORKFLOW: Customer sends first message27 Action 1: Create Conversation (status=Waiting, customer=Current User)28 Action 2: Create Message (conversation=Result of Step 1)2930WORKFLOW: Customer sends follow-up31 Action: Create Message (conversation=existing Conversation)3233AGENT DASHBOARD:34 Left panel: Conversation queue (sorted by status, then time)35 Right panel: Active conversation messages + reply3637WORKFLOW: Agent claims conversation38 Event: Click on Waiting conversation39 Action: Make changes → status=Active, agent=Current User4041WORKFLOW: Agent sends reply42 Action: Create Message (is_from_agent=yes, sender=Current User)4344WORKFLOW: Resolve conversation45 Action: Make changes → status=Resolved, resolved_at=nowCommon mistakes when adding live customer support to a Bubble app
Why it's a problem: Not using real-time data sources for the message list
How to avoid: Use a Do a search for as the Repeating Group's data source so Bubble's WebSocket auto-refresh shows new messages instantly.
Why it's a problem: Not restricting the agent dashboard to support staff
How to avoid: Add a Page is loaded workflow that redirects non-agent users, and add Privacy Rules on Conversations and Messages.
Why it's a problem: Creating a new Conversation for every message
How to avoid: Check for an existing open Conversation for the current user before creating a new one. Only create a new Conversation if none exists or the previous one is Resolved.
Best practices
- Use Bubble's real-time data refresh for instant message delivery
- Show a queue with wait times so agents can prioritize
- Add canned responses to speed up common interactions
- Store all messages permanently for conversation history and training
- Restrict agent dashboard access with page load redirects and Privacy Rules
- Add a typing indicator using a Custom State that clears after 3 seconds
- Include a satisfaction survey after conversation resolution
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I am building live customer support in Bubble.io. I need a customer-facing chat widget, an agent dashboard with a conversation queue, real-time messaging, and canned responses. How do I structure the data types and workflows?
Build a live customer support system. Create Conversation and Message data types. Add a floating chat widget for customers and an agent dashboard with a queue. Implement real-time messaging and canned responses for agents.
Frequently asked questions
Should I build native support or use a third-party widget?
Third-party widgets (Intercom, Zendesk) are faster to set up but cost monthly fees and offer less customization. Native Bubble support gives you full control and no per-agent fees.
How fast do messages appear for the other side?
Bubble's WebSocket auto-refresh typically delivers messages within 1-3 seconds. This is fast enough for live chat in most cases.
Can I add a chatbot for initial triage?
Yes. Add an automated first response that asks the customer to select a category. Based on the selection, either provide an automatic answer from your FAQ data or route to a live agent.
How do I handle offline hours?
Add a schedule check: if outside business hours, show a form that creates a Conversation with status Waiting and sends a We will respond when we are back message.
Can RapidDev help build an enterprise support system?
Yes. RapidDev specializes in Bubble development and can build enterprise support platforms with SLA tracking, automated routing, AI-powered responses, and multi-channel support.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation