# How to Create an Embedded Live Chat Widget > Learn how to create an Embedded Live Chat Widget in GHL Customer Care, customize inline placement, add the embed code, and improve on-page engagement. - Source: https://docs.ghlcustomercare.com/docs/sites/chat-widget/how-to-create-an-embedded-live-chat-widget - Section: Sites / Chat Widget - Reading time: 4 min - Images: 6, each explained below --- Add Live Chat directly inside your website or funnel content instead of using only a floating chat bubble. The Embedded Live Chat Widget helps you place conversations where visitors are most likely to take action. --- **TABLE OF CONTENTS** - [What is the Embedded Live Chat Widget?](#what-is-the-embedded-live-chat-widget) - [Key Benefits of the Embedded Live Chat Widget](#key-benefits-of-the-embedded-live-chat-widget) - [Where Embedded Live Chat Works Best](#where-embedded-live-chat-works-best) - [How To Setup an Embedded Live Chat Widget](#how-to-setup-an-embedded-live-chat-widget) - [How It Works](#how-it-works) - [Common Use Cases for Embedded Live Chat](#common-use-cases-for-embedded-live-chat) - [Best Practices](#best-practices) - [Important Behavior Notes](#important-behavior-notes) - [Troubleshooting Embedded Live Chat](#troubleshooting-embedded-live-chat) - [Frequently Asked Questions](#frequently-asked-questions) --- # **What is the Embedded Live Chat Widget?** Embedded Live Chat Widget is a Live Chat placement option that renders the chat widget inline within your page content instead of floating on the corner of the screen. This makes chat feel like part of the page design, which can help businesses place support and conversion opportunities exactly where visitors are making decisions. The widget still connects to the same Live Chat experience, so placement changes the presentation of the widget, not how conversations are routed or managed. --- ## **Key Benefits of the Embedded Live Chat Widget** - **Higher Visibility:** Place chat near hero sections, forms, pricing blocks, or CTAs where visitors are already engaged. - **Natural Page Experience:** Present chat as part of the website layout instead of an overlay floating above the content. - **No Workflow Changes:** Routing, lead capture, and Live Chat management continue to work through the existing chat system. - **Flexible Deployment:** Use the widget across funnels, websites, landing pages, and other supported areas. --- ## **Where Embedded Live Chat Works Best** Embedded Live 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 Setup an Embedded Live Chat Widget** Proper setup ensures the widget appears exactly where you want it and behaves consistently across your website or funnel. The key difference in this setup is not the Live Chat feature itself, but where the widget is rendered on the page. #### **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 6)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155069624862/original/7JDG1uw1cw-3e96X-Ru7sTbty29v8EQNRA.png) **Step 1: Create a New Chat Widget (image 1 of 6)** This screenshot appears in the "Step 1: Create a New Chat Widget" section of "How to Create an Embedded Live 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: Navigate to the Style tab Under Widget Placement, choose: Embedded / Inline (Renders inside content). - Where to go: Go to Sites → Chat Widget then click + New or open an existing widget. - Controls: Sites → Chat Widget, + New - Next: Navigate to the Style tab Under Widget Placement, choose: Embedded / Inline (Renders inside content) #### **Step 2:** Select Live Chat Choose the **Live Chat** option. ![Step 2: Select Live Chat (image 2 of 6)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155069624893/original/86RXNhpWNITzbZCmEBblDBHG_OnWOXbv7A.jpeg) **Step 2: Select Live Chat (image 2 of 6)** This screenshot appears in the "Step 2: Select Live Chat" section of "How to Create an Embedded Live 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: Navigate to the Style tab Under Widget Placement, choose: Embedded / Inline (Renders inside content). - Where to go: Go to Sites → Chat Widget then click + New or open an existing widget. - Controls: Live Chat - 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 6)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155069625188/original/xCXAEY7LTWDwQW12qVMnbDeyDnmDcEECtA.png) **Step 3: Set Widget Placement to Embedded (image 3 of 6)** This screenshot appears in the "Step 3: Set Widget Placement to Embedded" section of "How to Create an Embedded Live 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: You can configure the widget as per your needs. - 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: You can configure the widget as per your needs: Full procedure: 1. Navigate to the Style tab 2. Under Widget Placement, choose: Embedded / Inline (Renders inside content) #### **Step 4:** Customize Your Widget You can configure the widget as per your needs: 1. Theme & Appearance - Choose color themes - Adjust branding (avatar, header, colors) - Match widget styling with your website 2. Chat Window Settings - Edit **intro message** - Configure **contact form fields** (Name, Phone, etc.) - Set mandatory fields - Customize button text 3. Messaging & Behavior - Set auto-responses - Configure live chat assignment - Define business hours - Customize chat closed messages ![Step 4: Customize Your Widget (image 4 of 6)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155069625383/original/WmZdl2ZsgcbRbquDm-74mTLpXa9eOlPM5w.png) **Step 4: Customize Your Widget (image 4 of 6)** This screenshot appears in the "Step 4: Customize Your Widget" section of "How to Create an Embedded Live Chat Widget". The text alongside this image reads: Theme & Appearance Chat Window Settings Messaging & Behavior. This part of the guide covers 10 fields, listed below. Immediately after, the guide continues: Click on Get Code (top right) Copy the embed script. - What this covers: Theme & Appearance Chat Window Settings Messaging & Behavior - Fields: Theme & Appearance, Adjust branding (avatar, header, colors), Match widget styling with your website, Chat Window Settings, Configure contact form fields (Name, Phone, etc.), Customize button text, Messaging & Behavior, Configure live chat assignment, Define business hours, Customize chat closed messages - Controls: intro message, contact form fields - Next: Click on Get Code (top right) Copy the embed script Example values (illustrative, not read from the screenshot): - Match widget styling with your website: https://northgatedental.com Full procedure: 1. Theme & Appearance 2. Chat Window Settings 3. Messaging & Behavior #### **Step 5:** Get the Embed Code 1. Click on **Get Code** (top right) 2. Copy the **embed script** ![Step 5: Get the Embed Code (image 5 of 6)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155068321041/original/36lyRPWw9yD44_KFYXxkIIAsMuzh4cmDrg.png) **Step 5: Get the Embed Code (image 5 of 6)** This screenshot appears in the "Step 5: Get the Embed Code" section of "How to Create an Embedded Live Chat Widget". The text alongside this image reads: Click on Get Code (top right) Copy the embed script. Immediately after, the guide continues: Open your Funnel Builder Add a Custom Code element where you want the chat to appear Paste the embed code Save and publish. - What to copy: Click on Get Code (top right) Copy the embed script - Controls: Get Code, embed script - Next: Open your Funnel Builder Add a Custom Code element where you want the chat to appear Paste the embed code Save and publish Full procedure: 1. Click on Get Code (top right) 2. Copy the embed script #### **Step 6:** Add the Widget to Your Funnel, Website or any other digital property **Option 1: Funnels** 1. Open your **Funnel Builder** 2. Add a **Custom Code element** where you want the chat to appear 3. Paste the embed code 4. Save and publish **Option 2: Websites / External Pages** 1. Open your website editor or HTML file 2. Paste the embed code in the desired section 3. Publish changes The widget will render **exactly where the code is placed** ![Step 6: Add the Widget to Your Funnel, Website or any other digital property (image 6 of 6)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155068321090/original/8KqrBesKmkvtG540ZYudLdjZa6F9PHvFiQ.png) **Step 6: Add the Widget to Your Funnel, Website or any other digital property (image 6 of 6)** This screenshot appears in the "Step 6: Add the Widget to Your Funnel, Website or any other digital property" section of "How to Create an Embedded Live Chat Widget". The text alongside this image reads: The widget will render exactly where the code is placed. Immediately after, the guide continues: The widget loads inline within the page content. Chat behaves the same as standard live chat (routing, automation, etc.). - What this covers: The widget will render exactly where the code is placed - Controls: Option 1: Funnels, Funnel Builder, Custom Code element, Option 2: Websites / External Pages, exactly where the code is placed - Next: The widget loads inline within the page content. Chat behaves the same as standard live chat (routing, automation, etc.) Full procedure: 1. Open your Funnel Builder 2. Add a Custom Code element where you want the chat to appear 3. Paste the embed code 4. Save and publish --- ## **How It Works** The widget loads **inline within the page content.**  Chat behaves the same as standard live chat (routing, automation, etc.) Users can: - Start a conversation - Submit contact details - Continue chat in real-time --- ## **Common Use Cases for Embedded Live Chat** Embedded placement is especially effective when chat needs to support a specific action or reduce hesitation before a visitor moves forward. These use cases help frame the widget as part of the page strategy instead of just another design element. Common use cases include: - Capturing questions before form submissions - Supporting visitors during pricing comparisons - Offering help on booking or consultation pages - Answering objections during funnel steps - Creating a more guided support experience on service pages - Adding a visible conversation option inside dedicated contact sections --- ## **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. --- ## **Important Behavior Notes** - Embedded widgets **do not float** on the page - You can still use **sticky widgets on other pages** - No changes to chat routing, automations or CRM data capture - When you switch between **Sticky** and **Embedded Live Chat** while using **custom widget dimensions**, the dimensions reset to the recommended defaults for the newly selected placement. --- ## **Troubleshooting Embedded Live Chat** - **Widget not showing:** Ensure embed code is correctly placed and check if the page is published. - **Layout issues:** Verify container width in your page builder and ensure no CSS conflicts - **Chat not responding:** Check live chat assignment settings and verify business hours configuration --- ## **Frequently Asked Questions** **Q: Can I use both embedded and sticky widgets?** Yes, you can use embedded widgets on some pages and sticky widgets on others. **Q: Does this affect chat performance?** No, chat functionality remains the same. **Q: Can I embed multiple widgets on one page?** Not recommended — may cause UX and tracking conflicts. --- ## **Related Articles** - [Getting Started with Chat Widget](https://docs.ghlcustomercare.com/docs/sites/chat-widget/getting-started-with-chat-widget) - [Getting Started - Setup Live Chat Widget](https://docs.ghlcustomercare.com/docs/getting-started-w-ghl-customer-care/sales-and-conversations/getting-started-set-up-a-live-chat-widget) - [Overview of Chat Widget Customizations](https://docs.ghlcustomercare.com/docs/sites/chat-widget/overview-of-chat-widget-customizations) - [How to Use the All-in-One Chat Widget](https://docs.ghlcustomercare.com/docs/sites/chat-widget/how-to-use-the-all-in-one-chat-widget) --- Documentation for GHL Customer Care. Support: support@ghlcustomercare.com