### Answer Yes, you can implement a voice agent as a chat widget where users click and speak with the voice agent natively in the browser. [(1) ]() The Retell Website Widget supports hybrid mode that combines both voice and chat capabilities. When you provide both

data-agent-id

(for chat) and

data-voice-agent-id

(for voice) , the widget enters hybrid mode with the following features: - Users see a chooser screen with "Voice Assistant" and "Chat Assistant" options - A tab bar at the bottom allows switching between voice and chat at any time - Voice calls use WebRTC for real-time audio with a built-in audio visualizer If you only want the voice functionality, you can set just

data-voice-agent-id

, and the widget will go directly to the voice call interface. Here's the basic implementation:

html
<script
  id="retell-widget"
  src="<https://dashboard.retellai.com/retell-widget-v2.js%22>
  type="module"
  data-voice-public-key="key_xxxxxxxxxxxxxxxxxxxxx"
  data-voice-agent-id="agent_voice_xxxxxxxxxxx"
></script>

For hybrid mode with both voice and chat:

html
<script
  id="retell-widget"
  src="<https://dashboard.retellai.com/retell-widget-v2.js%22>
  data-public-key="key_xxxxxxxxxxxxxxxxxxxxx"
  data-voice-public-key="key_xxxxxxxxxxxxxxxxxxxxx"
  data-agent-id="agent_chat_xxxxxxxxxxxxxxx"
  data-voice-agent-id="agent_voice_xxxxxxxxxxx"
></script>

The widget handles all the WebRTC audio processing natively in the browser, so users can speak directly without any additional setup.

​ To learn more, see the sources I considered: [[1] Retell Website Widget](https://docs.retellai.com/deploy/chat-widget) ​

Feel free to tag @AI Evy with additional questions. I also appreciate feedback, it helps me improve.

### Answer You get the

data-voice-agent-id

by creating a voice agent first [(1) ]() . When you create a voice agent, the API returns an

agent_id

field - this is the value you use for

data-voice-agent-id

in the widget [(2) ]() [(1) ]() . Here's how to create a voice agent using the Retell SDK:

javascript
import Retell from 'retell-sdk';
const client = new Retell({
 apiKey: process.env['RETELL_API_KEY'],
}) ;
const agentResponse = await client.agent.create({
 response_engine: { llm_id: 'llm_234sdertfsdsfsdf', type: 'retell-llm' },
 voice_id: 'retell-Cimo',
}) ;
console.log(agentResponse.agent_id) ;

[(1) ]() The

agentResponse.agent_id

returned from this API call is what you'll use as your

data-voice-agent-id

in the widget script tag [(2) ]() [(1) ]() . You can also retrieve an existing agent's ID using:

javascript
const agentResponse = await client.agent.retrieve('16b980523634a6dc504898cda492e939') ;
console.log(agentResponse.agent_id) ;

[(2) ]()

​ To learn more, see the sources I considered: [[1] Create Voice Agent](https://docs.retellai.com/api-references/create-agent) [[2] Get Voice Agent](https://docs.retellai.com/api-references/get-agent) ​

Feel free to tag @AI Evy with additional questions. I also appreciate feedback, it helps me improve.

### Answer You're right - the URL was malformed. Here's the correct script tag for the Retell Website Widget:

html
<script
  id="retell-widget"
  src="<https://dashboard.retellai.com/retell-widget-v2.js%22>
  type="module"
  data-voice-public-key="YOUR_VOICE_PUBLIC_KEY"
  data-voice-agent-id="YOUR_VOICE_AGENT_ID"
></script>

[(1) ]() For voice-only mode, that's all you need. For hybrid mode with both voice and chat:

html
<script
  id="retell-widget"
  src="<https://dashboard.retellai.com/retell-widget-v2.js%22>
  data-public-key="key_xxxxxxxxxxxxxxxxxxxxx"
  data-voice-public-key="key_xxxxxxxxxxxxxxxxxxxxx"
  data-agent-id="agent_chat_xxxxxxxxxxxxxxx"
  data-voice-agent-id="agent_voice_xxxxxxxxxxx"
></script>

Replace the placeholder values with your actual Retell public key and agent IDs .

​ To learn more, see the sources I considered: [[1] Retell Website Widget](https://docs.retellai.com/deploy/chat-widget) ​

Feel free to tag @AI Evy with additional questions. I also appreciate feedback, it helps me improve.