# Managing Chat Widget state

You can programmatically control the visibility and state of the User.com Chat Widget using the userengage function. This allows you to hide the widget on specific pages, expand it automatically based on user actions, or close it when needed.

# Method signature

userengage("widget.{{state}}");
  • state (String): The desired state of the widget (e.g., 'hide', 'open').

# Available states

You can trigger one of the following states:

Command Description
userengage("widget.hide") Completely hides the widget launcher button from the page.
userengage("widget.show") Shows the standard widget launcher button (if it was previously hidden).
userengage("widget.open") Automatically expands the chat window (simulates a user clicking the launcher).
userengage("widget.close") Closes (minimizes) the chat window if it is currently expanded.

# Implementation examples

# Example 1: Hiding the widget on specific pages

If you want to prevent the chat widget from appearing on your checkout page to reduce distractions:

// Run this after the SDK has loaded
if (window.location.pathname === '/checkout') {
    userengage("widget.hide");
}

# Example 2: Opening chat on button click

You can bind the widget to a custom "Contact Support" button on your site.

document.getElementById('contact-btn').addEventListener('click', function() {
    userengage("widget.open");
});