Web Widget

The web widget lets your customers talk to your AI agent directly in their browser -- no phone call needed. It uses WebRTC technology for real-time audio streaming, delivering low-latency voice conversations from any modern browser.

Where to Use It

The web widget appears in two places within Zentrix Agent Studio:

• Step 5 (Test) of the setup wizard -- test your agent's responses before going live
• Agent detail pages -- the public agent page at /agents/[slug] includes a "Try it" widget

You can also embed the widget on your own website using the Widget Token API.

How It Works

1. The browser requests a web call token from the /api/widget/token endpoint
2. The endpoint uses the web voice platform to create a web call session
3. The platform returns an access_token and call_id
4. The browser connects to the WebRTC infrastructure using the voice SDK
5. Audio streams bidirectionally -- the caller speaks, the agent responds in real time

Widget States

The VoiceWidget component goes through four states during a call:

Call Controls

During an active call, the widget provides:

• Mute / Unmute -- toggle your microphone
• End Call -- immediately terminate the conversation
• Hold Screen -- if the agent transfers to a specialist, a hold screen with a countdown appears

Embedding on Your Website

To add a voice widget to your own website, use the Widget Token API to create a call session, then connect using the Zentrix voice SDK:

<!-- Include the Zentrix Voice SDK -->
<script src="https://agentstudio.brtneura.com/widget-sdk.js"></script>

<button id="call-btn">Talk to AI Agent</button>

<script>
  const btn = document.getElementById('call-btn');

  btn.addEventListener('click', async () => {
    // 1. Request a token from your backend
    const res = await fetch('https://agentstudio.brtneura.com/api/widget/token', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ agentId: 'your-agent-id' }),
    });
    const { accessToken } = await res.json();

    // 2. Start the call using the voice SDK
    const voiceClient = new ZentrixVoiceClient();
    await voiceClient.startCall({ accessToken });

    // 3. Handle events
    voiceClient.on('call_started', () => {
      btn.textContent = 'Call in progress...';
    });
    voiceClient.on('call_ended', () => {
      btn.textContent = 'Talk to AI Agent';
    });
  });
</script>

API Endpoint Reference

POST /api/widget/token

Request body:

{
  "agentId": "uuid-of-your-agent"
}

Response:

{
  "accessToken": "voice-access-token-xxx",
  "callId": "call-id-xxx"
}

The access token is single-use and expires after the call ends. Request a new token for each call session.

For full API details, see the Widget Token API reference.

Browser Requirements

The web widget requires:

• A modern browser with WebRTC support (Chrome, Firefox, Safari, Edge)
• Microphone access (the browser will prompt for permission)
• A stable internet connection (minimum ~100kbps for audio)

No Phone Number Required

Unlike phone calls, the web widget does not require a phone number or telephony setup. It connects directly to the voice platform over the internet. This makes it ideal for:

• Testing your agent during setup
• Website visitor interactions
• Demo and trial experiences
• Businesses that prefer web-first customer support

A Product by BRTNeura Technology LLP