Skip to content
Sites

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.

4 min read974 words6 explained images
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 the Embedded Live Chat Widget
  2. Where Embedded Live Chat Works Best
  3. How To Setup an Embedded Live Chat Widget
  4. How It Works
  5. Common Use Cases for Embedded Live Chat
  6. Best Practices
  7. Important Behavior Notes
  8. Troubleshooting Embedded Live Chat
  9. Frequently Asked Questions
  10. Related Articles

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?

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) 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 Live Chat Widget". 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). Image 1 of 6 Where to goGo to Sites → Chat Widget then click + New or open an existing widget.
Buttons and menus referenced Sites → Chat Widget+ New
Next stepNavigate 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) What this shows Go to Sites → Chat Widget then click + New or open an existing widget. What this shows Illustrates the "Step 2: Select Live Chat" section of "How to Create an Embedded Live Chat Widget". 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). Image 2 of 6 Where to goGo to Sites → Chat Widget then click + New or open an existing widget.
Buttons and menus referenced Live Chat
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 6) 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 Live Chat Widget". 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. Image 3 of 6 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 stepYou can configure the widget as per your needs:
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

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) What this shows Theme & Appearance Chat Window Settings Messaging & Behavior What this shows Illustrates the "Step 4: Customize Your Widget" section of "How to Create an Embedded Live Chat Widget". 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. Image 4 of 6 What this coversTheme & Appearance Chat Window Settings Messaging & Behavior
Fields in this part of the guide Theme & AppearanceAdjust branding (avatar, header, colors)Match widget styling with your websiteChat Window SettingsConfigure contact form fields (Name, Phone, etc.)Customize button textMessaging & BehaviorConfigure live chat assignmentDefine business hoursCustomize chat closed messages
Buttons and menus referenced intro messagecontact form fields
Next stepClick on Get Code (top right) Copy the embed script
Example values
Match widget styling with your website
https://northgatedental.com

Illustrative values showing the expected format. They are not read from the screenshot.

All 3 steps in this 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) What this shows Click on Get Code (top right) Copy the embed script What this shows Illustrates the "Step 5: Get the Embed Code" section of "How to Create an Embedded Live Chat Widget". 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. Image 5 of 6 What to copyClick on Get Code (top right) Copy the embed script
Buttons and menus referenced Get Codeembed script
Next stepOpen your Funnel Builder Add a Custom Code element where you want the chat to appear Paste the embed code Save and publish
All 2 steps in this 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) What this shows The widget will render exactly where the code is placed What this shows Illustrates 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". 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.). Image 6 of 6 What this coversThe widget will render exactly where the code is placed
Buttons and menus referenced Option 1: FunnelsFunnel BuilderCustom Code elementOption 2: Websites / External Pagesexactly where the code is placed
Next stepThe widget loads inline within the page content. Chat behaves the same as standard live chat (routing, automation, etc.)
All 4 steps in this 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.

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