> ## Documentation Index
> Fetch the complete documentation index at: https://docs.konnectbot.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Chat Widget JavaScript API: Open Chat from Any Button

> Open, close, and control the KonnectBot chat widget from HTML click attributes or JavaScript.

After you embed the KonnectBot widget on your site, you can open it from any button, link, or custom script. Commands called before the widget finishes loading are queued automatically and run as soon as it is ready.

## HTML click attributes

Add a data attribute to any element — no custom JavaScript required:

```html theme={null}
<button data-konnectbot-open>Chat with us</button>
<a href="#" data-konnectbot-toggle>Toggle chat</a>
<button data-konnectbot-close>Close chat</button>
<button data-konnectbot-hide>Hide launcher</button>
<button data-konnectbot-show>Show launcher</button>
```

| Attribute                  | Action                             |
| -------------------------- | ---------------------------------- |
| `data-konnectbot-open`     | Opens the chat widget              |
| `data-konnectbot-close`    | Closes the chat widget             |
| `data-konnectbot-toggle`   | Opens if closed, closes if open    |
| `data-konnectbot-maximize` | Alias for open                     |
| `data-konnectbot-minimize` | Alias for close                    |
| `data-konnectbot-hide`     | Hides the floating launcher button |
| `data-konnectbot-show`     | Shows the floating launcher button |

## JavaScript API

Use `KonnectBot` (or the alias `KonnectBotWidget`) from any script or `onclick` handler:

```html theme={null}
<button onclick="KonnectBot.open()">Open chat</button>
```

```javascript theme={null}
// Open / close / toggle
KonnectBot.open();
KonnectBot.close();
KonnectBot.toggle();

// LiveChat-style aliases
KonnectBot.maximize();
KonnectBot.minimize();
KonnectBot.call('open');

// Hide / show floating launcher only
KonnectBot.hide();
KonnectBot.show();

// Prefill and send a visitor message
KonnectBot.sendMessage('Hi, I need help with my order');

// Check state
KonnectBot.isOpen(); // true | false
KonnectBot.getState();
```

## Events

Subscribe to widget lifecycle events:

```javascript theme={null}
KonnectBot.on('ready', function () {
  console.log('Widget ready');
});

KonnectBot.on('open', function () {
  console.log('Chat opened');
});

KonnectBot.on('close', function () {
  console.log('Chat closed');
});

// Also available as DOM events:
window.addEventListener('konnectbot:ready', function (e) {
  console.log(e.detail);
});
```

| Event   | When it fires             |
| ------- | ------------------------- |
| `ready` | Widget API is initialized |
| `open`  | Chat panel opened         |
| `close` | Chat panel closed         |

## Modern widget: Start Conversation

On the **modern** widget layout, visitors land on a home screen first. Clicking **Start Conversation** opens the chat and starts the configured mode:

* **AI** — shows the AI welcome message (or contact form if enabled), then AI replies
* **Flow** — starts the welcome automation flow
* **Welcome** — shows the standard welcome message for human chat

Configure startup mode per brand under **Chat Widgets → Behavior / AI**.

## Where to find examples in the dashboard

Open your brand at **Company → Chat Widgets → \[Brand] → Embed**. The Embed tab includes copy-paste examples for HTML attributes and the JavaScript API.

<Tip>
  Install the widget with your brand embed key from **Chat Widgets → Embed**, then add `data-konnectbot-open` to any CTA on your site ("Talk to sales", "Get help", etc.).
</Tip>