Skip to content
Sites

How to set up and use the Voice AI Chat Widget

Learn how to set up the Voice AI Chat Widget in GHL Customer Care. Enable it from Labs, configure the widget, install it on pages, and test visitor calls.

6 min read1,297 words11 explained imagesUpdated Wed, 26 Aug at 9:14 AM
View as markdownOpen in ClaudeOpen in ChatGPT
Each image has a one line explanation. Switch to full detail for the step it belongs to, the fields and buttons involved, examples and the whole procedure.
On this page
  1. Overview
  2. What the Voice AI Chat Widget does
  3. Key Capabilities
  4. Enabling the Voice AI Chat Widget
  5. Step 1: Enable from Labs
  6. Step 2: Configure the Widget
  7. Step 3: Add the widget to a website or funnel
  8. Step 4: How visitors interact
  9. Connect a Chat Widget from Voice AI Deploy
  10. Best Practices
  11. Security and Compliance
  12. Troubleshooting
  13. Example: Setting up for lead capture
  14. Frequently Asked Questions

This guide explains what the Voice AI Chat Widget does, how to set it up, and how to use it effectively for both new and existing accounts.

TABLE OF CONTENTS

Overview

  • The Voice AI Chat Widget allows visitors to communicate with your AI agent using real-time voice conversations directly inside the chat widget.
  • This feature enables users to talk through their browser’s microphone and speakers without requiring a phone number, download or call setup.
  • It is currently available under Labs, allowing you to enable and test the feature before it becomes generally available.

What the Voice AI Chat Widget does

The Voice AI Chat Widget works as a voice-only interaction mode within the existing chat widget framework.
Visitors can initiate a live voice session by clicking a microphone icon, and the AI agent responds conversationally in real time.

During the session, visitors can:

  • Start or end a voice conversation.

  • Mute or unmute the session as needed.

  • Provide contact information and details verbally.

  • Restart a conversation at any time by disconnecting and calling again.

The AI agent uses your configured Voice AI automations to handle interactions.
All existing Voice AI actions are supported, except Call Transfer, which is currently unavailable.

Key Capabilities

  • Browser-based voice calling directly from the chat widget.

  • No outbound call or phone number required.

  • Configurable AI Agent Name to match your brand or business.

  • Automatic call recording notice displayed for transparency.

  • Built-in reCAPTCHA protection to prevent automated or repeated misuse.

  • Full compatibility with existing Voice AI actions and workflows.

  • You can create up to 100 Voice AI agents.

Enabling the Voice AI Chat Widget

Step 1: Enable from Labs

  1. Navigate to Settings > Labs > sub-account tab.

  2. Find the Voice AI Chat Widget option.

  3. Toggle the feature ON to enable it.

Once enabled, the Voice AI chat type becomes available in the Chat Widget builder.
If you manage multiple accounts, you can choose to enable or disable it for specific sub-accounts.

