Live chat setup
Live chat lets website visitors message your business in real time, with AI Chat agents handling conversations and logging details in Distance.
Introduction
With Live chat enabled, your team can engage visitors directly on your website. Messages are routed to AI Chat agents, who capture conversation details, provide guided responses, and ensure each interaction is recorded in Distance. You can personalize greetings, scripts, and agent behavior to deliver a consistent, efficient customer experience.
Why use live chat?
Immediate responses. Visitors get real-time answers without needing to call or email.
Centralized conversations. All messages appear in Distance alongside other channels, giving your team a full view of customer interactions.
Consistent answers. AI agents follow configured scripts and knowledge to provide reliable information.
Improved engagement. Live chat encourages visitors to reach out, increasing the likelihood of conversions and satisfaction.
How to embed live chat on your website
To activate live chat, you must add a small piece of code to your website.
If you are not familiar with editing website code, you may need assistance from a web developer or the person who manages your website.
From your Distance dashboard, go to Channels.
Under Connect channels, locate Live chat.
Click Embed to view the widget embed code.
A small overlay titled “Your live chat is ready” will appear, displaying the complete embed code for your live chat widget. Copy the provided code.
Add the code to your website
You will need access to your website’s backend or editor. Add the copied code to your website’s global header or footer section.
For best results, place it just before the closing </body> tag.
If you are unsure where this is located, contact:
Your website developer
Your IT team
Your website platform’s support team
After adding the code:
Save your changes
Publish your website
Refresh your website to confirm the chat widget appears
Recommended method: Code injection
If your website builder supports Code Injection or Custom Code, this is the preferred method.
To use code injection:
Open your website’s Code Injection or Custom Code settings.
Paste the embed code into the header or footer section.
Save and publish your website.
This method reduces the risk of styling conflicts and ensures the widget loads properly across pages.
If you are unsure whether your platform supports this feature, contact your website provider.
Widget display settings
The live chat widget has preset dimensions to ensure usability:
Minimum height: 550px
Width: 423px
These settings help ensure the chat window displays correctly.
Website builder considerations
Some website builders (such as those that use iframes) may restrict how external widgets display.
If the chat window appears cut off or constrained:
Ensure the container width and height are set to 100%
Contact your website provider for layout assistance
If you are unfamiliar with these settings, a web developer may need to adjust them.
Optional parameters
You can configure whether the chat widget opens automatically:
isOpenByDefault(true/false)isOpenByDefaultOnDesktopisOpenByDefaultOnMobile
If you are unsure how to modify these parameters, consult your developer.
After setup
Once embedded:
Incoming conversations are handled automatically by your AI Chat agent
Messages appear in your Inbox
Tickets are created based on your configuration
Your website visitors can now engage with your business directly through live chat.
Last updated