Set Up WebChat

Add a chat widget to your website so visitor conversations land in your Cloodot inbox.

Add a WebChat widget to your website so visitors can start conversations from any page. Messages land in your Cloodot inbox alongside other channels.

What WebChat does

WebChat is a customizable widget you embed on your site. Visitors can:

Start conversations directly from any page
Chat with your team in real time
Get help without leaving the page
Pick up where they left off through conversation history

Before you start

You'll need:

A website you can add a code snippet to
Access to your site's HTML (or template/header file)
A Cloodot workspace

1. Open the Channel Connection Wizard

Start from one of two places.

From the inbox (no channels connected yet)

Open Inbox or Conversations
Under "No channels connected", click Connect WebChat (purple icon)

From Settings

Go to Settings → Organization → Channels
Click Add Channel or the + button
Select WebChat

Company name — Shown in the widget header
Website URL — Where you'll install the widget
Customize appearance (optional):
- Brand color (hex) for the launcher and header
- Chat background color
- Widget position — Bottom right, Bottom left, Top right, or Top left
- Contact collection — Email only, Phone only, or Email or phone

Everything else — the greeting, the composer placeholder, the chat avatars — lives on the channel's settings page, next to a live preview of the widget. See Customizing your widget.

3. Copy the embed code

After you save, Cloodot generates a JavaScript snippet. It looks like this:

<script>
  (function() {
    // Your WebChat widget code
  })();
</script>

4. Add the code to your website

On every page (recommended)

Paste the snippet into your site's main template or header file, just before the closing </body> tag. Save and publish.

On specific pages

Paste the snippet before </body> on each page where you want the widget, then publish.

Visit your website
Click the chat launcher (bottom-right by default)
Send a test message
Confirm it appears in your Cloodot inbox

Success

Your WebChat widget is live. Visitors can start conversations from your site.

Go to Settings → Organization → Channels and open your WebChat channel. Every setting on this page is previewed beside it: the panel on the right runs the real widget, so the corner, the brand color and the wording are the ones a visitor will get. Edits show there before you save.

The WebChat channel settings page: the widget fields on the left, and the live widget preview beside them

The preview stays with you. Scroll down through the fields and it pins beside them, clear of the page header and as tall as the window allows — so the widget in it is the height a visitor gets on a real page, rather than a short panel with empty space under it. Open the launcher and the greeting, the avatars and the composer sit where they will on your own site.

The settings page scrolled down, with the live preview pinned beside the fields at full height

Appearance

Brand color — Hex color for the launcher and chat header (e.g., #0F766E). Text color is chosen automatically for contrast.
Chat background — Background color for the chat area (e.g., #FFFFFF).
Widget position:
- Bottom right (default)
- Bottom left
- Top right
- Top left

Wording

Greeting — The first thing a visitor reads when the widget opens. Leave it empty and the widget uses its own default.
Composer placeholder — The grey prompt inside the message box. Also falls back to a default when empty.

Both fields travel in the embed snippet, so changing either means pasting the snippet again — see Re-pasting after a change.

Contact collection

Choose what to ask visitors before they chat:

Email only — Collect their email address
Phone only — Collect their phone number
Email or phone — Let visitors choose either

Whatever they enter is added to their Cloodot contact record.

Chat avatars

Pick up to four teammates whose faces greet visitors above the widget's greeting, or leave it empty to show whoever is available.

Other settings

Company name — Shown in the widget header so visitors know who they're chatting with
Website URL — The site where the widget runs

Re-pasting after a change

Two settings reach a widget that is already on your site, because the widget asks for them each time it loads: contact collection and chat avatars. Change either and your site needs no edit.

Everything else — company name, greeting, composer placeholder, brand color, chat background and widget position — travels in the embed snippet, which is why the snippet at the bottom of the settings page carries all of them. After changing one of those, copy the snippet again and replace the old one on your site.

The generated embed snippet, carrying the channel id, position, company name, greeting and placeholder