Channels

Web Chat

Copy page

The Web Chat channel places a live chat widget directly on your website, letting visitors start conversations without leaving the page. Unlike messaging apps that require customers to have a specific application installed, Web Chat works in any browser -- no downloads, no account creation. Visitors click the chat button, type their question, and the conversation flows straight into your Chatmo inbox alongside messages from all your other channels.

Prerequisites

Before setting up Web Chat, make sure you have:

• An active Chatmo account with access to the dashboard
• A website where you can add custom HTML/JavaScript code
• (Optional) An AI Agent configured in Chatmo if you want automated responses

Creating a Web Chat Channel

1. In the Chatmo sidebar, click Channel.

2. In the channel category panel on the left, select Web Chat.

3. Click to add a new Web Chat channel. A creation form appears with the following fields:

Field	Description
Channel Name	A name to identify this channel internally (e.g., "Website Live Chat")
Form Active	Toggle to enable or disable the pre-chat login form
AI Agent	Searchable dropdown to assign an AI Agent for automated responses. Select "AI Agent Off" to disable

4. Click Create Channel.

5. You are redirected to the channel detail page where you can configure the widget appearance, login form, and more.

Channel Detail Page

After creating a Web Chat channel, you land on the detail page. This page has four main tabs: Overview, Builder, Code Installation, and Settings.

Overview Tab

The Overview tab displays key information about your Web Chat channel:

Field	Description
Widget ID	A unique identifier for your widget (read-only, copyable)
Channel Name	Editable text field -- update the channel name anytime
Channel Status	Toggle to set the channel as Active or Inactive
Statistics	Conversation and message metrics for this channel
AI Agent	Searchable dropdown to assign or change the AI Agent

Builder Tab (Live Chat Builder)

The Builder tab is where you customize the appearance and behavior of your chat widget. It contains three sub-tabs: Persona, Login Form, and Room Designer.

Persona

The Persona sub-tab controls the identity displayed to visitors in the chat widget.

Setting	Description
Agent Name	The display name shown in the chat widget header (e.g., "Chatmo Support")
Agent Role	Select from: Sales, Technical, General, Support
Agent Photo	Upload a custom image or choose from 6 pre-built avatar templates
Company Logo	Upload your company logo to display in the widget

To configure the persona:

1. Navigate to the Builder tab and select the Persona sub-tab.
2. Enter the Agent Name that visitors will see.
3. Select an Agent Role from the dropdown.
4. Set the Agent Photo -- either upload your own image or pick one of the six built-in avatars.
5. Upload your Company Logo for brand recognition.
6. Save your changes.

Login Form

The Login Form sub-tab lets you configure a pre-chat form that collects visitor information before the conversation starts.

Available form fields:

Field	Default State	Notes
Name	Required	Enabled and required by default
Email	Required	Enabled and required by default
Phone Number	Optional	Can be toggled on/off
Address	Optional	Can be toggled on/off
Birth Date	Optional	Can be toggled on/off
Occupation	Optional	Can be toggled on/off
Company	Optional	Can be toggled on/off
Website	Optional	Can be toggled on/off
Initial Message	Optional	Lets visitors describe their inquiry upfront

Key features:

• Drag-and-drop reordering -- rearrange fields in any order by dragging them
• Toggle on/off -- enable or disable individual fields
• Required/optional -- set each enabled field as required or optional

Additional form settings:

Setting	Description
Form Enabled	Master toggle to enable or disable the entire login form
Auto-open Chat	Automatically open the chat widget when a visitor loads the page
Sound Notifications	Play a notification sound when new messages arrive

To configure the login form:

1. Navigate to the Builder tab and select the Login Form sub-tab.
2. Toggle the Form Enabled switch to activate the pre-chat form.
3. Enable or disable individual fields using their toggles.
4. Set each active field as required or optional.
5. Drag and drop fields to reorder them as needed.
6. Configure Auto-open Chat and Sound Notifications as desired.
7. Save your changes.

Room Designer

The Room Designer sub-tab gives you full control over the visual appearance of the chat widget window.

Color settings:

Setting	Description
Header Color	The color of the chat widget header bar (color picker)
Bubble Color	The color of message bubbles (color picker)
Background Type	Choose between a solid Color or an uploaded Image
Background Color	Set the chat area background color (available when Background Type is Color)
Background Image	Upload a custom background image (available when Background Type is Image)

Typography and layout:

Setting	Options
Font Size	Small, Medium, Large
Font Family	Inter, Roboto, Open Sans
Widget Position	Bottom-right, Bottom-left, and other positions
Widget Size	Small, Medium, Large

To customize the room design:

1. Navigate to the Builder tab and select the Room Designer sub-tab.
2. Use the color pickers to set your Header Color and Bubble Color to match your brand.
3. Choose a Background Type -- select Color for a solid background, or Image to upload a custom background.
4. Set the Font Size and Font Family for readability.
5. Choose the Widget Position on your website (bottom-right is most common).
6. Select the Widget Size that works best for your site layout.
7. Save your changes.

Code Installation Tab

The Code Installation tab provides the embed code you need to add the chat widget to your website.

1. Navigate to the Code Installation tab.
2. Copy the embed code snippet displayed on the page.
3. Paste the code into your website's HTML.

The embed code contains your unique Widget ID and loads the Chatmo chat widget script. It looks similar to this:

