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

# Add the Live Chat widget to your website

> Create a website chat widget in Bot Setup, paste the snippet on your site, and answer visitors in your Inbox.

Live Chat is a chat bubble you embed on your own website. Visitors type a message, it lands in your Inbox next to WhatsApp and everything else, and it runs your flows, bookings and payments like any other Channel.

<Note>
  Live Chat has no account to connect, so DMLY mints the widget for you. You can start it from **Integrations → Channels** like any other Channel, or from **Bot setup** — both land on the same customizer.
</Note>

## What Live Chat cannot do

Live Chat only reaches someone while they are on your website with the widget open. That rules out several things you can do on WhatsApp:

<Columns cols={2}>
  <Card title="No broadcasts" icon="bullhorn">
    You cannot send a [Broadcast](/broadcasts/overview) on Live Chat. If Live Chat is your active Channel, broadcast creation is blocked — switch to WhatsApp, Messenger, Instagram, Telegram or SMS.
  </Card>

  <Card title="No growth tools" icon="link">
    [Growth tools](/growth/overview) build links and QR codes that open a chat app. There is no such link for a website widget, so Live Chat is excluded.
  </Card>

  <Card title="Inbound is not logged" icon="list-check">
    Visitor messages are never written to [Logs](/troubleshooting/logs) — only the replies you send from the Inbox are. A Logs page with outbound rows and no inbound ones is normal, not a sign the widget is broken.
  </Card>

  <Card title="No comments" icon="comment-slash">
    There is no comments surface — Live Chat is conversations only.
  </Card>
</Columns>

<Tip>
  Treat Live Chat as the front door and WhatsApp as the follow-up. Turn on **Require phone before chat** in the pre-chat form and you can keep the conversation going on WhatsApp after the visitor leaves your site.
</Tip>

## Create the widget

<Steps>
  <Step title="Open Bot setup">
    Go to **Bot setup**. If you have no widget yet you'll see **Add a website Live Chat widget** — select **Set up Live Chat**.
  </Step>

  <Step title="Name it">
    On **New Live Chat widget**, fill in **Widget name** (for example, `Website Chat`). This name is only for you — it shows in your channel selector and the Inbox, never to visitors. Select **Create widget**.
  </Step>

  <Step title="Customize, then install">
    DMLY creates the Channel and opens the customizer. Style it, then copy the install snippet from the **Install** panel.
  </Step>
</Steps>

The widget counts against your plan's Channel limits, the same as a WhatsApp number or a Facebook Page.

## Install the snippet

The **Install** panel shows one line of code:

```html theme={"dark"}
<script src="https://…/loader.js" async></script>
```

Select **Copy snippet**, then paste it just before the closing `</body>` tag on **every page** you want the bubble to appear on. If your site builder has a "footer code" or "custom code" box that applies site-wide, that is the right place — one paste covers the whole site.

You don't need to change the snippet, and you don't need a developer beyond someone who can reach that box. The snippet loads the widget in an isolated frame, so it can't clash with your site's styling.

<Note>
  The snippet is tied to this specific widget. If you delete the widget and create a new one, the old snippet stops working and you must paste the new one.
</Note>

## The pre-chat form

Before a visitor's first message you can ask for their details. All four are **off by default** — turn on the ones you need under **Behavior**:

| Switch                          | Asks the visitor for                       |
| ------------------------------- | ------------------------------------------ |
| **Require name before chat**    | Their name                                 |
| **Require phone before chat**   | A phone number, with a country code picker |
| **Require email before chat**   | An email address                           |
| **Require consent before chat** | A tick on your **Consent text**            |

Whatever you turn on is genuinely required — **Start Conversation** stays disabled until the visitor fills it in, and the email and phone are checked for a sensible format.

What you collect lands on the Contact record: name, phone and email are saved, and DMLY matches the visitor to an existing Contact if the email or phone already belongs to one. If a field on that Contact is already filled, the widget doesn't overwrite it. A ticked consent box is stored on the message record, but it isn't surfaced anywhere — not in the Inbox, not in exports, not through the API — so don't rely on it as retrievable compliance evidence.

If you ask for nothing, visitors chat anonymously and DMLY names the Contact `Website visitor <four characters>` until you learn more about them.

<Tip>
  The country code guesses the visitor's country from their browser, so most people don't have to touch it.
</Tip>

<Note>
  The pre-chat labels ("Name", "Phone number", "Email", "Start Conversation") are English only and can't be translated. The **Consent text** and the **Greeting** are yours to write.
</Note>

The pre-chat screen also shows your **Channels** deep links, so a visitor who'd rather use WhatsApp can jump straight there instead of typing on your site.

## Style the widget

The customizer has a live preview that renders the real widget, so what you see is what visitors get. Use the **Open** / **Launcher** toggle to check both states.

<Accordion title="Design">
  **Classic** opens straight into the conversation. **Home** shows a landing screen with your channels first. Pick Home if you want visitors nudged toward WhatsApp; pick Classic if you want them talking to you now.
</Accordion>

<Accordion title="Brand">
  **Accent** is your colour — five swatches or your own hex code. DMLY works out the text colour on top of it for you. **Agent name** and **Greeting** are what the visitor reads first.
</Accordion>

<Accordion title="Layout">
  **Header** (Gradient or Solid), **Channels** (Buttons or Icons), **Dock side** (Right or Left), and whether the **Greeting teaser** shows.
</Accordion>

<Accordion title="Channels">
  Your Messenger, WhatsApp, Instagram and Telegram deep links, shown under **Chat with us on your favorite app**.
</Accordion>

The accent colour is the only part of the palette you control. Everything else — the typefaces, the warm neutral background, the bubble colours — is a fixed DMLY design, so widgets are consistent and legible everywhere. If that doesn't suit your site, the accent and the **Design** choice are your levers.

<Warning>
  **The widget shows "Powered by DMLY" and links to dmly.io.** It is hardcoded and there is no switch to hide it, so the widget is **not whitelabel-safe** today. Agencies putting this on a client's site should know that before they paste the snippet.
</Warning>

<Note>
  **Show typing indicator** has no effect. The switch saves, but the setting is always on — the animated dots show regardless. Ignore it.
</Note>

Select **Save changes** when you're done. Your changes reach live visitors without re-pasting the snippet.

## Rename or delete

Live Chat has no account behind it, so you rename it from the Channel card rather than from account settings.

<Warning>
  **Delete widget** removes the widget, its snippet, and **every conversation and Contact that came through it**. This can't be undone, and the snippet on your site goes dead. Rename instead if you just want a different label.
</Warning>

## Next steps

<Columns cols={2}>
  <Card title="Automate replies" icon="robot" href="/automation/flow-builder">
    Widget messages run your flows the same as WhatsApp.
  </Card>

  <Card title="Answer in the Inbox" icon="inbox" href="/inbox/overview">
    Live Chat conversations sit alongside every other Channel.
  </Card>

  <Card title="Move it to WhatsApp" icon="whatsapp" href="/channels/whatsapp">
    Collect a phone number in pre-chat, then follow up where they'll actually reply.
  </Card>

  <Card title="Nothing arriving?" icon="triangle-exclamation" href="/channels/no-inbound-messages">
    Check the snippet is on the page before anything else.
  </Card>
</Columns>