Buy with AI widget

The Buy with AI widget gives shoppers an on-page way to hand a purchase to an AI agent they already use. The agent asks what they need, compares the live offerings in your ZeroClick storefront, recommends an option, and completes the purchase only after the shopper approves it. When a shopper picks an agent, the widget fetches a walkthrough prompt from your storefront and opens that agent when a direct handoff is available. It also copies the prompt, so the shopper can paste it if the app does not open. If the prompt cannot load, the widget sends the shopper to your storefront instead. The widget does not contain your catalog, prices, or purchasing instructions. Those stay on your storefront, so the handoff always starts with current information.

Open the visual customizer

Open your store, then go to Discovery listings → Buy with AI → Customize to preview the widget and copy a generated snippet.

Copy the generated snippet from the dashboard when possible. It fills in the storefront URL, store name, and agent-readable discovery attributes for you. The base snippet has one marker element and one hosted script:

<div
  data-zeroclick-buy-with-ai
  data-pay-host="https://acme.pay.zeroclick.io"
  data-seller-name="Acme"
  data-agent-description="Buy with AI is a shopper-initiated handoff that helps an AI evaluate offerings from Acme, recommend one option, and purchase only after explicit approval."
  data-agent-storefront-url="https://acme.pay.zeroclick.io/llms.txt?src=buy-with-ai"
  data-agent-prompt-url="https://acme.pay.zeroclick.io/prompt.txt?src=buy-with-ai"
></div>
<script async src="https://cdn.zeroclick.io/scripts/buy-with-ai.js"></script>

Place the <div> where the widget should render. Replace every Acme value with your own store’s values if you write the snippet by hand. The hosted script can appear anywhere after the marker and can initialize widgets added later by a single-page app.

If you place more than one widget on a page, add a marker for each location but load buy-with-ai.js only once.

The script reads each marker’s attributes when it initializes that widget. To change an attribute after the widget has rendered, replace the marker element so the script initializes it again.

If your site sets a strict Content-Security-Policy, allow script-src for cdn.zeroclick.io and connect-src for your storefront origin. The widget fetches the walkthrough prompt and sends its analytics beacons to that origin.

Required attributes

Keep these attributes in every snippet. The last three make the handoff legible to agents that read the page’s raw HTML without running JavaScript.

Attribute	Value
`data-zeroclick-buy-with-ai`	Marks the element for the hosted widget script. It has no value.
`data-pay-host`	Your storefront origin, such as `https://acme.pay.zeroclick.io` or your custom storefront domain. The widget fetches `/prompt.txt` from this origin.
`data-seller-name`	Your store’s display name. Default copy substitutes it for `{SELLER}`.
`data-agent-description`	A declarative description of the shopper-initiated handoff. Keep the dashboard-generated wording.
`data-agent-storefront-url`	The full URL of your storefront’s `llms.txt`, including `?src=buy-with-ai`.
`data-agent-prompt-url`	The full URL of your storefront’s `prompt.txt`, including `?src=buy-with-ai`.

Customize the layout and actions

Add any optional attribute below to the marker element. Omitted attributes use the defaults shown here.

Attribute	Accepted values	Default	Effect
`data-layout`	`card`, `banner`, or `launcher`	`card`	Selects the widget’s composition. See layouts.
`data-theme`	`auto`, `light`, or `dark`	`auto`	Chooses the widget’s color theme. `auto` follows the visitor’s system preference.
`data-verb`	Text such as `Buy`, `Choose`, or `Book`	Empty	Changes action labels to the form “verb with agent,” such as “Choose with Claude.”
`data-heading`	Any text	Layout default	Replaces the visible heading. This shorthand takes precedence over `data-string-heading`.

Layouts

Value	Best fit
`card`	A full-width benefit block on a homepage, pricing page, or product page.
`banner`	A compact strip below navigation, above the fold, or between sections.
`launcher`	A compact button that expands into an agent-selection card.

Customize the style

Style attributes accept CSS values. Colors accept any valid CSS color; the dashboard emits hexadecimal colors. The widget renders in a shadow root, so these attributes are the most predictable way to align it with your site.

Attribute	Value	Effect
`data-accent`	CSS color	Primary buttons and focus rings.
`data-accent-text`	CSS color	Text placed on the accent color.
`data-background`	CSS color	Widget, menu, and row backgrounds.
`data-text`	CSS color	Headings, body text, buttons, and menu items.
`data-muted-text`	CSS color	Descriptions, secondary labels, and “Powered by” text.
`data-border`	CSS color	Widget, button, menu, and row borders.
`data-radius`	CSS length or `pill`	Corners throughout the widget. The default is `10px`; `pill` resolves to `999px`.
`data-font`	CSS `font-family` value	Widget typography. By default, the widget inherits the page’s font.

For example:

<div
  data-zeroclick-buy-with-ai
  data-pay-host="https://agents.acme.com"
  data-seller-name="Acme"
  data-agent-description="Buy with AI is a shopper-initiated handoff that helps an AI evaluate offerings from Acme, recommend one option, and purchase only after explicit approval."
  data-agent-storefront-url="https://agents.acme.com/llms.txt?src=buy-with-ai"
  data-agent-prompt-url="https://agents.acme.com/prompt.txt?src=buy-with-ai"
  data-layout="banner"
  data-theme="light"
  data-verb="Choose"
  data-heading="Let your agent find the right plan"
  data-accent="#4f46e5"
  data-accent-text="#ffffff"
  data-background="#fafafa"
  data-text="#171717"
  data-muted-text="#525252"
  data-border="#e5e5e5"
  data-radius="12px"
  data-font="Inter, system-ui, sans-serif"
