# JavaScript API

Source: https://docs.revoplyai.com/widget/javascript-api/

> Open and close the widget from your page, tell it who the visitor is, and pass page context, with window.RevoplyAI.

Once `embed.js` has run, `window.RevoplyAI` drives the widget from your own page.

| Member                | Does                                                                             |
| --------------------- | -------------------------------------------------------------------------------- |
| `open()`              | Opens the panel.                                                                 |
| `close()`             | Closes it.                                                                       |
| `toggle()`            | Opens it if closed, closes it if open.                                           |
| `isOpen()`            | `true` while the panel is open.                                                  |
| `identify(visitor)`   | Attaches what you know about the visitor to the conversation.                    |
| `setContext(context)` | Passes anything else the assistant should know about this page.                  |
| `on(event, handler)`  | Subscribes to an [event](/widget/events/); returns a function that unsubscribes. |
| `off(event, handler)` | Unsubscribes a handler.                                                          |
| `version`             | The embed contract's version, such as `1.1.0`.                                   |

## Open the panel from your own button [#open-the-panel-from-your-own-button]

```html
<script
  src="https://widget.revoplyai.com/embed.js"
  data-channel-id="YOUR_CHANNEL_ID"
  data-launcher="none"
  defer
></script>
<button type="button" onclick="RevoplyAI.open()">Chat with us</button>
```

## Tell it who the visitor is [#tell-it-who-the-visitor-is]

```js
RevoplyAI.identify({
  name: 'Sam Rivera',
  email: 'sam@example.com',
  attributes: { accountId: '4821', tier: 'gold' },
});

RevoplyAI.setContext({ pageUrl: location.href, cartValue: '129.00' });
```

* `identify()` takes `name`, `email` and `attributes` (string values). Calling it again
  merges `attributes` with the earlier ones.
* `setContext()` takes an object and merges it with earlier context.
* Both can be called before the visitor opens the chat: the widget keeps the values and
  passes them on when the panel loads.

These values come from the visitor's browser, so a visitor can change them. Use them to
help the conversation, never as proof of who the visitor is.

## Calls made before the script has loaded [#calls-made-before-the-script-has-loaded]

`embed.js` loads with `defer`, so `window.RevoplyAI` may not exist yet when your code
runs. Until it does, queue calls on `window.RevoplyAI.q` as `[method, argument]` pairs;
they run in order once the script loads. A small helper covers both cases:

```js
function revoply(method, argument) {
  if (window.RevoplyAI && typeof window.RevoplyAI[method] === 'function') {
    return window.RevoplyAI[method](argument);
  }
  window.RevoplyAI = window.RevoplyAI || { q: [] };
  window.RevoplyAI.q.push([method, argument]);
}

revoply('identify', { name: 'Sam Rivera' });
revoply('open');
```

Only methods can be queued this way; subscribe to events after the script has loaded.