# Content Assistant

Source: https://docs.aon.pro/guides/content-assistant

> Derived from the same AON Docs release as the source page.

Content Assistant is a Developer Portal placement type that puts an AON-hosted assistant directly on your pages or app screens, instead of a wall or slot your own product renders. Create a **Content Assistant** placement in your application's Placements page in the [Developer Portal](https://developer.aon.pro/), pick which styles it should use, and add the snippet below to the pages that should carry it. Offers come from the whole AON network, matched to the page and to what your users ask — there is nothing to curate.

## Styles

A Content Assistant combines one or more of four styles. They are independent switches — a page can carry more than one at once — and all of them open the same assistant.

| Style id | Shown as | What it does |
| --- | --- | --- |
| `floating` | Floating button | A button in the corner that waits to be tapped. Sits over your page, not in its flow. Optional "Show a prompt message" sub-setting. |
| `mention` | Inline mention | Product mentions in your existing copy become quiet entry points — two or three per page at most. |
| `end` | End of content | Suggested questions at the end of the content, where the reader is deciding what to do next. Optional "Include a question box" sub-setting. Needs a spot (see below). |
| `card` | Inline card | A compact card placed right after the content it relates to, inviting readers to find out more. Needs a spot (see below). |

`end` and `card` sit in the flow of the page, so you mark where each should show with a spot in your code — add both spots once, even for a style that is currently off, so switching styles later in the portal never needs another code change. An empty spot simply shows nothing.

## Add the assistant to your page

Choose the platform your placement's pages run on. Styles are switched on and off from the placement in Developer Portal — the snippet below never changes when you toggle a style, except for which spots you decide to wire up.

### Web

Add this once, before `</body>`, on every page that should carry the assistant. Replace `pl_your_placement_id` with your placement's id:

```html
<!-- Before </body> on every page that should carry the assistant -->
<script
  src="https://cdn.aon.pro/assistant.js"
  data-placement-id="pl_your_placement_id"
  async
></script>
```

> The AON CDN distribution (cdn.aon.pro) hasn't been built yet, so this tag won't load anything in production until it ships.

If your styles include **End of content** or **Inline card**, also mark where each one should appear:

```html
<!-- End of content: right after your article or product text -->
<div data-aon-slot="end-of-content"></div>
 
<!-- Inline card: after the paragraph the card should follow -->
<div data-aon-slot="inline-card"></div>
```

The `data-aon-slot` attribute takes exactly one of two values — `end-of-content` or `inline-card` — matching the style it marks a spot for. `floating` and `mention` need no spot: they render from the base script tag alone.

### iOS / Android

Install the assistant package:

```bash
npm install @agentoffernetwork/assistant
```

> The @agentoffernetwork/assistant npm package hasn't been published yet, so this integration won't run until it's released.

Call it once per screen, with what the screen is showing:

```typescript
import { AonAssistant } from "@agentoffernetwork/assistant";
 
// Once per screen, with what the screen is showing
AonAssistant.attach(screenView, {
  placementId: "pl_your_placement_id",
  context: { title: product.title, body: product.description },
});
```

If your styles include **End of content** or **Inline card**, register a spot for each on the same screen:

```typescript
// End of content: right after your article or product text
AonAssistant.registerSlot(screenView, "end-of-content");
 
// Inline card: after the paragraph the card should follow
AonAssistant.registerSlot(screenView, "inline-card");
```

`AonAssistant.registerSlot(screenView, slot)` takes the same `screenView` you passed to `attach` and one of the two spot values above. `floating` and `mention` need no `registerSlot` call.

> Call `registerSlot`, spelled out in full: `AonAssistant.registerSlot(...)`. The current package has no shorter method of the same purpose — a call that leaves off the `register` prefix will not mark a spot.

## Preview before you publish

The placement's detail page in Developer Portal has its own **Preview** button, separate from **Integration & test**: it renders your currently saved styles against sample content so you can see how the assistant sits on a page before wiring up the snippet. The Preview page shows fixed sample content, not a live call against your real pages.

## Checklist

-   Content Assistant placement created, with at least one style switched on (a placement with no style switched on is a valid but inactive state — visitors would not see the assistant).
-   Snippet added for your platform (Web script tag, or the `@agentoffernetwork/assistant` package for iOS / Android), with your placement's id.
-   A `data-aon-slot="end-of-content"` / `registerSlot(screenView, "end-of-content")` spot added if **End of content** is one of your styles.
-   A `data-aon-slot="inline-card"` / `registerSlot(screenView, "inline-card")` spot added if **Inline card** is one of your styles.

## Next

[Return to Quick Start](https://docs.aon.pro/quickstart)