> Put the AI Demo Agent on your website as a chat bubble, email pill, smart search bar, button or inline iframe, with different behaviour per page.

Canonical: https://livedemo.ai/docs/ai-demo-agent/website-widget/

# Website Widget

1. [Publish your agent](https://livedemo.ai/docs/ai-demo-agent/create-an-ai-demo-agent/) (**Share → Public access**).
2. Open **Share → Embed** and pick an **Embed type**.
3. Click **Copy code** and paste it before `</body>` on every page.

```html
<script
    src="https://livedemo-cdn.s3.us-east-1.amazonaws.com/static/livedemo-embed.js"
    data-agent-id="YOUR_AGENT_ID"
    async></script>
```

The script reads the embed type from your agent, so you can switch types in LiveDemo without touching your site.

## Embed types

| Embed type | What visitors see |
| --- | --- |
| **Chat bubble** | A chat bubble with a teaser and starter questions |
| **Email pill** | An orb that expands into a work-email field with a demo preview |
| **Smart search bar** | An "Ask anything about…" bar. The question opens the agent and it answers right away |
| **Button trigger** | No launcher. Any element with `data-livedemo-open` opens the agent |
| **Inline (iframe)** | The full agent inside your page, for a dedicated demo page |

Customize each launcher with the ⚙ button next to it (position, accent color, placeholder, teaser).

### Button trigger

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

### Override per page

Script attributes override the agent's settings on that page: `data-launcher` (`bubble`, `pill`, `smartbar`, `none`), `data-position`, `data-teaser`, `data-preview="off"` and `data-expand`.

## Settings

**Share → Settings**:

| Setting | What it does |
| --- | --- |
| **Show on my website** | Off hides every installed widget at once |
| **Allowed domains** | Sites that can load the agent, such as `acme.com, *.acme.com`. Empty = any site |
| **Page rules** | Different teaser, questions or auto-open per page (below) |
| **Show Powered by LiveDemo** | Turn off on paid plans |
| **Installed on** | The last page where the widget loaded, and when. Use it to check your install |

## Page rules

One agent can behave differently on each page. The first matching rule wins.

| Field | Example |
| --- | --- |
| **Path pattern** | `/pricing` (exact), `/docs/*` (the section and everything under it), `*` (every page) |
| **Hide the widget on this page** | No launcher and no auto-open, such as on `/checkout`. `data-livedemo-open` buttons still work |
| **Teaser text** | "Questions about plans? Ask me." |
| **Starter questions** | Up to 4, shown in the launcher and in the chat |
| **Auto-open after** | Opens the agent after N seconds (0 = never). Once per browser session |

## Page and campaign context

The agent knows the page the visitor is on, the referrer and the UTM campaign (`utm_source`, `utm_medium`, `utm_campaign`, `utm_term`). It uses them to pick examples and demos: a visitor from a "salesforce-integration" campaign hears about Salesforce first.

## JavaScript API

```js
LiveDemo('open', { question: 'Show me pricing' })
LiveDemo('close')
LiveDemo('identify', { email: 'jane@acme.com', name: 'Jane', company: 'Acme' })
LiveDemo('hideLauncher')
LiveDemo('showLauncher')
LiveDemo('on', 'lead', lead => console.log(lead))
```

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

Visitors you `identify` skip the connect form, and their `company` personalizes the demos (see [Personalized Demos](https://livedemo.ai/docs/ai-demo-agent/personalized-demos/)).

---

Next: [Knowledge](https://livedemo.ai/docs/ai-demo-agent/knowledge/)