Create a Live Chat Widget
Access the Chat Widget Setup
Go to Sites > Chat Widget in your account.
Click + New to create a new widget.
Select Live Chat as the Chat Type
When prompted to select a chat type, choose Live Chat.
This enables real-time website messaging handled by your team or AI.
Customize the Widget Appearance
Open Widget Customization
The Widget tab controls how the chat bubble and window appear on your website.
Enable or Disable the Chat Prompt
Toggle Chat Prompt to show a proactive message bubble.
If disabled, only the chat icon is shown.
Upload an Avatar Image
Expand Widget Customization.
Enable Allow Avatar Image.
Upload an image (recommended: 300 × 300 px, under 300 KB).
Add alt text for accessibility.
Customize Colors, Theme, and Typography
Choose a preset Theme or select Custom Color Options.
Configure:
Chat bubble color
Background color
Header and button colors
Visitor and agent message colors
Select a font family under Typography.
Configure Welcome and Return Visitor Messages
Set a Welcome Message for new visitors.
Enable Return Visitor Custom Greetings to personalize repeat visits.
Configure Acknowledgement and Feedback Messages
Customize Chat End and Feedback Messages
Go to the Messaging tab.
Expand Acknowledgement.
Customize:
Acknowledgement message
Feedback prompt
Feedback submission note
Chat ended message
Choose an acknowledgement icon and placeholder color.
Set Business Office Hours
Enable Business Office Hours
Open the Chat Window tab.
Enable Business Office Hours.
Define Availability by Day
Set specific time ranges for each day of the week.
Copy hours across days if needed.
Set Outside Office Hours Message
Customize the message visitors see when your team is offline.
Example: “We are currently offline.”
Automatic Contact Form Behavior
When a visitor starts a chat outside office hours:
A contact form appears automatically.
Visitors can leave their details for follow-up.
Enable Conversational AI for Live Chat
Create or Open a Knowledge Base
Go to AI > Knowledge Base.
Click + Create Knowledge Base.
Enter a name and optional description.
Add Knowledge Sources
Inside the knowledge base, click + Add Source.
Choose a source type:
FAQ
Tables
Rich Text
File Upload
Web Crawler
Assign the Knowledge Base to the Bot
Go to AI > Bots and open your bot.
Open the Bot Training tab.
Select the knowledge base you created.
Enable Live Chat as a Bot Channel
In bot settings, ensure Live Chat is selected as a supported channel.
Save your changes.
Test the Bot Before Going Live
Use the Test Your Bot panel to validate responses.
Refine answers before enabling for visitors.
Live Chat in Conversations
Where Live Chat Appears
Live Chat conversations are managed inside Conversations, where you can:
Request visitor contact details
Send messages or files
End chats when resolved
Share Files in Live Chat
Click the paperclip icon to upload files.
Supported:
Images: JPG, JPEG, PNG, HEIC
Documents: PDF
Limits:
Up to 5 files per message
Maximum 20 MB per file
Mobile and Responsive Behavior
Responsive Widget Behavior
The Live Chat widget is fully responsive and supports:
Mobile phones
Tablets
Screen widths as small as 250 px
Mobile Expanded and Collapsed Views
Expanded view: Full chat window
Collapsed view: Chat bubble only
Mobile Phone Example
Tablet Example
FAQ
Can I set different availability hours for each day?
Yes. Business hours can be customized per day, and settings can be copied across days.
What happens when my team is offline?
Visitors see your offline message and are prompted with a contact form to leave their details.
Can I use AI to respond in Live Chat?
Yes. You can enable Conversational AI and train it using a knowledge base.
How do I train the bot?
Create a knowledge base, add sources (FAQs, files, or web pages), and assign it to the bot under Bot Training.
Can bots respond to images sent by visitors?
Yes. When enabled, bots can analyze and respond to images sent in Live Chat.
Can I share files in Live Chat?
Yes. You can send up to 5 files per message (20 MB max each), including images and PDFs.