Skip to content
Sites

How to create an Embedded Voice AI Chat Widget

Learn how to create and embed a Voice AI Chat Widget inline on your website or funnel for a seamless, branded conversation experience.

5 min read1,129 words10 explained imagesUpdated Tue, 11 Aug at 5:09 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. Key Benefits of Embedded Voice AI Chat Widgets
  2. Where Embedded Voice AI Chat Works Best
  3. How to Create an Embedded Voice AI Chat Widget
  4. Important Behavior Notes
  5. Best Practices
  6. Frequently Asked Questions
  7. Related Articles

Add a Voice AI Chat Widget directly inside your website or funnel content for a more natural, on-page conversation experience. GHL Customer Care’s Embedded/Inline placement gives you more control over where the widget appears, making it easier to match your layout, branding, and conversion flow. This setup is ideal for businesses that want Voice AI to feel like part of the page instead of a floating element.

TABLE OF CONTENTS

What is the Embedded Voice AI Widget?

An Embedded Voice AI Chat Widget is a Voice AI widget that appears inline within your website or funnel content instead of floating in the corner of the screen. This gives you more flexibility in how you present Voice AI on key pages, such as landing pages, lead capture pages, service pages, or offer sections.

Unlike the default Sticky placement, Embedded/Inline placement lets the widget become part of the page layout. This can create a more seamless and immersive visitor experience while keeping the conversation flow aligned with the surrounding content.

Key Benefits of Embedded Voice AI Chat Widgets

Embedded Voice AI Chat Widgets help you create a more intentional on-page experience by placing the conversation exactly where visitors are most likely to engage.

  • Inline placement flexibility: Add the Voice AI widget directly inside page sections instead of relying on a floating chat bubble.
  • More natural user experience: Make conversations feel like part of the website content rather than a separate overlay.
  • Cleaner page design control: Align the widget with your funnel or website layout for a more branded experience.
  • Mobile-ready experience: The embedded widget is responsive by default for mobile visitors.
  • Flexible deployment options: Use multiple inline placements and combine embedded and sticky widget experiences on the same website or funnel.

Where Embedded Voice AI Chat Works Best

Embedded Voice AI Chat can be used on:

  • Funnels

  • Websites

  • Landing pages

  • Custom HTML sites

  • Other supported pages where Chat Widgets can be installed

The embedded widget is also mobile responsive by default, so it adjusts automatically for smaller screens while remaining part of the page content.

How to Create an Embedded Voice AI Chat Widget

Proper setup ensures the widget appears exactly where you want it and behaves consistently across your website or funnel.

Step 1: Create a New Chat Widget

Go to Sites → Chat Widget then click + New or open an existing widget.

Step 1: Create a New Chat Widget (image 1 of 10) What this shows Go to Sites → Chat Widget then click + New or open an existing widget. What this shows Illustrates the "Step 1: Create a New Chat Widget" section of "How to create an Embedded Voice AI Chat Widget". This screenshot appears in the "Step 1: Create a New Chat Widget" section of "How to create an Embedded Voice AI Chat Widget". The text alongside this image reads: Go to Sites → Chat Widget then click + New or open an existing widget. Immediately after, the guide continues: Choose the Voice AI chatoption. Image 1 of 10 Where to goGo to Sites → Chat Widget then click + New or open an existing widget.
Buttons and menus referenced Sites → Chat Widget+ New
Next stepChoose the Voice AI chatoption.

Step 2: Select Voice AI Chat

Choose the Voice AI chatoption.

Step 2: Select Voice AI Chat (image 2 of 10) What this shows Choose the Voice AI chatoption. What this shows Illustrates the "Step 2: Select Voice AI Chat" section of "How to create an Embedded Voice AI Chat Widget". This screenshot appears in the "Step 2: Select Voice AI Chat" section of "How to create an Embedded Voice AI Chat Widget". The text alongside this image reads: Choose the Voice AI chatoption. For context, this section explains: Go to Sites → Chat Widget then click + New or open an existing widget. Immediately after, the guide continues: Navigate to the Style tab Under Widget Placement, choose: Embedded / Inline (Renders inside content). Image 2 of 10 What to chooseChoose the Voice AI chatoption.
Buttons and menus referenced Voice AI
Next stepNavigate to the Style tab Under Widget Placement, choose: Embedded / Inline (Renders inside content)

