Add the web embed to a page¶
The web embed is a script that runs flow ads inside a standard display slot on a web page. The slot starts as a one-line teaser with the sponsored disclosure, and expands on tap into the advertiser's short conversation of messages, choices, and an ending action. The script is about 5 KB gzipped and has no dependencies. This document describes how to add the embed to a page and how to theme it.
Beta
The web embed is in beta. The v0 bundle is stable, and its options and
theme properties can still change before general availability.
To see the embed running, open the live demo.
Before you begin¶
- Get an Advertising.chat account and your fetch key. The key appears in the page source, like any ad tag.
- The embed shows only flow ads, which are served from your own org's rules. Work with the Advertising.chat team to set up an ad unit with flow ads, and note its code. See Flow ads.
- Plan a slot of at least 300 by 250 pixels. Larger standard sizes, such as 300 by 600 or 336 by 280, and responsive containers also work.
Add the embed¶
Use a script tag or mount the embed from your own script.
Add a script tag¶
Place the script tag inside a sized container:
<div style="width:300px;height:250px">
<script
src="https://adchat-embed.web.app/v0/adchat-embed.js"
data-key="YOUR_FETCH_KEY"
data-ad-unit="YOUR_AD_UNIT"
async
></script>
</div>
Both data-key and data-ad-unit are required.
Mount it from a script¶
To control when the embed starts, load the script once and call
AdChatEmbed.mount with the container element:
<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_FETCH_KEY',
adUnit: 'YOUR_AD_UNIT',
});
});
</script>
How the slot behaves¶
The embed fills its container. If the container is shorter than 100 pixels, the embed sets a minimum height of 250 pixels. Once mounted, the embed works as follows:
- It requests one flow when the slot first scrolls into view, not when the page loads.
- If no flow fits, the slot collapses and hides the container, so your layout must tolerate an empty slot.
- Tapping the teaser starts the conversation. Minimizing it returns to the teaser and keeps the person's place.
- The person answers with choice buttons only. A flow's intents appear as extra buttons, labeled with each intent's first example, so every branch stays reachable.
- It reports flow events automatically and never sends what the person typed. Links are click-tracking URLs.
Theme the embed¶
The embed renders in a shadow root, so your page's CSS doesn't reach it and its CSS doesn't reach your page. To theme it, set these custom properties on the container or any ancestor:
.ad-slot {
--adchat-accent: #0f766e; /* buttons, the person's bubbles */
--adchat-accent-contrast: #ffffff;
--adchat-bg: #f8fafc; /* widget background */
--adchat-surface: #ffffff; /* header and choices background */
--adchat-border: #e2e8f0;
--adchat-text: #0f172a;
--adchat-muted: #64748b; /* disclosure and secondary text */
--adchat-bubble: #eef2f7; /* advertiser message bubbles */
--adchat-radius: 14px;
--adchat-font: 'Inter', system-ui, sans-serif;
}
Every property is optional. The sponsored disclosure always renders and can't be hidden by a theme.
Choose a bundle channel¶
| URL | Use |
|---|---|
https://adchat-embed.web.app/v0/adchat-embed.js |
The v0 channel. Use it in production. |
https://adchat-embed.web.app/latest/adchat-embed.js |
The newest build, which can change at any time. |