# Add the chat to your website

> Install Aura's chat with one script tag, choose the sites it may run on, hide it on some pages, and tell the bot who is signed in.

## Allow your sites

The chat only loads on the sites you list, so a copied snippet can't run on someone else's site.

1. Open your bot and go to the **Go live** step.
2. Under **Website**, in **Allowed origins**, add each site's address on its own line, such as `https://www.example.com`. Use only the scheme and host, with no path. A port is allowed for local testing.
3. Choose **Save**.

You can list up to 20 sites. With none listed, the chat won't appear on your live site even with the snippet in place.

## Paste the snippet

Under **Embed** on the same step, choose **Copy** and paste the snippet just before `</body>` on every page, usually in your site's layout or footer template:

```html
<script async src="https://aura.oneinfer.ai/widget.js" data-bot-id="bot_…"></script>
```

![The Go live step's Embed section with the snippet to copy](https://aura.oneinfer.ai/docs/images/bot-embed.webp "Go live, Embed, demo bot")

The script loads after your page, so it doesn't slow it down. The chat button appears in the corner you chose in [Look](https://aura.oneinfer.ai/docs/bots/chat-widget).

### Single-page apps

Nothing extra is needed. The chat notices when your app changes the address (through `history.pushState`, `replaceState` or the back button) and treats each new address as a page view. Hidden pages and the teaser message follow the new page too.

## Hide the chat on some pages

In **Look**, under **More options**, list paths in **Don't show the chat on**, one per line. Each covers the pages under it, so `/account` also hides it on `/account/settings`.

Most sites leave the chat off sign-in, sign-up and password pages, checkout and payment, legal pages, and any part with its own help, such as an app or dashboard. Visits to hidden pages still show on Live.

**Hide the chat on phones** removes it, launcher included, on screens up to 640 px wide.

## Tell the bot who is signed in

If your site has signed-in users, you can pass their details. The bot uses them to answer (never the email), and your team sees them on Live and in Chats. Anyone can change these values in their own browser, so treat them as a hint, not proof of who someone is.

Add `data-visitor-*` attributes to the snippet, filled in by your site:

```html
<script async src="https://aura.oneinfer.ai/widget.js" data-bot-id="bot_…"
  data-visitor-id="{{user.id}}"
  data-visitor-name="{{user.name}}"
  data-visitor-email="{{user.email}}"
  data-visitor-plan="{{user.plan}}"></script>
```

| Attribute | Who sees it |
|---|---|
| `data-visitor-name` | The bot and your team |
| `data-visitor-email` | Your team only |
| `data-visitor-id` | Your team only. It also joins this person's visits into one [journey](https://aura.oneinfer.ai/docs/visits). |
| `data-visitor-<anything>` | The bot and your team, as a detail: `data-visitor-credits-left` shows as "credits left" |

For visitors who aren't signed in, leave the values empty and they stay anonymous. Names and ids can be up to 100 characters and emails up to 200; you can add up to 20 details of up to 200 characters each.

In a single-page app, call `setVisitor` after sign-in and sign-out instead:

```js
window.Aura?.setVisitor({ id: user.id, name: user.name, email: user.email, details: { plan: user.plan } });
window.Aura?.setVisitor(null); // after sign-out
```

The **Optional: tell the bot who is signed in** panel under **Embed** builds the snippet for you, and the [guide for your developer](https://aura.oneinfer.ai/guides/visitor-details.html) has examples for PHP, WordPress, Django and Rails.

> [!NOTE]
> Calls made while the chat is still loading wait for it, and run once it's ready. `window.Aura` itself appears when Aura's script starts, which is why the examples use `window.Aura?.`. If your code might run before that (the script loads with `async`), put this line above the snippet, and calls from the very start of the page are kept too:
>
> ```html
> <script>window.Aura=window.Aura||{q:[],track:function(){this.q.push(['track',[].slice.call(arguments)])},setVisitor:function(){this.q.push(['setVisitor',[].slice.call(arguments)])}};</script>
> ```
>
> If the chat doesn't load (the bot is paused, or the site isn't allowed), the calls are dropped.

## Count goals with events

Call `window.Aura.track` when something worth counting happens, such as a sign-up or a purchase:

```js
window.Aura?.track('signup', { value: 49 });
```

Add a matching event goal in **Go live**, under **Analytics**, and Insights shows how many visits reached it and how many chatted first. See [Goals and events](https://aura.oneinfer.ai/docs/insights/goals).

## Check it works

1. Open your site in a private window.
2. The chat button should appear in the corner. Open it and ask a question your pages answer.
3. In Aura, open [Live](https://aura.oneinfer.ai/docs/live): you're listed with the page you're on, and your chat is there.

If the button doesn't appear:

- Check the site's exact address is in **Allowed origins** (with or without `www`, as your site uses it).
- Check the bot is switched on, under **On or off** in **Go live**.
- Check the page isn't in **Don't show the chat on**.
- If your site sends a Content-Security-Policy, it must allow `https://aura.oneinfer.ai` in `script-src`, and `https://aura.oneinfer.ai`, `https://api.oneinfer.ai` and `wss://api.oneinfer.ai` in `connect-src`.