Set Up the Live Chat Widget

This guide walks you through creating, customizing, and installing a Live Chat Widget on your website so you can engage with visitors in real time.

Prerequisites

Before starting, make sure you have:

• Admin access to your sub-account
• Access to your website’s code or CMS (WordPress, Squarespace, etc.)
• The ability to edit your site’s tracking code or footer section
• A clear brand identity (logo, colors, greeting message)

Create Your Live Chat Widget

Start by building your chat widget with the visual customization tool.

• Navigate to Sites in the left sidebar
• Click Chat Widget
• Click the New button in the top-right corner
• Select Live Chat from the chat type options (other options include All-in-One Chat, SMS/Email Chat, WhatsApp, Facebook, Instagram, and Voice AI)
• You will be taken to the widget customization screen

Customize the Widget Appearance

Configure the visual style to match your brand.

Style Tab:

• Click the Style tab if not already selected
• Select your Primary Color for the chat bubble and header
• Choose a Widget Icon from the preset library or upload a custom icon
• Write your Welcome Message that appears before visitors open the chat (e.g., “Hi there! Need help? Chat with us.”)
• Upload an Avatar Image (your logo or agent photo) for the chat header
• Set the Widget Placement to bottom-left or bottom-right
• Adjust the Widget Size to fit your page layout

Chat Window Tab:

• Click the Chat Window tab
• Set the Title for the chat header (e.g., “Chat with our team”)
• Write your Intro Message that greets visitors when they open the chat (e.g., “Welcome! How can we help you today?”)
• Configure which Contact Form Fields visitors must fill out before starting a conversation (name, email, phone, custom fields)
• Optionally add your Brand URL for visibility
• Add Consent Checkboxes for terms of service or privacy policy if needed

Messaging Tab:

• Click the Messaging tab
• Write an Acknowledgement Message that auto-replies after the visitor sends their first message (e.g., “Thanks for your message. An agent will respond shortly.”)
• Set the Language for system-generated messages
• Customize Message Icons if desired

Once customization is complete, click Save.

Copy the Widget Embed Code

Now that your widget is configured, get the embed code to install it on your website.

• After saving, click Get Code on the widget configuration screen
• A popup will display your unique embed code
• Click Copy to copy the code snippet to your clipboard

Keep this code handy for the next step.

Install the Widget on Your Website

There are two installation methods. Choose the one that fits your setup.

Method 1: Embed Code (Any Website):

For sites built inside the platform:

• Navigate to Sites > Websites or Funnels
• Open the page you want to edit
• Click the Tracking Code icon (</> button) in the editor toolbar
• Paste the copied chat widget code into the Footer or Body section
• Click Save

For external websites (WordPress, Squarespace, Wix, etc.):

• Log in to your website’s CMS or admin panel
• Navigate to the theme settings or custom code section
• Paste the embed code just before the closing </body> tag
• Save and publish your changes

For WordPress specifically, you can install the LeadConnector Plugin to handle widget deployment without editing code.

Method 2: Settings-Based Deploy (Platform Sites Only):

• Navigate to Sites > Websites or Funnels
• Open the settings for your desired website or funnel
• Find the Chat Widget section in the settings
• Select your live chat widget from the dropdown
• Click Save

The platform automatically injects the widget code on all pages of that site or funnel.

Configure Chat Assignment Workflow

Set up automated routing so incoming chats are assigned to the right team members.

• Navigate to Automations > Workflows
• Click + New Workflow
• Add a trigger and select Customer Replied or New Chat Message
• Under trigger filters, set Channel to Live Chat
• Add a second filter to specify your Chat Widget name
• Add an action below the trigger and choose Assign to User
• Select the team member who should receive chats from this widget
• Click Save
• Toggle the workflow from Draft to Publish

All live chats from this widget will now automatically route to the assigned user.

Configure Inactivity and Fallback Settings

Set up safety nets for when agents are unavailable.

• Navigate to Sites > Chat Widget
• Click the Edit icon on your live chat widget
• Scroll to the Fallback Inactivity Time setting
• Set the number of minutes before the fallback message triggers (e.g., 5 minutes)
• Write a Fallback Inactivity Message that prompts the visitor to leave their name, email, and phone number
• Set the Chat Timeout duration for visitor inactivity (e.g., 10 minutes)
• Write a Chat Timeout Message that notifies the visitor the chat has been closed due to inactivity
• Click Save

Test Your Setup

Verify that the live chat widget is working correctly.

Test Widget Visibility:

• Open your website in an incognito or private browser window
• Verify the chat widget appears in the bottom-left or bottom-right corner
• Verify the welcome message displays correctly
• Test on mobile devices to ensure proper placement

Test Chat Functionality:

• Click the chat widget to open the chat window
• Fill out the contact form fields and submit
• Send a test message
• Navigate to Conversations in your sub-account
• Verify the test message appears in your inbox with a live chat icon
• Reply to the test message from Conversations
• Confirm the reply appears in the chat widget on your website

Test Assignment Workflow:

• Send another test message from your website
• Check that the conversation is automatically assigned to the correct team member
• Verify the team member receives a notification (if notifications are enabled)

Next Steps

Now that your live chat widget is live, explore these related features:

• Enable Conversation AI to handle initial visitor interactions automatically
• Set up Round-Robin distribution for multi-agent teams
• Create multiple widgets for different pages or use cases
• Build automated workflows with the Workflow Builder
• Review the complete Live Chat Widget Guide for advanced strategies