How to create an embedded live chat widget

Table of contents

1. What is the embedded live chat widget?
2. Key benefits of the embedded live chat widget
3. Where embedded live chat works best
4. How to set up an embedded live chat widget
5. How it works
6. Common use cases for embedded live chat
7. Best practice
8. Important notes on how it works
9. Troubleshooting embedded live chat
10. Frequently asked questions

What is the embedded live chat widget?

Add a live chat directly inside your website or funnel content, instead of relying only on the classic floating icon. The embedded live chat widget helps you place conversations where visitors are most likely to take action.

The embedded live chat widget is a placement option that displays the widget directly within the page content, instead of floating it in a corner of the screen. This makes the chat feel like a natural part of the page design, helping businesses put support and conversion opportunities exactly where visitors make their decisions.

The widget connects to the same live chat experience, so the placement changes the presentation but not the way conversations are handled or routed.

Key benefits of the embedded live chat widget

• Greater visibility: Place the chat next to important sections, forms, pricing blocks or calls to action (CTAs) where visitors are already engaged.
• A natural on-page experience: Present the chat as part of the website layout rather than as an overlay floating on top of the content.
• No changes to your workflows: Routing, lead capture and live chat management keep working through the existing chat system.
• Flexible implementation: Use the widget on 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 automatically adapts to smaller screens while remaining part of the page content.

How to set up an embedded live chat widget

Setting it up correctly 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 displayed on the page.

Step 1: Create a new chat widget

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

Step 2: Select Live Chat

Choose the Live Chat option.

Step 3: Set the widget placement to "Embedded"

1. Go to the Style tab.
2. Under Widget placement, choose: Embedded / Inline (displayed within the content).

This ensures the widget appears inside the page layout instead of floating on the screen.

Step 4: Customise your widget

You can configure the widget to suit your needs:

1. Theme and appearance
   • Choose the colour themes.
   • Adjust the branding (avatar, header, colours).
   • Match the widget style to your website.
2. Chat window settings
   • Edit the introductory message.
   • Configure the contact form fields (Name, Phone and so on).
   • Set the mandatory fields.
   • Customise the button text.
3. Messaging and behaviour
   • Set up automatic replies.
   • Configure live chat assignment.
   • Define your opening hours.
   • Customise the closed-chat messages.

Step 5: Get the embed code

1. Click Get code (top right).
2. Copy the embed script.

Step 6: Add the widget to your funnel, website or other digital property

Option 1: Funnels

1. Open your funnel editor.
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 into the section you want.
3. Publish your changes.

The widget will be displayed exactly where the code is inserted.

How it works

The widget loads inline within the page content. The chat behaves like a standard live chat when it comes to routing, automations and more.

Users can:

• Start a conversation.
• Submit their contact details.
• Continue the chat in real time.

Common use cases for embedded live chat

Embedded placement is particularly effective when the chat needs to support a specific action or reduce hesitation before a visitor moves on. These use cases help frame the widget as part of the page strategy, not just another design element.

Common use cases include:

• Collecting questions before a form is submitted.
• Supporting visitors while they compare prices.
• 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 within dedicated contact sections.

Best practice

A well-placed widget can support conversions without interrupting the on-page experience. The aim is to make the chat useful and timely, not a distraction.

• Place the widget close to high-intent content such as forms, offers, booking areas or support prompts.
• Match the widget branding to the page for a more consistent look.
• Test spacing and alignment so the widget does not look cramped in narrow sections.
• Check the mobile layout after publishing to confirm readability and spacing.
• Keep introductory and confirmation messages clear and action-oriented.

Important notes on how it works

• Embedded widgets do not float on the page.
• You can still use sticky widgets on other pages.
• No changes to chat routing, automations or data capture in the CRM.

Troubleshooting embedded live chat

• The widget is not displayed: Make sure the embed code is placed correctly and check that the page is published.
• Layout problems: Check the container width in your page editor and make sure there are no CSS conflicts.
• The chat does not reply: Check the live chat assignment settings and verify your opening hours configuration.

Frequently asked questions