---
doc_version: "1.0.0"
last_updated: "2026-07-14T15:00:57.718Z"
title: "How to Control the Widget with JavaScript"
description: "Open, close, and toggle the ChatbotIQ widget programmatically: custom buttons, page-based triggers, keyboard shortcuts, and SPA integration."
keywords: [JavaScript API, widget control, programmatic, custom button, SPA, ChatbotIQ]
---

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](/reference/javascript-api/).

---

## Open from a custom button

```html
<button onclick="window.chatbotiq('open')">
  Need help? Chat with us
</button>
```

---

## Auto-open on a specific page

```javascript
if (window.location.pathname === '/pricing') {
  window.chatbotiq('open');
}
```

---

## Toggle with a keyboard shortcut

```javascript
document.addEventListener('keydown', function(e) {
  if (e.ctrlKey && e.shiftKey && e.key === 'H') {
    window.chatbotiq('toggle');
  }
});
```

---

## Use in React / SPA

```tsx
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.

---

## Related

- [JavaScript Widget API Reference](/reference/javascript-api/) - complete API reference
- [Embed the Widget](/how-to/embed-the-widget/) - adding the widget to your site

## Sitemap

Full documentation index: [sitemap.md](/sitemap.md) and [llms.txt](/llms.txt).