# 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. - Source: https://docs.ghlcustomercare.com/docs/sites/chat-widget/how-to-create-an-embedded-voice-ai-chat-widget - Section: Sites / Chat Widget - Reading time: 5 min - Images: 10, each explained below - Modified on Tue, 11 Aug at 5:09 AM --- 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?](#what-is-the-embedded-voice-ai-widget) - [Key Benefits of Embedded Voice AI Chat Widgets](#key-benefits-of-embedded-voice-ai-chat-widgets) - [Where Embedded Voice AI Chat Works Best](#where-embedded-voice-ai-chat-works-best) - [How to Create an Embedded Voice AI Chat Widget](#how-to-create-an-embedded-voice-ai-chat-widget) - [Important Behavior Notes](#important-behavior-notes) - [Best Practices](#best-practices) - [Frequently Asked Questions](#frequently-asked-questions) - [Related Articles](#related-articles) --- # **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)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155069727496/original/9bw1eW0iksbWHLRoSKoBswB3hp0xJ826tA.png) **Step 1: Create a New Chat Widget (image 1 of 10)** 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. - Where to go: Go to Sites → Chat Widget then click + New or open an existing widget. - Controls: Sites → Chat Widget, + New - Next: Choose 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)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155069727655/original/qXH-6HMXpq7qBhhDIuOeaqC1wHFeQWdTZQ.png) **Step 2: Select Voice AI Chat (image 2 of 10)** 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). - What to choose: Choose the Voice AI chatoption. - Controls: Voice AI - Next: Navigate 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)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155069727741/original/dj154NLfaKUa1PpzcyWzC93kWDQtWUakPQ.png) **Step 3: Set Widget Placement to Embedded (image 3 of 10)** 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. - What this covers: This ensures the widget will appear within your page layout instead of floating on the screen. - Controls: Style, Widget Placement, within your page layout - Next: Use the available styling options to match the widget to your page design. Full 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)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155073729673/original/fQIvJqTTLwP5jMpWgi3CcgP0Ik1btvj9kw.gif) **Step 4: Customize Your Widget (image 4 of 10)** 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. - What to choose: 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 - Controls: Additional Options - Next: 3. In the Chat Window tab, edit the Button Text, this appears below the avatar in the inline layout. Full 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.](https://docs.ghlcustomercare.com/docs/sites/chat-widget/overview-of-chat-widget-customizations) ![Step 4: Customize Your Widget (image 5 of 10)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155073729682/original/QiZHVS1JXICxmOh_YgywBlIgO1QqePWucg.png) **Step 4: Customize Your Widget (image 5 of 10)** 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. - What to click: Click here for more information on customizing chat widgets. - Controls: Additional Options - Next: 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. Full 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)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155057818713/original/G_qn00fF8x7AfFOKqFHJOrz-YSSQH_AIEw.png) **Step 5: Generate the Embed Code (image 6 of 10)** 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. - How to confirm: 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. - Controls: Get Code, Copy - Next: You 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…](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155057818772/original/sNKOu6GEeWooDycr2qTZDfJw3YQozJHCyw.png) **Step 3 of 4: On the left sidebar, search for “ Code ” under Quick Add > Custom and…** 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. - Path: Quick Add > Custom - Where to go: On the left sidebar, search for “ Code ” under Quick Add > Custom and drag the Code Element onto your page. - Controls: Code, Quick, Add, Custom, Sites, Funnels, Edit, Page, Open, Editor, Save, Publish - Next: Click Open Code Editor. Full 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](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155057818893/original/kr_T4sKxXSt9dgrUjDi9a4BaHUDnT4_j0w.png) **Step 4 of 4: Click Open Code Editor** 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. - Path: Sites > Funnels - What to click: Click Open Code Editor. - Controls: Open, Code, Editor, Sites, Funnels, Edit, Page, Quick, Add, Custom, Save, Publish Full 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 5. 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](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155057818964/original/9ZvyZF_rvhmfWvpc282yCc28pFdaQ7NzXg.png) **Step 1 of 2: Paste the Embed Code you copied from the Chat Widget Builder** 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. - What to copy: Paste the Embed Code you copied from the Chat Widget Builder. - Controls: Sites, Funnels, Edit, Page, Code, Quick, Add, Custom, Open, Editor, Save, Publish - Next: Click Save, then Publish your page. Full procedure: 1. Paste the Embed Code you copied from the Chat Widget Builder. <- this image 2. Click Save, then Publish your page. 6. Click **Save**, then **Publish** your page. ![Step 2 of 2: Click Save, then Publish your page](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155057818975/original/Y-Xg-ZENYtVB9JyQ4MCGgctMv8wyNEHKcQ.png) **Step 2 of 2: Click Save, then Publish your page** 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. - How to confirm: Click Save, then Publish your page. - Controls: Save, Publish, Sites, Funnels, Edit, Page, Code, Quick, Add, Custom, Open, Editor Full 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.](https://docs.ghlcustomercare.com/docs/sites/chat-widget/how-to-create-an-embedded-live-chat-widget) **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. --- ## **Related Articles** - **[](https://docs.ghlcustomercare.com/docs/sites/chat-widget/how-to-set-up-and-use-the-voice-ai-chat-widget)**[](https://docs.ghlcustomercare.com/docs/sites/chat-widget/how-to-set-up-and-use-the-voice-ai-chat-widget)[How to set up and use the Voice AI Chat Widget](https://docs.ghlcustomercare.com/docs/sites/chat-widget/how-to-set-up-and-use-the-voice-ai-chat-widget) - [Voice AI Chat Widget](https://docs.ghlcustomercare.com/docs/sites/chat-widget/voice-ai-chat-widget) - [Getting Started with Chat Widget](https://docs.ghlcustomercare.com/docs/sites/chat-widget/getting-started-with-chat-widget) - [Overview of Chat Widget Customizations](https://docs.ghlcustomercare.com/docs/sites/chat-widget/overview-of-chat-widget-customizations) - [Facebook and Instagram Chat Widgets](https://docs.ghlcustomercare.com/docs/sites/chat-widget/facebook-and-instagram-chat-widgets) --- Documentation for GHL Customer Care. Support: support@ghlcustomercare.com