Step 2: Configure the Widget

  1. Go to Sites > Chat Widgets.

    Step 1 of 5: Go to Sites > Chat Widgets What this shows Step 1 of 5: Go to Sites > Chat Widgets. What this shows Shows where to go for step 1 of 5 in the "Step 2: Configure the Widget" section of "How to set up and use the Voice AI Chat Widget". This screenshot accompanies step 1 of 5 in the "Step 2: Configure the Widget" section of "How to set up and use the Voice AI Chat Widget". At this point in the walkthrough you go to Sites > Chat Widgets. For context, this section explains: Go to Sites > Chat Widgets. Open an existing widget or create a new one. Under the Agent Tab, select Voice AI Agent. In the Voice AI Agent Name field, enter the name that will be displayed to visitors (for example: “Sales Assistant” or “SupportBot”). Click Save to apply your settings. The navigation path used here is Sites > Chat Widgets. The next step is to open an existing widget or create a new one. Step 1 of 5Path: Sites > Chat WidgetsImage 1 of 11 Where to goGo to Sites > Chat Widgets.
    Buttons and menus referenced Sites > Chat Widgets.Agent TabVoice AI Agent.Voice AI Agent NameSaveNotenot be allowed
    Next stepOpen an existing widget or create a new one.
    All 5 steps in this procedure
    1. Go to Sites > Chat Widgets. this image
    2. Open an existing widget or create a new one.
    3. Under the Agent Tab, select Voice AI Agent.
    4. In the Voice AI Agent Name field, enter the name that will be displayed to visitors (for example: “Sales Assistant” or “SupportBot”).
    5. Click Save to apply your settings.

  2. Open an existing widget or create a new one.

    Step 2 of 5: Open an existing widget or create a new one What this shows Step 2 of 5: Open an existing widget or create a new one. What this shows Shows where to go for step 2 of 5 in the "Step 2: Configure the Widget" section of "How to set up and use the Voice AI Chat Widget". This screenshot accompanies step 2 of 5 in the "Step 2: Configure the Widget" section of "How to set up and use the Voice AI Chat Widget". At this point in the walkthrough you open an existing widget or create a new one. The navigation path used here is Sites > Chat Widgets. The next step is to under the Agent Tab, select Voice AI Agent. Step 2 of 5Path: Sites > Chat WidgetsImage 2 of 11 Where to goOpen an existing widget or create a new one.
    Buttons and menus referenced Sites > Chat Widgets.Agent TabVoice AI Agent.Voice AI Agent NameSaveNotenot be allowed
    Next stepUnder the Agent Tab, select Voice AI Agent.
    All 5 steps in this procedure
    1. Go to Sites > Chat Widgets.
    2. Open an existing widget or create a new one. this image
    3. Under the Agent Tab, select Voice AI Agent.
    4. In the Voice AI Agent Name field, enter the name that will be displayed to visitors (for example: “Sales Assistant” or “SupportBot”).
    5. Click Save to apply your settings.

  3. Under the Agent Tab, select Voice AI Agent.

    Step 3 of 5: Under the Agent Tab, select Voice AI Agent What this shows Step 3 of 5: Under the Agent Tab, select Voice AI Agent. What this shows Shows what to choose for step 3 of 5 in the "Step 2: Configure the Widget" section of "How to set up and use the Voice AI Chat Widget". This screenshot accompanies step 3 of 5 in the "Step 2: Configure the Widget" section of "How to set up and use the Voice AI Chat Widget". At this point in the walkthrough you under the Agent Tab, select Voice AI Agent. The navigation path used here is Sites > Chat Widgets. The next step is to in the Voice AI Agent Name field, enter the name that will be displayed to visitors (for example: “Sales Assistant” or “SupportBot”). Step 3 of 5Path: Sites > Chat WidgetsImage 3 of 11 What to chooseUnder the Agent Tab, select Voice AI Agent.
    Buttons and menus referenced Agent TabVoice AI Agent.Sites > Chat Widgets.Voice AI Agent NameSaveNotenot be allowed
    Next stepIn the Voice AI Agent Name field, enter the name that will be displayed to visitors (for example: “Sales Assistant” or “SupportBot”).
    All 5 steps in this procedure
    1. Go to Sites > Chat Widgets.
    2. Open an existing widget or create a new one.
    3. Under the Agent Tab, select Voice AI Agent. this image
    4. In the Voice AI Agent Name field, enter the name that will be displayed to visitors (for example: “Sales Assistant” or “SupportBot”).
    5. Click Save to apply your settings.

  4. In the Voice AI Agent Name field, enter the name that will be displayed to visitors (for example: “Sales Assistant” or “SupportBot”).

    Step 4 of 5: In the Voice AI Agent Name field, enter the name that will be… What this shows Step 4 of 5: In the Voice AI Agent Name field, enter the name that will be displayed to visitors (for example: “Sales Assistant” or “SupportBot”). What this shows Shows what to fill in for step 4 of 5 in the "Step 2: Configure the Widget" section of "How to set up and use the Voice AI Chat Widget". This screenshot accompanies step 4 of 5 in the "Step 2: Configure the Widget" section of "How to set up and use the Voice AI Chat Widget". At this point in the walkthrough you in the Voice AI Agent Name field, enter the name that will be displayed to visitors (for example: “Sales Assistant” or “SupportBot”). The navigation path used here is Sites > Chat Widgets. The next step is to click Save to apply your settings. Step 4 of 5Path: Sites > Chat WidgetsImage 4 of 11 What to fill inIn the Voice AI Agent Name field, enter the name that will be displayed to visitors (for example: “Sales Assistant” or “SupportBot”).
    Buttons and menus referenced Voice AI Agent NameSites > Chat Widgets.Agent TabVoice AI Agent.SaveNotenot be allowed
    Next stepClick Save to apply your settings.
    All 5 steps in this procedure
    1. Go to Sites > Chat Widgets.
    2. Open an existing widget or create a new one.
    3. Under the Agent Tab, select Voice AI Agent.
    4. In the Voice AI Agent Name field, enter the name that will be displayed to visitors (for example: “Sales Assistant” or “SupportBot”). this image
    5. Click Save to apply your settings.

  5. Click Save to apply your settings.

