How to add voice chat to a Bubble app

The simplest reliable way to add voice chat to a Bubble app is to use a third‑party service that already provides real‑time voice rooms. The most common options Bubble developers use today are Agora or Daily.co. Both give you a browser-based voice call you can load inside a Bubble page using their JavaScript SDK through the Bubble Toolbox plugin. Bubble cannot do real‑time audio streaming on its own, so you embed the provider’s client into your page and control it with JavaScript actions.

What You Actually Need

You need three things: a provider account (Agora or Daily), a Bubble page where users join a “voice room,” and some small JavaScript calls triggered from Bubble workflows using the Toolbox plugin. The provider handles all the audio; Bubble just creates the room and joins the user.

• Agora gives you voice-only channels.
• Daily.co gives you sessions you can open in an iframe or with JS.
• Bubble Toolbox Plugin lets you run JavaScript in workflows.

Step‑by‑Step (simple but real)

Create a room: In Daily, rooms can be created from their dashboard without API. Use that room URL in Bubble.

• Add an HTML element to the page.
• Load the Daily script: <script src="https://unpkg.com/@daily-co/daily-js"></script>.

Then use Toolbox → “Run JavaScript” when user clicks “Join Voice.”

// join Daily room in Bubble
window.callFrame = window.DailyIframe.createFrame({
    iframeStyle: { width: "0px", height: "0px" } // voice only
});
callFrame.join({ url: "https://your-subdomain.daily.co/your-room" });

This immediately connects the user to a shared voice room. To leave:

// leave Daily voice room
if (window.callFrame) {
  window.callFrame.leave();
}

This approach is lightweight, works in real Bubble apps, and requires no backend workflows. For Agora, the concept is identical but requires token generation via Bubble’s backend or their temporary tokens. Daily is easier for beginners, so most Bubble developers start with it for voice chat.