Code
<script type="text/javascript">
    window.mychat = window.mychat || {};
    window.mychat.server = 'https://app.chatmo.io/widget.js';
    window.mychat.iframeWidth = '400px';
    window.mychat.iframeHeight = '700px';
    window.mychat.accessKey = 'YOUR_ACCESS_KEY';
    (function() {
        var mychat = document.createElement('script');
        mychat.type = 'text/javascript';
        mychat.async = true;
        mychat.src = window.mychat.server;
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(mychat, s);
    })();
</script>

Installing on Different Platforms

Custom HTML Website

Paste the embed code directly before the closing </body> tag:

Code
<!DOCTYPE html>
<html>
<head>
  <title>Your Website</title>
</head>
<body>
  <!-- Your website content -->

  <!-- Chatmo Web Chat Widget -->
  <script type="text/javascript">
      window.mychat = window.mychat || {};
      window.mychat.server = 'https://app.chatmo.io/widget.js';
      window.mychat.iframeWidth = '400px';
      window.mychat.iframeHeight = '700px';
      window.mychat.accessKey = 'YOUR_ACCESS_KEY';
      (function() {
          var mychat = document.createElement('script');
          mychat.type = 'text/javascript';
          mychat.async = true;
          mychat.src = window.mychat.server;
          var s = document.getElementsByTagName('script')[0];
          s.parentNode.insertBefore(mychat, s);
      })();
  </script>
</body>
</html>

WordPress

Option A: Using a plugin (recommended)

1. Install a plugin like "WPCode" or "Insert Headers and Footers" from the WordPress plugin directory.
2. Go to the plugin settings page.
3. Paste the Chatmo embed code into the Footer Scripts section.
4. Save.

Option B: Editing the theme directly

1. In WordPress admin, go to Appearance > Theme File Editor.
2. Open the footer.php file.
3. Paste the embed code just before the closing </body> tag.
4. Click Update File.

Shopify

1. In Shopify admin, go to Online Store > Themes.
2. Click Actions > Edit Code on your active theme.
3. Under the Layout folder, open theme.liquid.
4. Paste the embed code just before the closing </body> tag.
5. Click Save.

Wix

1. In the Wix editor, click Settings in the left menu.
2. Go to Custom Code under Advanced.
3. Click Add Custom Code.
4. Paste the Chatmo embed code.
5. Set placement to Body - end and apply to All pages.
6. Click Apply and publish your site.

React / Next.js

Add the script using a useEffect hook in your layout component:

Code
import { useEffect } from 'react';

function ChatmoWidget() {
  useEffect(() => {
    window.mychat = window.mychat || {};
    window.mychat.server = 'https://app.chatmo.io/widget.js';
    window.mychat.iframeWidth = '400px';
    window.mychat.iframeHeight = '700px';
    window.mychat.accessKey = 'YOUR_ACCESS_KEY';

    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.async = true;
    script.src = window.mychat.server;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return null;
}

export default ChatmoWidget;

Include <ChatmoWidget /> in your main layout component.

Google Tag Manager

1. In Google Tag Manager, create a new Tag.
2. Choose Custom HTML as the tag type.
3. Paste the Chatmo embed code.
4. Set the trigger to All Pages.
5. Save and publish the container.

Settings Tab

The Settings tab provides advanced configuration options for the Web Chat channel.

Access it by navigating to the Settings tab on the channel detail page. Available options include channel-level settings that control behavior and advanced features for the Web Chat widget.

AI Agent and Auto-Reply

All automated responses in Web Chat are handled through the AI Agent system.

How it works:

1. Create and configure an AI Agent in the AI Agent section of the Chatmo dashboard.
2. Assign the AI Agent to your Web Chat channel using the dropdown in the Overview tab or during channel creation.
3. The AI Agent handles greeting visitors, answering common questions, and managing conversations when no human agents are available.
4. To disable automated responses, select AI Agent Off from the dropdown.

Widget Preview

Once you have configured the Builder settings, you can preview how your widget looks to visitors.

The preview reflects all your Persona, Login Form, and Room Designer configurations so you can verify the appearance before installing the widget on your website.

Testing Your Widget

After installing the embed code on your website, verify that everything works correctly:

1. Open your website in an incognito or private browser window to avoid cached versions.
2. Check the chat button -- confirm it appears in the correct position (matching your Widget Position setting).
3. Click the chat button to open the widget.
4. Verify the login form -- if enabled, fill out the pre-chat form and submit.
5. Send a test message from the widget.
6. Check your Chatmo inbox -- confirm the test message appears.
7. Reply from Chatmo and verify the response shows up in the widget on your website.
8. Test on mobile -- open your site on a phone or resize your browser to check responsive behavior.

Best Practices

1. Keep the login form minimal -- Name and Email are usually enough. Every extra required field reduces the number of visitors who start a conversation.

2. Match your brand -- Use the Room Designer to align widget colors, fonts, and positioning with your website's design. A consistent look builds trust.

3. Choose the right widget position -- Bottom-right is the most common and expected position. Make sure the chat button does not overlap important site elements like "Add to Cart" or navigation buttons.

4. Use a recognizable agent persona -- Set a friendly Agent Name and a professional photo or avatar. Visitors engage more with a widget that feels personal.

5. Configure your AI Agent -- An assigned AI Agent ensures visitors get an immediate response even when your human agents are offline. This prevents leads from leaving unanswered.

6. Test across devices -- Always verify your widget on desktop, tablet, and mobile. Check that fonts are readable, colors render correctly, and the widget does not interfere with your site's layout.

Next Steps

• Explore the Channels Overview to see all available integration options.
• Learn how to manage incoming conversations in the Inbox Overview.
• Set up additional channels like WhatsApp or Instagram for multi-channel coverage.