SourCherry Help Centre
HomeSitesChat Widget

How to Create an Embedded Live Chat Widget

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



Where Embedded Live Chat Works Best


Embedded Live Chat can be used on:


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 2: Select Live Chat


Choose the Live Chat option.




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


  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



How It Works


The widget loads inline within the page content.  Chat behaves the same as standard live chat (routing, automation, etc.)


Users can:


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:



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.



Important Behavior Notes



Troubleshooting Embedded Live Chat



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