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

# JavaScript API

> Open, close and listen to the widget from your own code.

## Load it with the command queue

If your code calls `wiredesk(…)`, use this version of the snippet. The stub queues any call made before the script has loaded and the script replays them, so a button wired to `wiredesk("open")` works on the first click.

```html theme={null}
<script>
  window.wiredesk = window.wiredesk || function () {
    (window.wiredesk.q = window.wiredesk.q || []).push(arguments);
  };
</script>
<script src="https://wiredesk.ai/widget.js" data-widget="wk_..." async></script>
```

## Commands

```js theme={null}
wiredesk("open");
wiredesk("close");
wiredesk("toggle");
wiredesk("reset");
wiredesk("identify", { id, hash, name, email });
wiredesk("on", "message", fn);
wiredesk("off", "message", fn);
```

| Command         | What it does                                                                                                                                                                                                         |
| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `open`          | Opens the panel. Same as clicking the bubble. `wiredesk("open", { message: "…" })` types a question in for the visitor.                                                                                              |
| `close`         | Closes it.                                                                                                                                                                                                           |
| `toggle`        | Opens it if closed, closes it if open.                                                                                                                                                                               |
| `reset`         | Forgets the visitor. Drops the identity set by `identify` or `wiredeskSettings.user`, and clears the conversation stored in this browser, so the panel starts again at the greeting. Call it when someone signs out. |
| `identify`      | Tells the agent who the visitor is. Needs [verified visitors](/docs/widget/verified-visitors) switched on.                                                                                                                |
| `hide` / `show` | Takes the launcher off the page and puts it back, keeping the conversation.                                                                                                                                          |
| `update`        | Changes settings on the running widget, using the [settings names](/docs/developers/widget-settings): `wiredesk("update", { side: "left" })`. A field set on the script tag or in `wiredeskSettings` still wins.          |
| `destroy`       | Removes the widget from the page entirely.                                                                                                                                                                           |
| `on` / `off`    | Adds or removes an event listener.                                                                                                                                                                                   |

## Events

| Event     | Fires when                                                                                                | Payload          |
| --------- | --------------------------------------------------------------------------------------------------------- | ---------------- |
| `ready`   | The conversation panel has loaded.                                                                        | `{ key }`        |
| `open`    | The panel opens.                                                                                          | `{ key }`        |
| `close`   | The panel closes.                                                                                         | `{ key }`        |
| `message` | A reply arrives in the panel: the agent's answer, a teammate's reply, or a line the agent adds by itself. | `{ text, role }` |
| `unread`  | A reply arrives while the panel is closed.                                                                | `{ count }`      |

```js theme={null}
wiredesk("on", "message", (event) => {
  analytics.track("Support message", { role: event.role });
});
```

`message` never fires for the visitor's own messages, the greeting, or earlier messages shown again after a page load. See [Events](/docs/developers/events) for when each event fires and more recipes.

## Signing out

```js theme={null}
function signOut() {
  wiredesk("reset");
  // …then your own sign-out
}
```

`reset` makes the widget anonymous again and clears the conversation, the list of recent chats and the anonymous visitor id stored in this browser. If the panel is on the page it reloads straight away. If it is not, the next panel to load clears them first, even on a later page, so it is safe to call `reset` and redirect immediately. The conversation itself is kept, and you can still find it in the dashboard.

## The object form

Once the script has loaded, `window.WireDesk` exposes the same methods directly, plus a few getters:

```js theme={null}
WireDesk.isOpen();   // boolean
WireDesk.isHidden(); // boolean
WireDesk.unread();   // number of unread replies
```

Use the queued `wiredesk(…)` form for anything that might run before the script arrives.

## Without JavaScript

Any element with one of these attributes controls the widget on click:

```html theme={null}
<button data-wiredesk-open>Chat with us</button>
<button data-wiredesk-open="I need help with billing">Billing help</button>
<button data-wiredesk-close>Close chat</button>
<button data-wiredesk-toggle>Chat</button>
```

A value on `data-wiredesk-open` opens the panel with that question already typed in. A link to `#wiredesk` (`<a href="#wiredesk">`) opens the panel too.

## Related

* [Events](/docs/developers/events)
* [Widget settings](/docs/developers/widget-settings)
* [Verified visitors](/docs/widget/verified-visitors)
* [Security model](/docs/developers/security-model)