Step 3: Set Widget Placement to Embedded

  1. Navigate to the Style tab

  2. Under Widget Placement, choose: Embedded / Inline (Renders inside content)

This ensures the widget will appear within your page layout instead of floating on the screen.


Step 3: Set Widget Placement to Embedded (image 3 of 10) What this shows This ensures the widget will appear within your page layout instead of floating on the screen. What this shows Illustrates the "Step 3: Set Widget Placement to Embedded" section of "How to create an Embedded Voice AI Chat Widget". This screenshot appears in the "Step 3: Set Widget Placement to Embedded" section of "How to create an Embedded Voice AI Chat Widget". The text alongside this image reads: This ensures the widget will appear within your page layout instead of floating on the screen. Immediately after, the guide continues: Use the available styling options to match the widget to your page design. Image 3 of 10 What this coversThis ensures the widget will appear within your page layout instead of floating on the screen.
Buttons and menus referenced StyleWidget Placementwithin your page layout
Next stepUse the available styling options to match the widget to your page design.
All 2 steps in this procedure
  1. Navigate to the Style tab
  2. Under Widget Placement, choose: Embedded / Inline (Renders inside content)

Step 4: Customize Your Widget

Use the available styling options to match the widget to your page design.

For embedded Voice AI widgets, configure the following options:

1. Under Widget placement, choose how the Voice AI widget appears on your website:

  • Sticky: Keeps the widget fixed in a page corner.
  • Embedded/Inline: Renders the widget inline within your page content.

2. For Embedded/Inline widgets, configure the Display Mode:

  • Avatar: Shows a static visual representation.
  • Visualiser: Shows dynamic voice-based visual cues. When you select Visualiser, choose an Interface Size: Small, Medium or Large
Step 4: Customize Your Widget (image 4 of 10) What this shows Avatar: Shows a static visual representation. What this shows Illustrates the "Step 4: Customize Your Widget" section of "How to create an Embedded Voice AI Chat Widget". This animation appears in the "Step 4: Customize Your Widget" section of "How to create an Embedded Voice AI Chat Widget". The text alongside this image reads: Avatar: Shows a static visual representation. Visualiser: Shows dynamic voice-based visual cues. When you select Visualiser, choose an Interface Size: Small, Medium or Large. Immediately after, the guide continues: 3. In the Chat Window tab, edit the Button Text, this appears below the avatar in the inline layout. Image 4 of 10 What to chooseAvatar: Shows a static visual representation. Visualiser: Shows dynamic voice-based visual cues. When you select Visualiser, choose an Interface Size: Small, Medium or Large
Buttons and menus referenced Additional Options
Next step3. In the Chat Window tab, edit the Button Text, this appears below the avatar in the inline layout.
All 2 steps in this procedure
  1. Sticky: Keeps the widget fixed in a page corner.
  2. Embedded/Inline: Renders the widget inline within your page content.

3. In the Chat Window tab, edit the Button Text, this appears below the avatar in the inline layout.

  • Example: Change “Call us here” to “Talk to our AI” or “Ask a Question.”

Optionally, open Additional Options to adjust branding elements like the business name or compliance footer. The preview on the right updates in real time to show your embedded widget design.

Click here for more information on customizing chat widgets.

Step 4: Customize Your Widget (image 5 of 10) What this shows Click here for more information on customizing chat widgets. What this shows Illustrates the "Step 4: Customize Your Widget" section of "How to create an Embedded Voice AI Chat Widget". This screenshot appears in the "Step 4: Customize Your Widget" section of "How to create an Embedded Voice AI Chat Widget". The text alongside this image reads: Click here for more information on customizing chat widgets. Immediately after, the guide continues: Once your widget looks good, click the Get Code button in the top right corner. A pop-up window will appear with your unique Embed Code Snippet. Click Copy to save it to your clipboard. Image 5 of 10 What to clickClick here for more information on customizing chat widgets.
Buttons and menus referenced Additional Options
Next stepOnce your widget looks good, click the Get Code button in the top right corner. A pop-up window will appear with your unique Embed Code Snippet. Click Copy to save it to your clipboard.
All 2 steps in this procedure
  1. Sticky: Keeps the widget fixed in a page corner.
  2. Embedded/Inline: Renders the widget inline within your page content.

