> ## Documentation Index
> Fetch the complete documentation index at: https://docs.zeroclick.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Buy with AI widget

> Add a Buy with AI handoff to your website, then customize its layout, copy, colors, corners, and typography with data attributes.

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.

<Card title="Open the visual customizer" icon="sliders-horizontal" href="https://dashboard.zeroclick.io">
  Open your store, then go to **Discovery listings → Buy with AI → Customize** to preview the widget and copy a generated snippet.
</Card>

## Add the widget

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:

```html theme={null}
<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.

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

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.

<Note>
  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.
</Note>

### 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](#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:

```html theme={null}
<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.                                   |

<Note>
  `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.
</Note>

## Translate the widget

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

```html theme={null}
<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.

## Next steps

<Columns cols={2}>
  <Card title="Enable agent traffic" icon="magnet" href="/website/enable-agent-traffic">
    Add the website signals that help agents discover your storefront directly.
  </Card>

  <Card title="How ZeroClick works" icon="route" href="/concepts/how-zeroclick-works">
    Follow discovery, payment, forwarding, and settlement end to end.
  </Card>
</Columns>