Appearance

Connecting the Website Widget ​

This guide explains how to add a chat widget to your website that connects to your MyChatbot agent.

Overview ​

The Website Widget allows your customers to chat with your agent directly on your website. This seamlessly integrates AI assistance into your existing web presence without requiring visitors to use external messaging platforms.

Step-by-Step Connection Process ​

  1. Navigate to the Channels tab in your MyChatbot dashboard
  2. Select the agent you want to connect to your website
  3. Find and click on the Website Widget tab
  4. Configure the widget settings as described below

Widget Configuration Options ​

Basic Settings ​

  • Widget Name: Create a unique identifier for your widget (only letters and hyphens allowed)
  • Widget Element Popup: The message that appears in a popup next to the widget button
  • Welcome Text: Initial message visitors see when they open the chat
  • Logo URL: Link to your brand logo image (optional)
  • Brand Color: Hex color code matching your website's branding
  • Disable contact form: Toggle this setting to not require users to input their either phone or email to proceed to conversation.
  • Hide default button: Toggle this setting to control the default floating button visibility. When ON, the default floating button is hidden. When OFF, the default floating button is visible. This is useful when you want to use custom buttons to open the widget (see Custom Widget Control section below)

Positioning and Size ​

  • Margin Desktop: Gap between page edges and widget (in pixels)
  • Margin Mobile: Gap between page edges and widget on mobile devices
  • Scale Desktop: Size adjustment for desktop screens (0.8 recommended for HD/Full HD)
  • Button Scale Desktop: Size of the chat button (1.2 recommended)
  • Scale Mobile: Size adjustment for mobile screens
  • Button Scale Mobile: Size of the chat button on mobile

Language and Appearance ​

  • Language: Default language for the widget interface
  • Avatar: Choose male or female avatar icon for the assistant
  • Button Position: Place the button on the left or right side
  • Button Text Show: Toggle visibility of the popup message

Additional Options ​

  • Social Links: Add buttons for your social profiles (Telegram, WhatsApp, Instagram, etc.)
  • Whitelist: Specify pages where the widget should not appear
  • Audio URL: Custom sound for new message notifications

Installing the Widget on Your Website ​

After configuring the widget:

  1. Click the Generate HTML button
  2. Copy the generated code
  3. On your website:
    • Add the first part of the code to the end of the <head> section
    • Add the second part of the code at the end of the <body> section
html
<!-- To the BOTTOM head tag -->
<link rel="stylesheet" href="https://api.mychatbot.app/sw-assets/v1/assets/style.css" />
<script src="https://api.mychatbot.app/sw-assets/v1/widget.js"></script>

<!-- To the BOTTOM of the body tag -->
<div id="my-chat-widget-container"></div>
<script>
	const metadata={/*YOUR METADATA GOES HERE*/};
	const config = {/*YOUR CONFIG GOES HERE*/};
	MyChatBot.mount('#my-chat-widget-container', config);
</script>

Query Parameter Widget Opening ​

If you want to bind the widget opening to a custom link or button, you can use a special query parameter:

  • Add ?open-mcb-widget=1 to any URL on your website
  • When users visit a URL with this parameter, the widget will automatically open
  • This is equivalent to the user clicking the widget button

Example use cases:

  • Link from email campaigns: https://yoursite.com/contact?open-mcb-widget=1
  • Custom "Chat with us" buttons that redirect to the same page with the parameter
  • Opening the widget from other parts of your website interface

This feature is useful when you want to provide multiple entry points for users to start a conversation with your agent.

Custom Widget Control ​

If you want to create your own custom buttons to open the chat widget, you can hide the default widget button in your widget settings and add the CSS class mcb_widget_activator_button to any button or element on your website. When users click on elements with this class, the chat widget will automatically open, allowing you to integrate chat functionality seamlessly into your existing website design and user interface.

Important: The element with the mcb_widget_activator_button class must exist on the page when it loads for the widget to properly bind the click event.

Making Changes To The Widget Appearance ​

If you need to update your widget configuration:

  1. Return to the Website Widget tab in your dashboard
  2. Make your changes
  3. Click Update (no need to re-download script and reinstall on the website)
  4. Reload the page with your widget and see the changes

Video Demonstration ​

Watch this tutorial to see the process in action:

Copyright © 2023 MyChatbot