Step 5: Generate the Embed Code

Once your widget looks good, click the Get Code button in the top right corner. A pop-up window will appear with your unique Embed Code Snippet. Click Copy to save it to your clipboard.

Step 5: Generate the Embed Code (image 6 of 10) What this shows Once your widget looks good, click the Get Code button in the top right corner. What this shows Illustrates the "Step 5: Generate the Embed Code" section of "How to create an Embedded Voice AI Chat Widget". This screenshot appears in the "Step 5: Generate the Embed Code" section of "How to create an Embedded Voice AI Chat Widget". The text alongside this image reads: Once your widget looks good, click the Get Code button in the top right corner. A pop-up window will appear with your unique Embed Code Snippet. Click Copy to save it to your clipboard. Immediately after, the guide continues: You can place the widget anywhere on your site or funnel using a Code Block element. Image 6 of 10 How to confirmOnce your widget looks good, click the Get Code button in the top right corner. A pop-up window will appear with your unique Embed Code Snippet. Click Copy to save it to your clipboard.
Buttons and menus referenced Get CodeCopy
Next stepYou can place the widget anywhere on your site or funnel using a Code Block element.

Step 6: Embed the Widget on Your Website or Funnel

You can place the widget anywhere on your site or funnel using a Code Block element.

To embed in a Funnel:

  1. Go to Sites > Funnels and open the funnel page where you want to add the widget.
  2. Click Edit Page.
  3. On the left sidebar, search for “Code” under Quick Add > Custom and drag the Code Element onto your page.
    Step 3 of 4: On the left sidebar, search for “ Code ” under Quick Add > Custom and… What this shows Step 3 of 4: On the left sidebar, search for “ Code ” under Quick Add > Custom and drag the Code Element onto your page. What this shows Shows where to go for step 3 of 4 in the "Step 6: Embed the Widget on Your Website or Funnel" section of "How to create an Embedded Voice AI Chat Widget". This screenshot accompanies step 3 of 4 in the "Step 6: Embed the Widget on Your Website or Funnel" section of "How to create an Embedded Voice AI Chat Widget". At this point in the walkthrough you on the left sidebar, search for “ Code ” under Quick Add > Custom and drag the Code Element onto your page. The navigation path used here is Quick Add > Custom. The next step is to click Open Code Editor. Step 3 of 4Path: Quick Add > CustomImage 7 of 10 Where to goOn the left sidebar, search for “ Code ” under Quick Add > Custom and drag the Code Element onto your page.
    Buttons and menus referenced CodeQuickAddCustomSitesFunnelsEditPageOpenEditorSavePublish
    Next stepClick Open Code Editor.
    All 4 steps in this procedure
    1. Go to Sites > Funnels and open the funnel page where you want to add the widget.
    2. Click Edit Page.
    3. On the left sidebar, search for “ Code ” under Quick Add > Custom and drag the Code Element onto your page. this image
    4. Click Open Code Editor.
  4. Click Open Code Editor.
    Step 4 of 4: Click Open Code Editor What this shows Step 4 of 4: Click Open Code Editor. What this shows Shows what to click for step 4 of 4 in the "Step 6: Embed the Widget on Your Website or Funnel" section of "How to create an Embedded Voice AI Chat Widget". This screenshot accompanies step 4 of 4 in the "Step 6: Embed the Widget on Your Website or Funnel" section of "How to create an Embedded Voice AI Chat Widget". At this point in the walkthrough you click Open Code Editor. For context, this section explains: You can place the widget anywhere on your site or funnel using a Code Block element. The navigation path used here is Sites > Funnels. Step 4 of 4Path: Sites > FunnelsImage 8 of 10 What to clickClick Open Code Editor.
    Buttons and menus referenced OpenCodeEditorSitesFunnelsEditPageQuickAddCustomSavePublish
    All 4 steps in this procedure
    1. Go to Sites > Funnels and open the funnel page where you want to add the widget.
    2. Click Edit Page.
    3. On the left sidebar, search for “ Code ” under Quick Add > Custom and drag the Code Element onto your page.
    4. Click Open Code Editor. this image
  1. Paste the Embed Code you copied from the Chat Widget Builder.
    Step 1 of 2: Paste the Embed Code you copied from the Chat Widget Builder What this shows Step 1 of 2: Paste the Embed Code you copied from the Chat Widget Builder. What this shows Shows what to copy for step 1 of 2 in the "Step 6: Embed the Widget on Your Website or Funnel" section of "How to create an Embedded Voice AI Chat Widget". This screenshot accompanies step 1 of 2 in the "Step 6: Embed the Widget on Your Website or Funnel" section of "How to create an Embedded Voice AI Chat Widget". At this point in the walkthrough you paste the Embed Code you copied from the Chat Widget Builder. The next step is to click Save, then Publish your page. Step 1 of 2Image 9 of 10 What to copyPaste the Embed Code you copied from the Chat Widget Builder.
    Buttons and menus referenced SitesFunnelsEditPageCodeQuickAddCustomOpenEditorSavePublish
    Next stepClick Save, then Publish your page.
    All 2 steps in this procedure
    1. Paste the Embed Code you copied from the Chat Widget Builder. this image
    2. Click Save, then Publish your page.
  2. Click Save, then Publish your page.
    Step 2 of 2: Click Save, then Publish your page What this shows Step 2 of 2: Click Save, then Publish your page. What this shows Shows how to confirm for step 2 of 2 in the "Step 6: Embed the Widget on Your Website or Funnel" section of "How to create an Embedded Voice AI Chat Widget". This screenshot accompanies step 2 of 2 in the "Step 6: Embed the Widget on Your Website or Funnel" section of "How to create an Embedded Voice AI Chat Widget". At this point in the walkthrough you click Save, then Publish your page. For context, this section explains: You can place the widget anywhere on your site or funnel using a Code Block element. Step 2 of 2Image 10 of 10 How to confirmClick Save, then Publish your page.
    Buttons and menus referenced SavePublishSitesFunnelsEditPageCodeQuickAddCustomOpenEditor
    All 2 steps in this procedure
    1. Paste the Embed Code you copied from the Chat Widget Builder.
    2. Click Save, then Publish your page. this image

