# How to add live customer support to a Bubble app

- Tool: Bubble
- Difficulty: Beginner
- Time required: 25-30 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

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.

## Before you start

- 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

### 1. 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.

### 2. 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.

### 3. 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.

### 4. 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.

### 5. 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 code example

File: `Workflow summary`

```text
LIVE CUSTOMER SUPPORT — WORKFLOW SUMMARY
==========================================

DATA TYPES:
  Conversation
    - customer (User)
    - agent (User)
    - status (Option Set: Waiting/Active/Resolved)
    - subject (text)
    - started_at (date)
    - resolved_at (date)
  Message
    - conversation (Conversation)
    - sender (User)
    - body (text)
    - is_from_agent (yes/no)
    - sent_at (date)
  CannedResponse
    - title (text), body (text), category (text)

CUSTOMER WIDGET:
  Floating Group (bottom-right, toggleable)
  Repeating Group: Messages for current conversation
  Multiline Input + Send button

WORKFLOW: Customer sends first message
  Action 1: Create Conversation (status=Waiting, customer=Current User)
  Action 2: Create Message (conversation=Result of Step 1)

WORKFLOW: Customer sends follow-up
  Action: Create Message (conversation=existing Conversation)

AGENT DASHBOARD:
  Left panel: Conversation queue (sorted by status, then time)
  Right panel: Active conversation messages + reply

WORKFLOW: Agent claims conversation
  Event: Click on Waiting conversation
  Action: Make changes → status=Active, agent=Current User

WORKFLOW: Agent sends reply
  Action: Create Message (is_from_agent=yes, sender=Current User)

WORKFLOW: Resolve conversation
  Action: Make changes → status=Resolved, resolved_at=now
```

## Common mistakes

- **Not using real-time data sources for the message list** — If messages are loaded into a Custom State, new messages from the other side will not appear until a manual refresh Fix: Use a Do a search for as the Repeating Group's data source so Bubble's WebSocket auto-refresh shows new messages instantly.
- **Not restricting the agent dashboard to support staff** — Any user could access the agent dashboard and read all customer conversations Fix: Add a Page is loaded workflow that redirects non-agent users, and add Privacy Rules on Conversations and Messages.
- **Creating a new Conversation for every message** — This creates one conversation per message instead of grouping all messages in a single thread Fix: 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

## 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.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/add-live-customer-support-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/add-live-customer-support-in-bubble