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
- Navigate to the Channels tab in your dashboard
- Select the agent you want to connect to your website
- Find and click the Website Widget tab
- Configure the widget settings as described below
Widget configuration options
Basic settings: Widget Name (unique identifier, only letters and hyphens), Widget Element Popup (popup message next to the button), Welcome Text (first message on open), Logo URL (optional), Brand Color (hex), Disable contact form (don't require phone/email to start), Hide default button (hide the floating button, useful with custom buttons below).
Positioning & size: Margin Desktop/Mobile (px gap from edges), Scale Desktop (0.8 recommended for HD/Full HD), Button Scale Desktop (1.2 recommended), Scale Mobile, Button Scale Mobile.
Language & appearance: Language (default UI language), Avatar (male/female), Button Position (left/right), Button Text Show (popup visibility).
Additional options: Social Links (Telegram, WhatsApp, Instagram, etc.), Whitelist (pages where the widget should NOT appear), Audio URL (custom new-message sound).
Installing the widget on your website
After configuring: click Generate HTML, copy the generated code, then on your website add the first part to the end of the <head> section and the second part to the end of the <body> section.
<!-- 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
To bind widget opening to a custom link or button, use a special query parameter: add ?open-mcb-widget=1 to any URL on your site. When users visit a URL with this parameter, the widget opens automatically, equivalent to clicking the widget button.
Example use cases: email-campaign links (https://yoursite.com/contact?open-mcb-widget=1), custom "Chat with us" buttons redirecting to the same page with the parameter, opening the widget from other parts of your interface. Useful for providing multiple entry points to start a conversation.
Custom widget control
To create your own buttons to open the chat widget, hide the default widget button in settings and add the CSS class mcb_widget_activator_button to any button or element on your site. When users click elements with this class, the widget opens automatically.
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
To update your widget configuration: return to the Website Widget tab, make your changes, click Update (no need to re-download the script or reinstall on the website), then reload the page with your widget to see the changes.
Video demonstration
Watch the tutorial above to see the process in action.