The web embed

Beta

The web embed is in beta. The /v0/ bundle channel is stable, but APIs and theming hooks may still change before general availability.

The Advertising.chat web embed runs flow ads inside standard display slots. A slot starts as a compact teaser — one line of advertiser copy with a sponsored disclosure — and expands on tap into a small conversation the advertiser authored: message bubbles, tappable choices, and an ending action such as a link-out. Serving, pacing, and measurement are the same engine as every other surface; the embed is a thin client (~5KB gzipped, zero dependencies).

Live demo: https://adchat-embed.web.app/demo.html

Install

Drop the script tag inside any sized display container (300×250 or larger works best):

<div style="width:300px;height:250px">
  <script
    src="https://adchat-embed.web.app/v0/adchat-embed.js"
    data-key="YOUR_API_KEY"
    data-ad-unit="YOUR_AD_UNIT"
    async
  ></script>
</div>

Or mount programmatically:

<script src="https://adchat-embed.web.app/v0/adchat-embed.js" async></script>
<script>
  window.addEventListener('load', () => {
    AdChatEmbed.mount(document.getElementById('my-slot'), {
      key: 'YOUR_API_KEY',
      adUnit: 'YOUR_AD_UNIT',
    });
  });
</script>

The API key is your org's publisher key — it is designed to be visible in page source, like any ad tag.

Behavior

• Fetches on visibility, not page load — one ad request per slot, made when the slot first scrolls into view.
• No fill collapses the slot. A 204 from the ad server hides the container entirely; your layout should tolerate the slot being empty.
• Teaser → expand. The collapsed state shows the flow's teaser line and the sponsored disclosure. Expansion starts the conversation; minimizing returns to the teaser without losing progress.
• Choices only (v1). There is no free-text input. Flows that define natural-language intent edges have those edges rendered as additional choice buttons (labeled with the intent's example utterance), so every authored branch stays reachable without an LLM in the page.
• Engagement reporting (node_visit, choice_tap, nlu_match, flow_complete, flow_abandon, handoff_click) is automatic, fire-and-forget, and never carries user-authored text. Link-outs use server-wrapped click URLs, so click tracking works end to end.

Sizing

The embed fills its container (width: 100%; height: 100%) and is designed for standard display sizes — 300×250 minimum, and anything larger (300×600, 336×280, responsive containers). If the container has no fixed height, the embed sets a 250px minimum.

Theming

The embed renders in a shadow root, so publisher CSS cannot leak in — and the embed's styles cannot leak out. Theming crosses the boundary through CSS custom properties set on the container (or any ancestor):

.ad-slot {
  --adchat-accent: #0f766e; /* buttons, user bubbles */
  --adchat-accent-contrast: #ffffff;
  --adchat-bg: #f8fafc; /* widget background */
  --adchat-surface: #ffffff; /* header / options background */
  --adchat-border: #e2e8f0;
  --adchat-text: #0f172a;
  --adchat-muted: #64748b; /* disclosure, secondary text */
  --adchat-bubble: #eef2f7; /* ad message bubbles */
  --adchat-radius: 14px;
  --adchat-font: 'Inter', system-ui, sans-serif;
}

Every property is optional; the default theme is a neutral warm palette. The sponsored disclosure is always rendered and cannot be styled away.

Bundle channels

URL	Meaning
https://adchat-embed.web.app/v0/adchat-embed.js	v0 channel — use this in production
https://adchat-embed.web.app/latest/adchat-embed.js	Tracking channel — newest build, may change