aon.js Web Plugin

aon.js is the script that puts a Content Assistant placement on a web page. Add it once per page and it reads the placement's styles from AON, draws them, opens the chat panel, and attributes everything to the placement. This page is the reference for the tag, the DOM it expects and creates, the requests it makes, and the window.AON API. For the step-by-step setup, read the Content Assistant guide first.

The tag

<script
  src="https://plugin.aon.pro/aon.js"
  data-placement-id="plc_your_placement_id"
  data-lang="en"
  referrerpolicy="origin"
  async
></script>

Put it once on every page, before </body>, normally in the shared layout. A second copy on the same page does nothing.

data-prewarm values are case-sensitive. An invalid data-placement-id or data-prewarm is ignored with one console.debug line and never replaces an earlier valid value.

If document.currentScript is not available to the script (bundled, loaded as a module, or inlined by a tag manager), the attributes cannot be read. Then load it with a classic non-async tag and call AON.init({ placementId: "…" }) synchronously right after it. The placement id is fixed when the document finishes parsing (DOMContentLoaded), or earlier if the panel is opened before that; a later init only logs a debug line.

What the script draws

The placement's styles are switched on and off in the Developer Portal. The script fetches that setup on load and, once the document has parsed, draws what is on:

The spot renders nothing until AON has read the page (see Requests). Leave the div empty with no fixed height; the script appends its own nodes and removes them again when the page's reading is no longer valid. One spot per page: only the first is used.

On every page the script also adds a page-level div[data-aon-chat] shell that holds the chat panel and a one-line disclosure, "Sponsored results by agent offer network (AON)", linking to aon.pro with rel="sponsored nofollow noopener". The panel itself is a cross-origin <iframe title="AON"> from https://plugin.aon.pro, sandboxed (allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox, no top navigation) with allow="web-share; clipboard-write" and referrerpolicy="origin". Everything the assistant says, every offer and every price lives inside that iframe; the host page never receives offer data.

Page requirements

• HTTPS. On an http:// page the script still loads and the floating button still opens the panel, but AON never reads the page, so the End of content spot stays empty and the panel opens without suggestions.
• Own domain. AON reads a page by fetching its public URL. Pages behind a login or on shared preview domains (*.vercel.app, *.netlify.app, *.pages.dev, *.github.io, tunnels) are not read.
• Single-page apps. AON reads a page on a full load. After a client-side route change (pushState, replaceState, popstate) the script hides the suggestions it drew for the previous URL and does not read the new one until the next full load (or until init({ lang }) changes the locale, which reads the current URL). The chat panel keeps working.

Content-Security-Policy

If the page sends one, allow:

script-src  https://plugin.aon.pro
frame-src   https://plugin.aon.pro
connect-src https://plugin.aon.pro https://api.aon.pro

No style-src change is needed: styles are set property by property, never through injected <style> elements or style attributes.

Requests

The script makes three kinds of requests. None carries page text, query strings, hashes or anything read from the DOM.

Two localStorage keys may be written on your origin: aon:setup:<placement_id> (above) and aon:did:<publisher_id> (a random, persistent device identity created the first time the panel connects). Neither contains data from your page.

JavaScript API

window.AON has exactly four keys: version, init, placement and chat. version, placement and chat are read-only, and placement and chat are frozen objects. Methods never throw: init and placement ignore invalid values, chat.open with non-object options behaves as open() and warns, and invalid input fields come back as invalid in the result event.

AON.version

The script's version string.

AON.init(config)

Publisher-level configuration. Every field is optional and a missing field keeps its current value; the tag's data-* attributes go through the same call before window.AON exists.

AON.placement

Manual control of the two web styles. These calls always work, whatever the portal switches say, and they take precedence: once you have called one of them on a page, the script no longer draws that style automatically there. Each returns a function that removes what the call drew and nothing else.

// Floating button: "icon" alone, or "prompt" = icon plus the suggestion bubble.
const removeButton = AON.placement.floating("prompt");
 
// End of content, into a container you own. "ask" = questions + text box, "buttons" = questions only.
const removeSpot = AON.placement.endOfContent({
  container: document.querySelector('[data-aon-slot="end-of-content"]'),
  variant: "ask",
});

floating keeps at most one button on the page; a second valid call replaces the first. endOfContent draws only when AON has read the page and clears itself when that reading stops being valid.

AON.chat

Direct control of the chat panel, for sites that build their own entry points. The placement styles use these same methods.

input is a plain object:

const inputId = AON.chat.open({
  input: { message: "Which of these laptops is best for video editing?" },
});
AON.chat.on("result", ({ inputId: id, results }) => {
  if (id === inputId) console.log(results);
});

Panel languages

data-lang, init({ lang }) and presentation.lang accept the same set, case-insensitively. For Chinese, a Hant script subtag or a TW, HK or MO region selects Traditional; anything else is Simplified. Other tags are matched on their primary subtag (pt-BR → pt); an unknown tag falls back to English. The assistant's answers follow the language the visitor writes in, not this setting.

Attribution

The placement id on the tag is the only attribution you need. It travels with the panel to the chat backend as aon_pid, which adds X-AON-Placement-Id to every offer query it makes, so impressions, clicks and conversions land on the placement's application in the Developer Portal. Conversions arrive on the application's conversion Webhook.

Verify an integration

1. curl -s https://your-site/page | grep -c 'data-placement-id="plc_…"' returns 1, and the same for data-aon-slot="end-of-content".
2. curl -s https://api.aon.pro/v1/public/placements/plc_…/setup returns "status": "live" and a non-empty styles list.
3. On the live page, the floating button appears and opens an <iframe title="AON"> whose src contains aon_pid=plc_…. The End of content spot fills with questions once AON has read the page; a page AON has never seen can take a while on its first visit.
4. For details, open the browser console with the Verbose level: loader messages start with [AON].

The Developer Portal's Copy for LLM button on the placement page gives a coding agent this integration as a runbook, including a Playwright script that performs the checks above.