Set Up WebChat

Add a WebChat widget to your website to enable real-time customer support directly from your site. All conversations will appear in your Cloodot inbox alongside messages from other channels.

What is WebChat?

WebChat is a customizable chat widget that you can embed on your website. It allows visitors to:

• Start conversations directly from your website
• Chat with your team in real-time
• Get instant support without leaving your site
• Access conversation history

Prerequisites

Before setting up WebChat, ensure you have:

• ✅ A website where you want to add the chat widget
• ✅ Access to your website's HTML code
• ✅ Your Cloodot workspace is set up

Step-by-Step Setup Guide

Step 1: Access WebChat Settings

You can start the WebChat setup in two ways:

Option A: From Inbox (When No Channels Connected)

1. Navigate to your Cloodot dashboard
2. Go to the Inbox or Conversations section
3. You'll see "No channels connected" message
4. Click the "Connect WebChat" button (purple icon)
5. The Channel Connection Wizard will open

Option B: From Settings

1. Navigate to Settings → Organization → Channels
2. Click "Add Channel" or the "+" button
3. In the Channel Connection Wizard, select "WebChat"

Step 2: Configure WebChat Widget

1. Widget Name: Enter a name for your WebChat widget (e.g., "Main Website Chat")
2. Company Name: Your company name, displayed in the widget header
3. Website URL: The website where you'll install the widget
4. Customize Appearance (optional):
   • Set your brand color (hex code) for the launcher and header
   • Set the chat background color
   • Choose widget position (Bottom Right, Bottom Left, Top Right, or Top Left)
   • Choose contact collection type (Email Only, Phone Only, or Email or Phone)

Step 3: Get Embed Code

1. After configuration, you'll receive an embed code snippet
2. Copy the provided JavaScript code
3. The code will look something like this:

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

Step 4: Add to Your Website

Option A: Add to All Pages (Recommended)

Add the embed code to your website's main template or header file so it appears on all pages:

1. Open your website's HTML template
2. Paste the embed code just before the closing </body> tag
3. Save and publish your website

Option B: Add to Specific Pages

If you only want the widget on certain pages:

1. Open the HTML file for the page where you want the widget
2. Paste the embed code just before the closing </body> tag
3. Save and publish the page

Step 5: Test the Widget

1. Visit your website
2. Look for the chat widget icon (usually in the bottom-right corner)
3. Click the widget to open the chat
4. Send a test message
5. Verify the message appears in your Cloodot inbox

Customizing Your Widget

Appearance Settings

You can customize:

• Brand Color — The hex color used for the launcher button and chat header (e.g. #000000). Text color is automatically chosen for contrast.
• Chat Background — The background color for the chat area (e.g. #FFFFFF).
• Widget Position — Choose where the widget appears on your site:
  • Bottom Right (default)
  • Bottom Left
  • Top Right
  • Top Left

Contact Collection

Choose what information to collect from visitors before they start chatting:

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

This data is automatically added to their contact record in Cloodot.

Additional Settings

• Company Name — Displayed in the widget header so visitors know who they're chatting with
• Website URL — The site where the widget is installed

Managing WebChat Conversations

View WebChat Messages

All WebChat conversations will appear in your unified inbox alongside messages from other channels. You can:

• Filter by channel to see only WebChat messages
• View visitor information and page context
• See which page the visitor was on when they started the chat
• Access full conversation history

Responding to WebChat Messages

1. Open your Cloodot inbox
2. Find the WebChat conversation
3. Type your response
4. Click send - the message will appear in the visitor's chat widget

Multiple Websites

You can set up WebChat widgets for multiple websites:

• Each website gets its own widget configuration
• All conversations appear in the same inbox
• You can filter by website to see which site each conversation came from

Best Practices

Widget Placement

• Bottom-right is the most common and user-friendly position
• Bottom-left works well for right-to-left language sites
• Top positions are less common but can work for specific layouts
• Make sure the widget doesn't block important content on your page

Response Times

• Quick responses: WebChat visitors expect fast responses
• Set expectations: Use auto-responses to let visitors know when you'll respond
• Business hours: Clearly communicate your availability

Welcome Messages

• Be friendly: Use a warm, welcoming message
• Set expectations: Let visitors know response times
• Provide value: Offer helpful information upfront

Troubleshooting

Widget Not Appearing

Problem: The chat widget doesn't show up on your website.

Solutions:

• Verify the embed code is correctly placed before the closing </body> tag
• Check that your website allows JavaScript execution
• Clear your browser cache and refresh the page
• Check browser console for any JavaScript errors
• Ensure your website isn't blocking the Cloodot domain

Messages Not Sending

Problem: Messages from the widget aren't appearing in Cloodot.

Solutions:

• Verify the embed code is correct and complete
• Check your internet connection
• Ensure WebChat channel is still connected in Cloodot
• Check browser console for errors
• Try disconnecting and reconnecting the WebChat channel

Widget Looks Wrong

Problem: The widget appearance doesn't match your customization.

Solutions:

• Clear your browser cache
• Verify customization settings in Cloodot
• Check if your website's CSS is interfering with the widget
• Try re-embedding the widget code

Not Receiving Messages

Problem: You're not receiving WebChat messages in your inbox.

Solutions:

• Verify the WebChat channel is connected
• Check your notification settings
• Ensure you have the correct 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.