Add Live Voice Chat to Your AI Chatbot — Flutter, iOS, Android & Web

Typing is fine. But sometimes your users just want to talk — while they're driving, cooking, holding a baby, or simply because speaking is faster than thumbing a keyboard. Widget-Chat now ships live voice chat: tap the mic and your assistant answers out loud, in real time, inside the exact same widget you already embed.

This post explains what the feature does, how the audio actually flows, and how to turn it on — no new SDK, no separate voice vendor, no keys in the browser.

What "live voice" actually is

It's a real-time voice call with your assistant, not a record-then-send voice note. When a user starts a call:

• They speak naturally and the assistant replies out loud in a natural voice.
• They can interrupt (barge-in) at any moment — the assistant stops and listens, like a real conversation.
• Every turn is transcribed on screen as live captions, which the user can toggle off.
• The assistant can still show rich content — product carousels and cards render on screen while it's speaking.

The same call UI ships on Flutter (iOS, Android, desktop) and on the framework-free web widget. Same brain, same behavior, every screen.

How the audio flows

Under the hood it's a plain WebSocket carrying raw PCM audio — no proprietary plugin, no WebRTC gateway to operate:

1. The browser (or app) captures the microphone and downsamples it to 16 kHz mono PCM16.
2. That audio streams up a WebSocket to the Widget-Chat voice gateway.
3. The gateway runs speech-to-speech against your configured model and streams 24 kHz mono PCM16 back down.
4. The client plays it back gaplessly and pulses the on-screen orb with the audio energy.
5. Captions and any rich cards arrive as JSON messages on the same socket.

mic ──16kHz PCM16──▶ WebSocket ──▶ voice gateway ──speech-to-speech──┐
                                                                     │
speaker ◀──24kHz PCM16── WebSocket ◀── gateway ◀─────────────────────┘
              + captions (JSON)  + rich cards (JSON)

Crucially, the browser only ever streams audio. Your model provider keys, system prompt, and tools stay on your backend — the client mints a short-lived session and never sees a secret.

Turn it on

Live voice is a server-side capability gated by a dashboard flag and your plan. Because it's config-driven, enabling it requires no code change in an app that already embeds Widget-Chat — a mic button simply appears in the composer.

On the web, the embed is still one script tag:

<script
  src="https://cdn.widget-chat.com/widget-chat.js"
  data-secret-key="pk_live_your_public_key"
  data-base-url="https://api.widget-chat.com"
></script>

In Flutter and FlutterFlow, it's still the widget_chat package you already have:

import 'package:widget_chat/widget_chat.dart';

// The same widget you already ship. When live voice is enabled
// for your project in the dashboard, the mic button appears —
// no extra parameters, no separate voice SDK.
WidgetChat(secretKey: 'pk_live_your_public_key');

Then, in the dashboard:

1. Open your project → Voice.
2. Toggle Live voice on.
3. Pick the voice and default language.
4. Save. The mic button goes live on every surface instantly.

Rich content, mid-call

The part people don't expect: a voice call isn't audio-only. If a shopper asks "show me something under twenty dollars," the assistant can speak the answer and render a product carousel on screen at the same time. Cards, prices, and buttons appear in the call view, so voice and visual work together instead of forcing an either/or.

Captions, languages, and accessibility

• Live captions transcribe both sides of the conversation; users toggle them with one tap.
• Multilingual — voice in and out follows the widget's locale, so a French visitor gets a French call.
• Accessibility — voice plus captions makes the assistant usable hands-free and easier for users who find typing hard.

Privacy and control

• The microphone is only opened after the user taps to start a call, and a denied permission never bills a session.
• Sessions are time-boxed (with a configurable maximum length) and end cleanly when the user hangs up.
• No provider keys, prompts, or tools are exposed to the client — the browser streams audio and nothing else.

Wrap up

Live voice turns your existing Widget-Chat assistant into something users can actually talk to — real-time speech-to-speech, barge-in, live captions, and rich cards on screen, on Flutter, iOS, Android, and the web. If Widget-Chat is already in your app, it's a dashboard toggle away.

Flip it on, tap the mic, and say hello.