Live chat lets website visitors message your business in real time, with AI Chat agents handling conversations and logging details in Distance.
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
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.
Copy the embed code and paste it inside the tag of your website’s HTML. For best results, place it just before the closing tag.
Save your website updates and refresh the page to confirm the chat widget appears.
A Shadow DOM has been added to encapsulate the widget’s styles and prevent external interference.
Optional parameters
isOpenByDefault (boolean): Whether the widget should open automatically on page load - defaulted to false.
For device-specific behavior use: isOpenByDefaultOnDesktop and isOpenByDefaultOnMobile.
Widget size and display considerations
The live chat widget has predefined dimensions to ensure proper usability:
Minimum height: 550px
Width: 423px
Iframe limitations (for builders like Wix)
If your site uses an iframe, the widget may appear constrained by the iframe size. To avoid layout issues, ensure the iframe width and height are set to 100%.
Using code injection (recommended)
If your website builder supports code injection, this is the preferred method for adding the chat widget.
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 changes.
Code injection helps prevent styling conflicts and ensures the widget loads correctly across pages.
After setup
Once live chat is embedded, incoming conversations are automatically handled by your AI Chat agent and logged in Distance. Tickets are created based on your existing configuration, giving your team full visibility into customer interactions.
Looking for more help? Watch our step-by-step tutorial to easily master setting up your live chat!