Once published, the Voice AI widget will appear embedded inline just like any other content block.

Important Behavior Notes

  • The embedded widget is fully mobile-responsive, it resizes automatically on smaller screens.
  • Some customization options are disabled in Embedded/Inline mode because they only apply to floating widgets. Examples include widget position and contact form toggle settings.
  • Display Mode options are currently optimized for Voice AI experiences.
  • You can have multiple embedded widgets on the same site or funnel, all linked to the same Voice AI agent.
  • You can even use a mix of embedded and sticky widgets across different sections for maximum engagement.

Best Practices

A well-placed widget can support conversions without interrupting the page experience. The goal is to make chat feel helpful and timely, not distracting.

  • Place the widget near high-intent content such as forms, offers, booking areas, or support prompts.

  • Match the widget branding to the page for a more seamless appearance.

  • Test spacing and alignment so the widget does not look cramped inside narrow sections.

  • Review mobile layout after publishing to confirm readability and spacing.

  • Keep intro and acknowledgment messages clear and action-oriented.

Frequently Asked Questions

Q: Where should I place the embedded widget on my page?
Good placement options include hero sections, offer sections, lead capture areas, service pages, and other high-intent areas where visitors are likely to engage.

Q: Why did some customization settings disappear after selecting Embedded/Inline?
Some controls are automatically hidden because they only apply to floating widgets. In Embedded/Inline mode, GHL Customer Care shows only the settings that are relevant to inline placement.

Q: Can I use the Embedded/Inline placement for Live Chat widgets as well?
Yes, embedded/inline support is available for Live Chat. For more information, click here.

Q: Which Chat Widget types support Embedded / Inline placement?

Embedded / Inline placement is available for All-in-One Chat, Email/SMS, WhatsApp, Facebook, Instagram, Live Chat, and Voice AI.

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