Set Up WebChat

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

Set up WebChat

1. Open the Channel Connection Wizard

Start from one of two places.

From the inbox (no channels connected yet)

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

From Settings

1. Go to Settings → Organization → Channels
2. Click Add Channel or the + button
3. Select WebChat

2. Configure the widget

1. Company Name — Shown in the widget header
2. Website URL — Where you'll install the widget
3. 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

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.

5. Test the widget

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

Customizing your widget

Appearance

• Brand color — Hex color for the launcher and chat header (e.g., #000000). 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

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.

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

Managing WebChat conversations

View WebChat messages

WebChat conversations land in your unified inbox. You can:

• Filter by channel to see only WebChat messages
• View visitor info and the page they were on when they started the chat
• Access the full conversation history

Reply to visitors

1. Open your Cloodot inbox
2. Find the WebChat conversation
3. Type your reply and send — it appears in the visitor's chat widget

Running WebChat on multiple sites

• Each site gets its own widget configuration
• All conversations land in the same inbox
• Filter by website to see where each conversation started

Tips

Widget placement

• Bottom-right is the most familiar and works for most sites
• Bottom-left suits right-to-left layouts
• Top positions are uncommon but useful for specific layouts
• Avoid covering important content

Response times

• Reply quickly — WebChat visitors expect fast responses
• Set expectations — Use auto-responses to signal when you'll reply
• Share hours — Tell visitors when you're available

Welcome messages

• Be warm — A friendly greeting helps
• Set expectations — Mention typical response times
• Add value — Offer something useful upfront

Troubleshooting

Widget isn't showing up

• Confirm the embed code is placed just before </body>
• Confirm JavaScript is allowed on your site
• Clear your browser cache and refresh
• Check the browser console for JavaScript errors
• Confirm nothing is blocking the Cloodot domain

Messages aren't sending

• Confirm the embed code is complete and correct
• Check your internet connection
• Confirm the WebChat channel is still connected in Cloodot
• Look for errors in the browser console
• Disconnect and reconnect the WebChat channel

Widget looks wrong

• Clear your browser cache
• Re-check the customization settings in Cloodot
• Check whether your site's CSS is interfering
• Re-embed the widget code

You're not receiving messages

• Confirm the WebChat channel is connected
• Check your notification settings
• Confirm you have the right permissions
• Refresh your Cloodot dashboard

Next steps

1. Customize your widget appearance
2. Configure business hours
3. Set up automated responses
4. Invite team members

Need help? See the troubleshooting guide or contact support.