How to Add Voice Chat to a Bubble App

Choose a voice service based on your needs. Daily.co is the easiest to integrate with Bubble — it provides an embeddable iframe that handles all WebRTC complexity. Agora offers more customization but requires more JavaScript. Twilio is enterprise-grade but most complex. Sign up for Daily.co, create an account, and get your API key from the dashboard. Store the API key in your Bubble app's API Connector as a private parameter.

In the API Connector, set up a call to Daily.co's room creation endpoint. Configure a POST call to https://api.daily.co/v1/rooms with your API key in the Authorization header (Bearer token). The request body should include room properties like name, privacy (public or private), and expiry time. Set this call as an 'Action' type so you can trigger it from workflows. Initialize the call with sample data.

1{
2  "name": "room-{{unique_id}}",
3  "privacy": "private",
4  "properties": {
5    "exp": 1711699200,
6    "max_participants": 10,
7    "enable_chat": false
8  }
9}

On your call page, add an HTML element sized to the area where you want the voice controls. For Daily.co, embed their prebuilt UI iframe. Use Bubble's 'Insert dynamic data' to pass the room URL into the iframe src. The prebuilt UI includes mute/unmute, leave call, and participant list. Style the HTML element to match your app's design with CSS inside the element.

1<iframe
2  id="voice-call"
3  src="https://your-domain.daily.co/room-name"
4  allow="microphone; camera; autoplay; display-capture"
5  style="width:100%;height:400px;border:none;border-radius:12px;"
6></iframe>

Create a 'Start Call' button workflow: Step 1 — call the room creation API to generate a new room. Step 2 — store the room URL in a 'Call' Data Type record linked to the conversation or group. Step 3 — redirect both users to the call page with the room URL as a parameter. For the recipient, send a notification (push, email, or in-app) with a 'Join Call' link that opens the call page with the same room URL.

The browser will prompt for microphone permission when the voice client loads. Add a message on the call page explaining that microphone access is required. Track call state in your database: create a 'Call' Data Type with fields for room_url, participants (list of Users), status (ringing/active/ended), and start_time. Update status to 'active' when both users join and 'ended' when the last user leaves. Use a 'Do when condition is true' event to detect when the call iframe is removed or the user navigates away.