Skip to content
ChatbotIQ

How to Control the Widget with JavaScript

The ChatbotIQ widget exposes a JavaScript API (window.chatbotiq) that lets you control it programmatically. Commands work even before the widget finishes loading, they’re automatically queued.

For the full method reference, see JavaScript Widget API.

Open from a custom button

Section titled “Open from a custom button”
<button onclick="window.chatbotiq('open')">
  Need help? Chat with us
</button>

Auto-open on a specific page

Section titled “Auto-open on a specific page”
if (window.location.pathname === '/pricing') {
  window.chatbotiq('open');
}

Toggle with a keyboard shortcut

Section titled “Toggle with a keyboard shortcut”
document.addEventListener('keydown', function(e) {
  if (e.ctrlKey && e.shiftKey && e.key === 'H') {
    window.chatbotiq('toggle');
  }
});

Use in React / SPA

Section titled “Use in React / SPA”
function HelpButton() {
  const openChat = () => {
    if (window.chatbotiq) {
      window.chatbotiq('open');
    }
  };


  return <button onClick={openChat}>Get Help</button>;
}

The widget uses Shadow DOM, so it won’t interfere with your app’s styles or state management.

Section titled “Related”