> ## Documentation Index
> Fetch the complete documentation index at: https://aipro.placetel.de/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Connecting Livechat

> Add an AI chat to your website that answers visitors automatically.

# Connecting Livechat

## Overview

With **Livechat** you add an AI chat directly to your website. Visitors open a chat widget in the corner of the page and get answers from one of your AI assistants - around the clock, with no one needing to watch.

In Placetel you create a **widget**, assign it an assistant, style its appearance, and embed a short script on your website.

## Prerequisites

* A configured **chat assistant** to answer the messages.
* **Access to your website's HTML** so you can add the embed script.

<Info>
  Don't have a chat assistant yet? Create one under **AI Assistants → Overview → Create → Chat assistant**. See [Create and set up AI assistants](/docs/en/agent-setup) for the first steps. Without an assigned assistant, the widget stays inactive.
</Info>

## Creating a widget

<Steps>
  <Step title="Open Livechat">
    Open **Livechat** in the sidebar.
  </Step>

  <Step title="Create a widget">
    Click **Create widget**.
  </Step>

  <Step title="Give it a name">
    Give the widget a name so you can recognize it later (e.g. "Support website").
  </Step>
</Steps>

## Assigning a chat assistant

Select the chat assistant that should answer visitors on your website. The selector shows chat assistants only, not voice assistants. The assignment takes effect immediately.

<Warning>
  The widget is only active once an assistant has been assigned.
</Warning>

## Styling the widget

Adjust the appearance to match your website. A live preview shows your changes instantly.

* **Title** - the heading in the chat window. Set the **First message** under **Basics** in the chat assistant's wizard.
* **Accent color** - the widget's main color.
* **Position** - which corner of the website the widget appears in.
* **Avatar/icon** - the icon that opens the chat.
* **"Powered by" note** - can be shown or hidden.

## Allowed domains

Under **Allowed domains** you enter the domains where the widget may appear, for example `https://www.your-domain.com`. The chat only loads on those domains.

<Note>
  Enter the **exact origin** - including `https://` and the exact subdomain. Add staging or test environments as separate entries if needed.
</Note>

## Embedding the widget

Copy the script from the widget page and paste it immediately before the closing `</body>` tag on every page where the chat should appear.

```html theme={null}
<script
  src="https://app.your-domain/livechat/embed.js"
  data-widget-id="…"
  async>
</script>
```

<Note>
  The script is only needed once per page and is safe to add. Don't change the `data-widget-id` - it links the script to your widget.
</Note>

## Testing

First, test the replies directly in the chat assistant's wizard with **Test chat**. You do not need a widget for that. Then check the embedded widget:

<Steps>
  <Step title="Open the website">
    Open the configured website in a private browser window.
  </Step>

  <Step title="Open the chat">
    Open the chat widget.
  </Step>

  <Step title="Send a test message">
    Send a test message.
  </Step>

  <Step title="Check the reply">
    Confirm that the reply appears and the conversation is visible under **Conversations**.
  </Step>
</Steps>

## FAQ

**Why isn't the widget shown?** Check that an assistant is assigned and that the current domain is entered under **Allowed domains**.

**Can I use one widget on several domains?** Yes. Add each exact domain to the list of allowed domains.

**Can I change the assistant later?** Yes. The change applies to new conversations immediately.

**Where do I find incoming chats?** Under **Conversations**.

**How do I deactivate the chat?** Remove the assistant assignment or delete the embed script from your website.