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. Customize Appearance (optional):
   • Choose widget colors to match your brand
   • Set widget position (bottom-right, bottom-left, etc.)
   • Configure welcome message
   • Set business hours

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

:::success Your WebChat widget is now live! Visitors can start conversations directly from your website. :::

Customizing Your Widget

Appearance Settings

You can customize:

• Widget Color: Match your brand colors
• Position: Choose where the widget appears (bottom-right, bottom-left, etc.)
• Icon: Customize the chat icon
• Size: Adjust widget size

Behavior Settings

Configure:

• Welcome Message: Set a greeting message for visitors
• Business Hours: Show availability based on your business hours
• Offline Message: Message shown when your team is offline
• Auto-open: Automatically open chat for new visitors (optional)

Advanced Settings

• Pre-chat Form: Collect visitor information before starting chat
• Chat History: Allow visitors to see previous conversations
• File Attachments: Enable file sharing in chat
• Typing Indicators: Show when you're typing

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 corner: Most common and user-friendly position
• Visible but not intrusive: Don't block important content
• Mobile-friendly: Ensure the widget works well on mobile devices

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.