> For the complete documentation index, see [llms.txt](https://distance.gitbook.io/distance/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://distance.gitbook.io/distance/getting-started/automations/live-chat-setup.md).

# Live chat setup

### **Introduction**

With **Live chat** enabled, your team can engage visitors directly on your website in real time. Messages are routed to AI Chat agents, who capture conversation details, provide guided responses, and ensure each interaction is recorded in Distance. This allows your business to respond faster, maintain consistency across conversations, and reduce the need for manual handling.

You can also personalize greetings, scripts, and agent behavior to deliver a more structured and efficient customer experience.

***

### **How to get your Live chat embed code**

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 **Automations**, then navigate to the **Your automations** tab.

<div data-with-frame="true"><figure><img src="/files/895x1qY0fU0lyNsaCeaW" alt=""><figcaption></figcaption></figure></div>

Click **Embed** next to **Live chat** to view the widget embed code.

<div data-with-frame="true"><figure><img src="/files/cRLbZ3C3ytwZmMxYDDrp" alt=""><figcaption></figcaption></figure></div>

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.

<div data-with-frame="true"><figure><img src="/files/fglDxOHR3COnZl33jS8Y" alt=""><figcaption></figcaption></figure></div>

***

### **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, make sure to save your changes and publish your website. Then refresh your site 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:

1. Open your website’s **Code Injection** or **Custom Code** settings.
2. Paste the embed code into the header or footer section.
3. 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%

<div data-with-frame="true"><figure><img src="/files/alNYxNcj01XthOEXq0Vy" alt=""><figcaption></figcaption></figure></div>

* Contact your website provider for layout assistance

If you are unfamiliar with these settings, a web developer may need to adjust them.

***

### **Widget open behavior (optional parameters)**

You can control how the live chat widget appears when a visitor opens your website. By default, the chat widget is set to open automatically based on your embed code configuration.

This means the chat window can either be displayed immediately in an expanded state or shown in a minimized state until the visitor clicks the chat launcher.

To access your embed code, see [**How to get your Live chat embed code**](#how-to-get-your-live-chat-embed-code).

Inside the embed script, you will see this configuration for the widget behavior:

```javascript
isOpenByDefault: true
```

If set to `true`, the chat widget will automatically open when a visitor lands on your website.

If set to `false`, the widget will remain minimized and only open when the visitor clicks the chat button.

***

### **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

<div data-with-frame="true"><figure><img src="/files/4V7PbkpRsbw0zHFlJv33" alt=""><figcaption></figcaption></figure></div>

Your website visitors can now engage with your business directly through live chat.