Note: You will not be allowed to create a voice AI chat widget unless your Voice AI setup along with agent creation is completed.

Learn how to create a voice AI agent by referring this help article.

Step 2: Configure the Widget (image 5 of 11) What this shows Learn how to create a voice AI agent by referring this help article. What this shows Illustrates the "Step 2: Configure the Widget" section of "How to set up and use the Voice AI Chat Widget". This screenshot appears in the "Step 2: Configure the Widget" section of "How to set up and use the Voice AI Chat Widget". The text alongside this image reads: Learn how to create a voice AI agent by referring this help article. The navigation path used here is Sites > Chat Widgets. Immediately after, the guide continues: In the Chat Widget builder, click Get Code. Copy the generated tag. Paste this code into the Tracking Code section in the Header or Footer Tracking of your website or funnel where you want the widget to appear. Publish or update…. Path: Sites > Chat WidgetsImage 5 of 11 What this coversLearn how to create a voice AI agent by referring this help article.
Buttons and menus referenced Sites > Chat Widgets.Agent TabVoice AI Agent.Voice AI Agent NameSaveNotenot be allowed
Next stepIn the Chat Widget builder, click Get Code. Copy the generated <script> tag. Paste this code into the Tracking Code section in the Header or Footer Tracking of your website or funnel where you want the widget to appear. Publish or update the page. Once published, the Voice AI Chat Widget will appear on your site.
All 5 steps in this procedure
  1. Go to Sites > Chat Widgets.
  2. Open an existing widget or create a new one.
  3. Under the Agent Tab, select Voice AI Agent.
  4. In the Voice AI Agent Name field, enter the name that will be displayed to visitors (for example: “Sales Assistant” or “SupportBot”).
  5. Click Save to apply your settings.

