> For the complete documentation index, see [llms.txt](https://docs.saleassist.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.saleassist.ai/saleassist-aiva-widget-integration-guide.md).

# SaleAssist AIVA Widget — Integration Guide

This guide shows how to add the SaleAssist live call widget to your website, and how to pass your own data (user details, cart contents, product info).

#### So that AIVA- our AI video assistant - knows the context before it starts talking to your visitor.

It takes two script tags to get the widget running. Passing context is one extra option.

### 1. Quick start

You need your **Widget ID**. You get it from the SaleAssist dashboard when you create a widget (Dashboard → Widgets → your widget → copy the ID).

Add this to the `<head>` of every page where you want the widget:

```
<script src="https://static.saleassist.ai/widgets/widget.js"></script>
```

Then mount the widget in one of the two ways below.

\> **Order matters.** The `widget.js` script must load before you call `saleassist.mountWidget(...)`. If you see `saleassist is not defined` in the console, the mount call ran before the script finished loading.

#### Option A — Floating widget (default)

The widget appears as a floating launcher on the page. Add this at the end of the `<body>`:

```
<script>
  saleassist.mountWidget({
    id: "YOUR_WIDGET_ID",
    sessionContext: [
      {
        user: {
          name: "Priya Sharma",
          logged_in: true,
          loyalty_tier: "gold",
        },
        cart: {
          items: 2,
          total: 4499,
          currency: "INR",
        },
        page: {
          product: "Bosch Serie 6 Washing Machine",
          price: 42990,
          in_stock: true,
        },
      },
    ],
  });
</script>
```

#### Option B — Your own button opens the widget

The widget stays hidden until the visitor clicks a button you already have on your page:

```
<button
  onclick="saleassist.mountWidget({
    id: 'YOUR_WIDGET_ID',
    form_factor: 'button',
    sessionContext: [
      {
        user: {
          name: 'Priya Sharma',
          logged_in: true,
          loyalty_tier: 'gold',
        },
        cart: {
          items: 2,
          total: 4499,
          currency: 'INR',
        },
        page: {
          product: 'Bosch Serie 6 Washing Machine',
          price: 42990,
          in_stock: true,
        },
      },
    ],
  });"
>
  Talk to us
</button>
```

#### `mountWidget` options

\| Option | Type | What it does |

\| --- | --- | --- |

\| `id` | string (required) | Your Widget ID from the SaleAssist dashboard. |

\| `form_factor` | string | `"button"` for the click-to-open option. Leave out for the default floating widget. |

\| `sessionContext` | array of objects | Your custom data for AIVA. See the next section. |

### 2. Passing custom data as context for AIVA

When a visitor starts an AI call, AIVA joins with a base prompt configured in your dashboard. On top of that, you can hand it **session context**: facts about this visitor, this page, or this cart. AIVA receives them before the conversation starts and can use them in its answers.

With the `sessionContext` shown above, when AIVA picks up the call it already knows it is talking to Priya, a gold-tier customer, looking at a specific washing machine with two items in her cart. It can answer "does this fit my budget?" or "what goes well with what's in my cart?" without asking first.

Replace the sample values with real data from your own site — for example, whatever your backend or data layer knows about the logged-in user, the current page, or the cart.

#### The rules

* **It must be an array of plain objects.** Even for one object, wrap it in `[ ... ]`. If you pass several objects, the widget merges them into one before sending.
* **Values must be plain JSON.** Strings, numbers, booleans, nested objects, arrays. No functions, no DOM elements, no class instances.
* **Never send secrets.** No passwords, API keys, card numbers, or tokens. Treat this like data you'd be comfortable showing in the conversation.
* **Set it at mount time.** The context is read once, when `mountWidget` runs. If the visitor's situation changes (they log in, cart updates), the reliable way to refresh it is to call `mountWidget` again on the next page load with the new data.
* **Use descriptive keys.** `loyalty_tier: "gold"` tells the AI more than `lt: "g"`. The keys themselves are part of what the AI reads.
