Set Up WebChat

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

What is WebChat?

WebChat is a customizable chat widget you embed on your website. It lets visitors:

• Start conversations directly from your site
• 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 where you can add the chat widget
• Access to your website's HTML (or template/header file)
• A Cloodot workspace

Set up WebChat

1. Open the Channel Connection Wizard

Start from either place:

From the inbox (if no channels are connected yet)

1. Open Inbox or Conversations
2. Under the "No channels connected" message, 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. Widget Name — A label for your reference (e.g., "Main Website Chat")
2. Company Name — Shown in the widget header
3. Website URL — Where you'll install the widget
4. 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. Copy it — 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 only

Open the HTML for each page where you want the widget, paste the snippet before </body>, and 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 start chatting:

• Email Only — Collect their email address
• Phone Only — Collect their phone number
• Email or Phone — Let visitors provide either

Whatever they enter is added to their contact record in Cloodot.

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

See 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 chatting
• Access full conversation history

Reply to visitors

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

Multiple websites

You can run WebChat on more than one site:

• Each website gets its own widget configuration
• All conversations land in the same inbox
• Filter by website to see which site each one came from

Tips

Widget placement

• Bottom-right is the most familiar and works well for most sites
• Bottom-left suits right-to-left layouts
• Top positions are uncommon but useful for specific layouts
• Don't let the widget cover 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 goes a long way
• 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>
• Make sure JavaScript is allowed on your site
• Clear your browser cache and refresh
• Check the browser console for JavaScript errors
• Check that nothing is blocking the Cloodot domain

Messages aren't sending

• Confirm the embed code is complete and correct
• Check your internet connection
• Make sure 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 your 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
• Make sure you have the right permissions
• Refresh your Cloodot dashboard

Next steps

After setting up WebChat:

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

Need help? Check our troubleshooting guide or contact support.