Step 3: Add the widget to a website or funnel

  1. In the Chat Widget builder, click Get Code.

    Step 1 of 4: In the Chat Widget builder, click Get Code What this shows Step 1 of 4: In the Chat Widget builder, click Get Code. What this shows Shows what to click for step 1 of 4 in the "Step 3: Add the widget to a website or funnel" section of "How to set up and use the Voice AI Chat Widget". This screenshot accompanies step 1 of 4 in the "Step 3: Add the widget to a website or funnel" section of "How to set up and use the Voice AI Chat Widget". At this point in the walkthrough you in the Chat Widget builder, click Get Code. The next step is to copy the generated tag. Step 1 of 4Image 6 of 11 What to clickIn the Chat Widget builder, click Get Code.
    Buttons and menus referenced Get Code.Tracking Code
    Next stepCopy the generated <script> tag.
    All 4 steps in this procedure
    1. In the Chat Widget builder, click Get Code. this image
    2. Copy the generated <script> tag.
    3. Paste this code into the Tracking Code section in the Header or Footer Tracking of your website or funnel where you want the widget to appear.
    4. Publish or update the page. Once published, the Voice AI Chat Widget will appear on your site.

  2. Copy the generated <script> tag.

  3. Paste this code into the Tracking Code section in the Header or Footer Tracking of your website or funnel where you want the widget to appear.

    Step 3 of 4: Paste this code into the Tracking Code section in the Header or Footer… What this shows Step 3 of 4: Paste this code into the Tracking Code section in the Header or Footer Tracking of your website or funnel where you want the widget to appear. What this shows Shows what to copy for step 3 of 4 in the "Step 3: Add the widget to a website or funnel" section of "How to set up and use the Voice AI Chat Widget". This screenshot accompanies step 3 of 4 in the "Step 3: Add the widget to a website or funnel" section of "How to set up and use the Voice AI Chat Widget". At this point in the walkthrough you paste this code into the Tracking Code section in the Header or Footer Tracking of your website or funnel where you want the widget to appear. The next step is to publish or update the page. Once published, the Voice AI Chat Widget will appear on your site. Step 3 of 4Image 7 of 11 What to copyPaste this code into the Tracking Code section in the Header or Footer Tracking of your website or funnel where you want the widget to appear.
    Buttons and menus referenced Tracking CodeGet Code.
    Next stepPublish or update the page. Once published, the Voice AI Chat Widget will appear on your site.
    All 4 steps in this procedure
    1. In the Chat Widget builder, click Get Code.
    2. Copy the generated <script> tag.
    3. Paste this code into the Tracking Code section in the Header or Footer Tracking of your website or funnel where you want the widget to appear. this image
    4. Publish or update the page. Once published, the Voice AI Chat Widget will appear on your site.

  4. Publish or update the page.  Once published, the Voice AI Chat Widget will appear on your site.

    Step 4 of 4: Publish or update the page. Once published, the Voice AI Chat Widget… What this shows Step 4 of 4: Publish or update the page. What this shows Shows how to confirm for step 4 of 4 in the "Step 3: Add the widget to a website or funnel" section of "How to set up and use the Voice AI Chat Widget". This animation accompanies step 4 of 4 in the "Step 3: Add the widget to a website or funnel" section of "How to set up and use the Voice AI Chat Widget". At this point in the walkthrough you publish or update the page. Once published, the Voice AI Chat Widget will appear on your site. Step 4 of 4Image 8 of 11 How to confirmPublish or update the page. Once published, the Voice AI Chat Widget will appear on your site.
    Buttons and menus referenced Get Code.Tracking Code
    All 4 steps in this procedure
    1. In the Chat Widget builder, click Get Code.
    2. Copy the generated <script> tag.
    3. Paste this code into the Tracking Code section in the Header or Footer Tracking of your website or funnel where you want the widget to appear.
    4. Publish or update the page. Once published, the Voice AI Chat Widget will appear on your site. this image

Step 4: How visitors interact