></div>
<script async src="https://cdn.zeroclick.io/scripts/buy-with-ai.js"></script>

Customize the copy

Every copy override uses data-string-{key}. You can change one string without supplying the others, or override the full set to translate the widget. Three placeholders insert runtime values:

{SELLER} inserts data-seller-name.
{BRAND} inserts the selected agent brand, such as Claude or ChatGPT.
{LABEL} inserts the selected agent’s full label after a copy action.

Keep a placeholder in your override when you want that value to appear. No other placeholders are substituted.

Main copy

Attribute	Default	Used by
`data-string-heading`	`We are Agent-optimized`	The `card` and `banner` headings. When set explicitly, it also replaces the `launcher` heading.
`data-string-heading-launcher`	`Buy with AI`	The expanded `launcher` heading when `data-string-heading` is absent.
`data-string-description`	`{SELLER} is agent-optimized. Your AI agent can interview you, compare every option, and buy only what fits.`	The `card` description. When set explicitly, it also replaces the `launcher` description.
`data-string-description-launcher`	`Pick your agent. It asks a few questions, then handles the rest.`	The expanded `launcher` description when `data-string-description` is absent.
`data-string-banner-text`	`{SELLER} is agent-ready. Your AI agent can choose and buy for you.`	Supporting text in the `banner` layout.
`data-string-launcher-label`	`Buy with AI`	The collapsed `launcher` button.

data-heading takes precedence over every heading string. An explicit data-string-description takes precedence over each layout-specific description.

Actions and menus

Attribute	Default	Used by
`data-string-button-label`	`With {BRAND}`	Standard agent buttons.
`data-string-more-options`	`Other options`	The general overflow menu.
`data-string-more-brand-options`	`More {BRAND} options`	The accessible label for a brand button’s menu.
`data-string-copy-prompt`	`Copy prompt`	The clipboard action in an overflow menu.
`data-string-copy-prompt-done`	`Copied`	The clipboard action after a successful copy.
`data-string-item-done`	`Copied - paste into {LABEL}`	A copy-only agent option after a successful copy.

If you set data-verb, it composes the standard labels in English word order. Set data-string-button-label when you need the full label or a different word order; that attribute takes precedence over data-verb.

Status and attribution

Attribute	Default	Used by
`data-string-copy-recovered`	`Couldn't copy automatically. The prompt opened in a new tab.`	Accessible status after the widget recovers from a blocked clipboard write.
`data-string-copy-failed`	`Couldn't copy the prompt. The storefront opened in a new tab.`	Accessible status when both the prompt fetch and clipboard path fail.
`data-string-powered-by`	`Powered by`	Attribution before the ZeroClick.ai link.

data-string-eyebrow, whose default is Agent-optimized, is reserved for a future visible eyebrow label. Current layouts accept the attribute but do not render it.

Override the copy attributes while keeping the runtime placeholders you need:

<div
  data-zeroclick-buy-with-ai
  data-pay-host="https://boulangerie-chirale.pay.zeroclick.io"
  data-seller-name="Boulangerie Chirale"
  data-agent-description="Buy with AI is a shopper-initiated handoff that helps an AI evaluate offerings from Boulangerie Chirale, recommend one option, and purchase only after explicit approval."
  data-agent-storefront-url="https://boulangerie-chirale.pay.zeroclick.io/llms.txt?src=buy-with-ai"
  data-agent-prompt-url="https://boulangerie-chirale.pay.zeroclick.io/prompt.txt?src=buy-with-ai"
  data-string-heading="Optimisé pour les agents IA"
  data-string-description="{SELLER} laisse votre agent IA choisir et acheter pour vous."
  data-string-button-label="Acheter avec {BRAND}"
  data-string-more-options="Autres options"
  data-string-more-brand-options="Plus d'options {BRAND}"
></div>
<script async src="https://cdn.zeroclick.io/scripts/buy-with-ai.js"></script>

The widget’s agent names remain fixed. Translate each surrounding label, menu action, success message, and failure message that can appear in your chosen layout.

Get started

Concepts

Integrate your API

Your agent storefront

Agentify

Page views

Resources

Buy with AI widget

Open the visual customizer

Add the widget

Required attributes

Customize the layout and actions

Layouts

Customize the style

Customize the copy

Main copy

Actions and menus

Status and attribution

Translate the widget

Next steps

Enable agent traffic

How ZeroClick works

Open the visual customizer

​Add the widget

​Required attributes

​Customize the layout and actions

​Layouts

​Customize the style

​Customize the copy

​Main copy

​Actions and menus

​Status and attribution

​Translate the widget

​Next steps

Enable agent traffic

How ZeroClick works

Add the widget

Required attributes

Customize the layout and actions

Layouts

Customize the style

Customize the copy

Main copy

Actions and menus

Status and attribution

Translate the widget

Next steps