> ## Documentation Index
> Fetch the complete documentation index at: https://help.hoopai.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Voice AI widget for websites

> Let website visitors call your Voice AI agent directly from their browser.

The Voice AI website widget adds a click-to-call button to your website, allowing visitors to start a voice conversation with your AI agent directly from their browser.

<Frame caption="The Conversation AI chat widget that embeds on your website">
  <img src="https://mintcdn.com/hoopai-84ec0cdc/c_IPTSnbNy09cl5O/images/ai-agents-conversation-ai-9-training.png?fit=max&auto=format&n=c_IPTSnbNy09cl5O&q=85&s=ec13d8455f9c96ec2b40160f90345d45" alt="Conversation AI bot test panel showing the chat interface visitors interact with" width="1609" height="750" data-path="images/ai-agents-conversation-ai-9-training.png" />
</Frame>

## How it works

When a visitor clicks the widget, their browser microphone connects to your Voice AI agent through WebRTC. The visitor speaks naturally, and the AI agent responds in real time, just like a phone call but entirely through the web browser.

## Setting up the widget

<Steps>
  <Step title="Enable the website widget">
    In your Voice AI agent settings, navigate to the **Channels** tab and enable **Website Widget**.

    <Frame caption="Enable your Voice AI agent before configuring the website widget">
      <img src="https://mintcdn.com/hoopai-84ec0cdc/pvNCpCCULfbeMUAk/images/voice-ai-setup-enable-agent.png?fit=max&auto=format&n=pvNCpCCULfbeMUAk&q=85&s=da000859680a3a3bd5ae92d78d46b678" alt="Enable agent toggle in the Voice AI settings" width="777" height="219" data-path="images/voice-ai-setup-enable-agent.png" />
    </Frame>
  </Step>

  <Step title="Customize appearance">
    Configure the widget appearance:

    * **Button color** to match your brand
    * **Position** on the page (bottom-right or bottom-left)
    * **Greeting text** shown before the visitor starts a call
    * **Agent avatar** displayed during the call (optional)
  </Step>

  <Step title="Install the embed code">
    Copy the provided embed code and add it to your website before the closing body tag.
  </Step>
</Steps>

<Note>
  The website widget requires visitors to grant microphone access in their browser. Most modern browsers (Chrome, Firefox, Safari, Edge) support this feature.
</Note>

## Best practices

* **Set clear expectations** by using the greeting text to tell visitors they will be speaking with an AI assistant
* **Test across browsers** to verify the widget works on Chrome, Safari, Firefox, and mobile browsers
* **Monitor usage** by tracking widget interactions in your Voice AI dashboard

## Next steps

<CardGroup cols={2}>
  <Card title="Creating agents" icon="plus" href="/ai/voice-ai/creating-agents">
    Configure your Voice AI agent
  </Card>

  <Card title="Phone setup" icon="phone" href="/ai/voice-ai/phone-setup">
    Add phone number support alongside the widget
  </Card>
</CardGroup>