When a visitor opens the chat widget:

  1. They’ll see a microphone icon indicating voice chat capability.

  2. Clicking the icon starts the live voice session.

  3. The browser requests microphone access (visitors must grant permission).

  4. The AI agent responds conversationally in real time.

  5. Visitors can start, mute or end calls as they prefer.

    Step 5 of 6: Visitors can start, mute or end calls as they prefer What this shows Step 5 of 6: Visitors can start, mute or end calls as they prefer. What this shows Shows what this covers for step 5 of 6 in the "Step 4: How visitors interact" section of "How to set up and use the Voice AI Chat Widget". This screenshot accompanies step 5 of 6 in the "Step 4: How visitors interact" section of "How to set up and use the Voice AI Chat Widget". At this point in the walkthrough you visitors can start, mute or end calls as they prefer. The next step is to if the same user rapidly connects and disconnects multiple times (10 times within 60 seconds), the system triggers a reCAPTCHA challenge to ensure legitimate use. Step 5 of 6Image 9 of 11 What this coversVisitors can start, mute or end calls as they prefer.
    Buttons and menus referenced startmuteendmicrophone iconreCAPTCHA
    Next stepIf the same user rapidly connects and disconnects multiple times (10 times within 60 seconds), the system triggers a reCAPTCHA challenge to ensure legitimate use.
    All 6 steps in this procedure
    1. They’ll see a microphone icon indicating voice chat capability.
    2. Clicking the icon starts the live voice session.
    3. The browser requests microphone access (visitors must grant permission).
    4. The AI agent responds conversationally in real time.
    5. Visitors can start, mute or end calls as they prefer. this image
    6. If the same user rapidly connects and disconnects multiple times (10 times within 60 seconds), the system triggers a reCAPTCHA challenge to ensure legitimate use.

  6. If the same user rapidly connects and disconnects multiple times (10 times within 60 seconds), the system triggers a reCAPTCHA challenge to ensure legitimate use.

    Step 6 of 6: If the same user rapidly connects and disconnects multiple times (10… What this shows Step 6 of 6: If the same user rapidly connects and disconnects multiple times (10 times within 60 seconds), the system triggers a reCAPTCHA challenge… What this shows Shows what this covers for step 6 of 6 in the "Step 4: How visitors interact" section of "How to set up and use the Voice AI Chat Widget". This screenshot accompanies step 6 of 6 in the "Step 4: How visitors interact" section of "How to set up and use the Voice AI Chat Widget". At this point in the walkthrough you if the same user rapidly connects and disconnects multiple times (10 times within 60 seconds), the system triggers a reCAPTCHA challenge to ensure legitimate use. Step 6 of 6Image 10 of 11 What this coversIf the same user rapidly connects and disconnects multiple times (10 times within 60 seconds), the system triggers a reCAPTCHA challenge to ensure legitimate use.
    Buttons and menus referenced reCAPTCHAmicrophone iconstartmuteend
    All 6 steps in this procedure
    1. They’ll see a microphone icon indicating voice chat capability.
    2. Clicking the icon starts the live voice session.
    3. The browser requests microphone access (visitors must grant permission).
    4. The AI agent responds conversationally in real time.
    5. Visitors can start, mute or end calls as they prefer.
    6. If the same user rapidly connects and disconnects multiple times (10 times within 60 seconds), the system triggers a reCAPTCHA challenge to ensure legitimate use. this image

Connect a Chat Widget from Voice AI Deploy

You can also connect a Chat Widget directly from a Voice AI agent's Deploy tab without leaving the agent setup.

  1. Go to AI Agents > Voice AI and select the agent.

  2. Open the Deploy tab.

  3. In the Widgets section, locate Chat widgets.

  4. To connect an existing widget, select the widget you want to associate with the Voice AI agent.

  5. If you do not have a widget, click Create new widget. GHL Customer Care creates a baseline widget and connects it to the agent.

  6. To edit a connected widget, click the widget chip. The widget editor opens in a new browser tab, so the current Voice AI builder remains open.

  7. You can also click Manage widgets to access your existing Chat Widgets.

  8. To remove an existing connection, disconnect the widget from the agent as needed.

  9. Click Save after updating the agent's deployment settings.

Connect a Chat Widget from Voice AI Deploy (image 11 of 11) What this shows Go to AI Agents > Voice AI and select the agent. What this shows Illustrates the "Connect a Chat Widget from Voice AI Deploy" section of "How to set up and use the Voice AI Chat Widget". This screenshot appears in the "Connect a Chat Widget from Voice AI Deploy" section of "How to set up and use the Voice AI Chat Widget". The text alongside this image reads: Go to AI Agents > Voice AI and select the agent. Open the Deploy tab. In the Widgets section, locate Chat widgets. To connect an existing widget, select the widget you want to associate with the Voice AI agent. If you do not have a widget, click Create new widget. GHL Customer Care creates a…. The navigation path used here is AI Agents > Voice AI. Immediately after, the guide continues: Choose a clear, friendly agent name that fits your brand tone. Add the Voice AI widget to high-intent pages, such as “Contact”, “Pricing” or “Demo Request”. Test microphone permissions in different browsers to ensure smooth functionality…. Path: AI Agents > Voice AIImage 11 of 11 Where to goGo to AI Agents > Voice AI and select the agent. Open the Deploy tab. In the Widgets section, locate Chat widgets. To connect an existing widget, select the widget you want to associate with the Voice AI agent. If you do not have a widget, click Create new widget. GHL Customer Care creates a baseline widget and connects it to the agent. To edit a connected widget, click the widget chip. The widget editor opens in a new browser tab, so the current Voice AI builder remains open. You can also click Manage widgets to access your existing Chat Widgets. To remove an existing connection, disconnect the widget from the agent as needed. Click Save after updating the agent's deployment settings.
Buttons and menus referenced DeployAI Agents > Voice AIWidgetsChat widgetsCreate new widgetManage widgetsSave
Next stepChoose a clear, friendly agent name that fits your brand tone. Add the Voice AI widget to high-intent pages, such as “Contact”, “Pricing” or “Demo Request”. Test microphone permissions in different browsers to ensure smooth functionality. Keep background noise minimal when training or testing your agent. Remind users that calls are not recorded to maintain transparency. Monitor early usage during the Labs phase to understand user behavior and make configuration adjustments as needed to your agent and widget.
All 9 steps in this procedure
  1. Go to AI Agents > Voice AI and select the agent.
  2. Open the Deploy tab.
  3. In the Widgets section, locate Chat widgets.
  4. To connect an existing widget, select the widget you want to associate with the Voice AI agent.
  5. If you do not have a widget, click Create new widget. GHL Customer Care creates a baseline widget and connects it to the agent.
  6. To edit a connected widget, click the widget chip. The widget editor opens in a new browser tab, so the current Voice AI builder remains open.
  7. You can also click Manage widgets to access your existing Chat Widgets.
  8. To remove an existing connection, disconnect the widget from the agent as needed.
  9. Click Save after updating the agent's deployment settings.

Best Practices

  • Choose a clear, friendly agent name that fits your brand tone.

  • Add the Voice AI widget to high-intent pages, such as “Contact”, “Pricing” or “Demo Request”.

  • Test microphone permissions in different browsers to ensure smooth functionality.

  • Keep background noise minimal when training or testing your agent.

  • Remind users that calls are not recorded to maintain transparency.

  • Monitor early usage during the Labs phase to understand user behavior and make configuration adjustments as needed to your agent and widget.

Security and Compliance

The Voice AI Chat Widget includes built-in security and compliance mechanisms:

  • reCAPTCHA protection prevents misuse through repeated connect/disconnect activity.

  • A non-recording notice is displayed automatically to ensure transparency.

  • All conversations are handled within the browser, ensuring user privacy.

  • The feature follows standard browser permission protocols for microphone and speaker access.

Troubleshooting

IssuePossible CauseResolution
Voice session not startingMicrophone permission not grantedAsk the user to allow microphone access when prompted.
No audio outputSpeakers muted or disconnectedCheck audio settings and ensure device output is active.
Widget not appearingScript not installed correctlyRe-copy and reinsert the <script> tag from the builder.
Frequent reCAPTCHA promptsRapid connection attempts detectedSlow down reconnection frequency to avoid triggering the system.
Unable to record sessionsFeature not supportedInform users that call recording is currently unavailable.

Example: Setting up for lead capture

This example explains how to use the Voice AI Chat Widget to capture leads through voice.

Objective:
Convert website visitors into qualified leads using voice interaction.

Setup Steps:

  1. Enable Voice AI Chat Widget in Labs.

  2. Create or open a Chat Widget and select Voice AI Agent Type.

  3. Name the agent “Sales Assistant.”

  4. Configure your Voice AI flow to:

    • Greet the visitor.

    • Collect name and business details.

    • Confirm interest type (e.g., service inquiry, demo request).

    • Save the lead in your CRM.

    • End the session politely.

  5. Embed the widget on your Contact Us or Pricing page.

Expected Experience:

  • A visitor clicks the microphone icon.

  • The AI agent greets them and begins asking questions.

  • The visitor provides answers verbally.

  • The system captures and stores their details automatically.

Result:
The lead information is collected without requiring form submissions or manual input.

Frequently Asked Questions

Q: Do visitors need a phone number or an app download to use it?
No, voice conversations happen in the browser using the visitor’s microphone and speakers.

Q: Can I create a Voice AI chat widget without setting up a Voice AI agent first?
No, your Voice AI setup and agent creation must be completed before you can create a Voice AI chat widget.

Q: Are calls recorded?
The widget displays a non-recording notice, and call recording isn’t supported for this feature.

Q: How do I configure the bot used in the Voice AI Chat Widget?
The “bot” is your Voice AI agent. To configure it, go to AI Agents → Voice AI in your sub-account, then create or edit the agent settings (like greeting, prompts/behavior, and any actions/workflows you’ve set up). Make sure your Voice AI agent setup is completed before using it in the widget.

Was this guide helpful?

Related guides

Getting Started with Chat Widget5 min read · 16 imagesOverview of Chat Widget Customizations6 min read · 10 imagesChat Widget - Business Office Hours in Live Chat1 min read · 7 imagesChat Widget - Send your leads to Whatsapp Chat1 min read · 4 images