How to Create an Embedded Live Chat Widget

Overview

The Embedded Live Chat Widget allows you to place your chat experience directly within your website or funnel content, instead of using the traditional floating (sticky) chat bubble.

This helps you:

• Engage visitors at high-intent sections (CTAs, forms, pricing pages)

• Create a seamless, native website experience

• Improve conversion and lead capture rates

TABLE OF CONTENTS

• Overview
• Step 1: Create a Live Chat Widget
• Step 2: Set Widget Placement to Embedded
• Step 3: Customize Your Widget
  • 1. Theme & Appearance
  • 2. Chat Window Settings
  • 3. Messaging & Behavior
• Step 4: Get the Embed Code
• Step 5: Add the Widget to Your Funnel, Website or any other digital property
  • Option 1: Funnels
  • Option 2: Websites / External Pages
• Best Practices for Placement
• How It Works
• Mobile Responsiveness
• Important Notes
• Common Use Cases
• Troubleshooting
  • Widget not showing
  • Layout issues
  • Chat not responding
• FAQs
  • Can I use both embedded and sticky widgets?
  • Does this affect chat performance?
  • Can I embed multiple widgets on one page?

Step 1: Create a Live Chat Widget

1. Go to Sites → Chat Widget

2. Click + New or open an existing widget
   
   
   

3. Select or open a Live Chat Widget.

Step 2: 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: 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: Get the Embed Code

1. Click on Get Code (top right)

2. Copy the embed script

Step 5: 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

Best Practices for Placement

To maximize engagement, place the embedded widget:

• Below hero sections

• Near CTA buttons

• Inside or after forms

• On pricing or offer pages

How It Works

• The widget loads inline within the page content

• Users can:

  • Start a conversation

  • Submit contact details

  • Continue chat in real-time

• Chat behaves the same as standard live chat (routing, automation, etc.)

Mobile Responsiveness

• The embedded widget is fully responsive

• Automatically adapts to:

  • Mobile

  • Tablet

  • Desktop

Important Notes

• Embedded widgets do not float on the page

• You can still use sticky widgets on other pages

• No changes to:

  • Chat routing

  • Automations

  • CRM data capture

Common Use Cases

• Lead capture sections in funnels

• Support sections on websites

• Product or service explanation pages

• Webinar or landing pages

Troubleshooting

Widget not showing

• Ensure embed code is correctly placed

• Check if the page is published

Layout issues

• Verify container width in your page builder

• Ensure no CSS conflicts

Chat not responding

• Check live chat assignment settings

• Verify business hours configuration

FAQs

Can I use both embedded and sticky widgets?

Yes, you can use embedded widgets on some pages and sticky widgets on others.

Does this affect chat performance?

No, chat functionality remains the same.

Can I embed multiple widgets on one page?

Not recommended — may cause UX and tracking conflicts.