> Open, close and identify visitors in the AI Demo Agent widget from your own code, and listen to lead, demo and booking events.

Canonical: https://livedemo.ai/docs/ai-demo-agent/javascript-api/

# JavaScript API

After the [widget script](https://livedemo.ai/docs/ai-demo-agent/website-widget/) loads, a global `LiveDemo` function controls it.

## Commands

| Command | What it does |
| --- | --- |
| `LiveDemo('open')` | Opens the agent |
| `LiveDemo('open', { question: 'Show me pricing' })` | Opens it and asks a question |
| `LiveDemo('close')` | Closes it |
| `LiveDemo('identify', { email, name, company })` | Tells the agent who the visitor is |
| `LiveDemo('hideLauncher')` | Hides the launcher |
| `LiveDemo('showLauncher')` | Shows it again |
| `LiveDemo('on', event, callback)` | Listens to an event |

## Events

`ready`, `open`, `close`, `session`, `lead`, `demo`, `cta`, `calendar`, `booked`.

```js
LiveDemo('on', 'lead', (lead) => {
    console.log('New lead', lead)
})

LiveDemo('on', 'booked', () => {
    gtag('event', 'agent_meeting_booked')
})
```

## No-code: HTML attributes

```html
<button data-livedemo-open>Talk to our demo agent</button>
<button data-livedemo-open data-livedemo-question="How does pricing work?">Pricing</button>
<button data-livedemo-open data-livedemo-demo="DEMO_ID">See the Salesforce sync</button>
```

## Recipes

- **Logged-in users**: call `identify` after login so they skip the connect form and see personalized demos.
- **Pricing page**: a "Questions? Ask our agent" button with `data-livedemo-question`.
- **Analytics**: forward `lead`, `demo` and `booked` to your analytics tool.
- **Checkout**: `hideLauncher` on pages where the bubble distracts. Or use a [page rule](https://livedemo.ai/docs/ai-demo-agent/page-rules/).

---

Next: [Page rules](https://livedemo.ai/docs/ai-demo-agent/page-rules/)