This dashboard provides real-time debugging and monitoring tools for Webex Connect (IMI Chat) chatbot widgets. Use it to inspect widget communication, troubleshoot issues, and understand how your chatbot interacts with web pages.
The dashboard is organized into four main areas:
Tip: The right 25% of the screen is reserved for the chatbot widget. You can interact with the chatbot while viewing debug information.
loadstyles action to confirm config receivedEach panel and button in the dashboard serves a specific debugging purpose.
Removes the current widget instance and reinitializes it. Useful for testing initialization sequences or recovering from errors. Clears the widget iframe and reloads the IMI Chat script.
Clears all logged data from every panel. Use this to start fresh when debugging a specific interaction sequence.
Downloads all captured logs as a JSON file. The export includes session info, widget config, and all panel data with timestamps.
Logs current widget state to the Events panel. Shows: DOM presence of widget elements, iframe count, IMI objects, and whether config has been received.
Tests connectivity to IMI servers by sending a HEAD request to media.imi.chat. Reports latency in milliseconds or connection failure.
Copies a comprehensive JSON report to clipboard. Includes environment info, widget config, and filtered logs (noise removed). Perfect for sharing with support teams.
Copies just the widget configuration JSON. Only available after the loadstyles PostMessage is received.
Located in the sidebar, these checkboxes control what appears in the PostMessages panel:
Each debug panel includes:
The Webex Engage LiveChat widget exposes JavaScript SDK methods to control its behavior. These methods are available on the global imichatwidget object.
Displays the chat widget. Use this when you've hidden the widget by default and want to show it programmatically (e.g., on button click).
// Show the widget when user clicks a button
document.getElementById('chatBtn').onclick = function() {
imichatwidget.show();
};Hides the chat widget from view. The widget remains loaded but invisible.
imichatwidget.hide();Initializes the widget with custom data. Pass custom chat fields that will be attached to all conversations.
var data = JSON.stringify({
"custom_chat_fields": {
"Customer ID": "12345",
"Plan Type": "Premium"
}
});
imichatwidget.init(data, function(response) {
console.log('Widget initialized', response);
});Note: Custom field keys must be configured in the Webex Engage Admin Console before use. Unknown keys are silently ignored.
Updates custom chat fields after initialization. Behaves similarly to init().
var data = JSON.stringify({
"custom_chat_fields": {
"Page": "checkout",
"Cart Value": "$150"
}
});
imichatwidget.update(data, function(response) {
console.log('Fields updated');
});Subscribe to widget events. The most common event is imichat-widget:ready.
imichatwidget.on("imichat-widget:ready", function(appId) {
console.log('Widget ready, App ID:', appId);
// Safe to call other methods now
imichatwidget.show();
imichatwidget.maximizeWindow();
});Expands the chat widget to its maximized state (full chat view).
Minimizes the chat widget to its collapsed state (just the launcher button).
<!-- Widget container (hidden by default) -->
<div id="divicw"
data-bind="YOUR-BIND-ID"
data-guid="YOUR-GUID"
style="display:none;"></div>
<!-- Custom chat button -->
<button id="openChat">Need Help?</button>
<script>
// Wait for widget to be ready
imichatwidget.on("imichat-widget:ready", function(appId) {
// Initialize with customer data
var customerData = JSON.stringify({
"custom_chat_fields": {
"User ID": getUserId(),
"Page": window.location.pathname
}
});
imichatwidget.init(customerData, function() {
// Enable the chat button
document.getElementById('openChat').disabled = false;
});
});
// Open chat on button click
document.getElementById('openChat').onclick = function() {
imichatwidget.show();
imichatwidget.maximizeWindow();
};
</script>
<!-- Load widget script -->
<script src="https://media.imi.chat/widget/js/imichatinit.js"></script>Widget configuration is received via PostMessage with the loadstyles action. This dashboard parses and displays key settings in the sidebar.
| Field | Description |
|---|---|
appid |
Unique application identifier for this widget instance |
name |
Display name configured for the widget |
website_id |
ID of the website this widget is registered for |
agent_avail |
Whether live agents are currently available (1 = yes, 0 = no) |
enable_proactive |
Whether proactive chat invitations are enabled |
isattachmentenabled |
Whether file attachments are allowed in chat |
isemojienable |
Whether emoji picker is available |
widget_lang |
Language code for widget UI text |
widgetcolor |
Primary color theme (hex code) |
To install the widget on your website:
data-bind and data-guid values<!-- Widget container -->
<div id="divicw"
data-bind="YOUR-BIND-ID"
data-guid="YOUR-WIDGET-GUID"></div>
<!-- Widget script (add before closing body tag) -->
<script src="https://media.imi.chat/widget/js/imichatinit.js"></script>Configure your domain in General Settings using patterns like:
*.example.com - All subdomainswww.example.com - Specific subdomainexample.com - Root domain onlyImportant: Do not include http:// or https:// in the domain configuration.
To make the widget available outside business hours:
Common issues and their solutions when working with the Webex Connect widget.
divicw element exists with correct attributesTip: Use the Ping button to verify connectivity to IMI servers.
init() or update() after imichat-widget:ready eventdivicw present with correct data-bind and data-guid?media.imi.chat?loadstyles PostMessage received?agent_avail show in config?The widget communicates with the parent page using the browser's postMessage API. This dashboard intercepts and displays these messages for debugging.
Widget messages typically contain:
{
"action": "actionName",
"message": "...",
"key": "...",
"value": "..."
}| Action | Description |
|---|---|
loadstyles |
Widget configuration payload (JSON in message field) |
setlocal |
Widget storing data in localStorage (key/value) |
getlocal |
Widget retrieving data from localStorage |
resize |
Widget requesting size change |
maximize |
Widget expanding to full view |
minimize |
Widget collapsing to launcher |
Messages come from different sources:
The widget generates a unique fingerprint for visitor tracking. Look for setlocal action with key: "fingerprint" to see this value. It's used to maintain conversation continuity across sessions.
Browser extensions often flood postMessage with their own communications. This dashboard automatically filters:
Toggle filters in the sidebar to show or hide these messages.
Cause: The data-guid attribute doesn't match any registered widget.
Solution: Verify the GUID in Webex Engage Admin Console under LiveChat assets.
Cause: The current page's domain isn't in the allowed list.
Solution: Add your domain pattern to the widget's allowed domains in Admin Console.
Cause: Normal security behavior - you cannot directly access iframe content.
Solution: This is expected. Use PostMessage API for communication.
Cause: Trying to call widget methods before script loads.
Solution: Wait for imichat-widget:ready event before calling methods.
Cause: Conversation history may be disabled or fingerprint changed.
Solution: Check Admin Console settings and verify localStorage isn't being cleared.
Possible causes:
Debug: Check Webex Connect flow debugger and webhook logs.
The WebSocket and MQTT panels provide real-time monitoring of connection activity. However, there are important limitations to understand.
The Webex Connect/IMI chat widget runs inside a cross-origin iframe from media.imi.chat. Due to browser security restrictions, WidgetScope cannot intercept WebSocket or MQTT traffic that occurs inside this iframe.
This means:
WidgetScope detects widget activity through indirect signals:
loadstyles PostMessageUse your browser's built-in Developer Tools:
Tip: In Safari, enable the Develop menu (Preferences → Advanced → Show Develop menu) to access DevTools.
Browser security prevents JavaScript on one domain from accessing resources (including WebSocket connections) created by an iframe from a different domain. This is the Same-Origin Policy - a fundamental web security feature.
The IMI widget intentionally runs in a cross-origin iframe to:
If you need client-side access to chat events (message sent, message received, etc.), you can request this feature from Webex:
onMessageReceived or onMessageSentCurrently, the widget only exposes the imichat-widget:ready event to the parent page.
Downloads complete documentation as a markdown file
Official documentation and community resources for Webex Connect development.
Need help? Contact your customer success representative or email developers@webex.com
Enter your Webex Connect widget credentials
⚠ Whitelist This Domain
1. Webex Engage: Add widgetscope.vercel.app to your LiveChat asset's Websites tab.
2. Webex Connect Flow: Add domain to Custom Variables:
Services → [Service] → Flows → [Flow] → Edit → Settings → Custom Variables → liveChatDomain
Need Help?
Not an official Cisco/Webex product. Questions? chris@klopconsulting.com