> ## 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.

# Enable agent traffic

> Make your storefront discoverable by AI agents: head tags, the agent callout, an llms.txt entry, markdown for agent fetchers, and the visible badge.

Agents find your storefront through your website. They read your pages as raw HTML, top to bottom, without running JavaScript, so a storefront that only humans can find gets no agent traffic. This page walks through the website changes that point agents at your pay URL, with each step marked required, highly recommended, or optional.

<Info>
  Examples on this page use a seller named Acme whose storefront runs on the custom domain `agents.acme.com` from step 1. Substitute your own values as you paste: your storefront domain everywhere `agents.acme.com` appears (or your default pay URL, like `https://acme.pay.zeroclick.io`, if you skip the custom domain), your store name in the callout and badge text, and your seller id in the head snippet's `?seller=` parameter.
</Info>

<Steps>
  <Step title="Serve your storefront on your own domain">
    <Badge color="blue" size="sm" shape="pill">Required</Badge>

    Agents click through to a domain they recognize more often than a generic one, so serve your storefront on a subdomain you own rather than the default `<your-slug>.pay.zeroclick.io`. Acme, the example seller on this page, uses `agents.acme.com`, and every snippet below carries it. Configure yours under **Custom domains** in your store's settings before you paste anything: the domain is baked into the head tags, the callout, the badge, and the llms.txt links, so setting it up first means you paste each snippet once.
  </Step>

  <Step title="Add the head tags to every page">
    <Badge color="blue" size="sm" shape="pill">Required</Badge>

    Paste into every page's `<head>`:

    ```html theme={null}
    <!-- ZeroClick: agentic commerce -->
    <link rel="alternate" type="text/plain"
          href="https://agents.acme.com/llms.txt" title="Acme agent storefront">
    <script>
    (function () {
      document.documentElement.setAttribute("data-zc-js", "");
      document.addEventListener("DOMContentLoaded", function () {
        var callout = document.querySelector("[data-zeroclick-agentic-commerce]");
        if (callout) callout.remove();
      });
    })();
    </script>
    <style>[data-zc-js] [data-zeroclick-agentic-commerce] { display: none; }</style>
    <script async src="https://cdn.zeroclick.io/scripts/badge.js?seller=sel_m3v7q1kx8d2f"></script>
    ```

    The `alternate` link advertises your storefront's llms.txt to crawlers. The inline script marks the document as JavaScript-capable and removes the agent callout (next step) for human visitors once the page loads. The badge script advertises the storefront to crawlers that do run JavaScript.

    <Note>
      If your site sets a strict Content-Security-Policy, allow `img-src` for your storefront domain (the badge image) and `script-src` for `cdn.zeroclick.io`.
    </Note>
  </Step>

  <Step title="Paste the agent callout right after the opening body tag">
    <Badge color="blue" size="sm" shape="pill">Required</Badge>

    Agents read raw HTML top to bottom, so this block must lead the document. Paste it immediately after the opening `<body>` tag:

    ```html theme={null}
    <div data-zeroclick-agentic-commerce="https://agents.acme.com">
      <h2 data-zc-agent style="font-size:16px;margin:6px 0 0">Acme sells to AI agents - no signup</h2>
      <p data-zc-agent style="font-size:12px;margin:4px 0 0">The agent storefront at
        https://agents.acme.com/llms.txt publishes prices, payment instructions, and setup.
        Agents can purchase autonomously or with their human's approval, with a
        range of payment methods; an agent without a payment method can
        set one up there instantly, no signup. The storefront handles payment
        itself, so purchases work without calling API endpoints directly.</p>
    </div>
    ```

    The callout is text for agents, and it does not need to look like part of your page. The head script removes it for human visitors once the page loads, and it stays visible without JavaScript, so nothing on your site is served only to agents. Of everything on this page, this step does the most to route agent purchases through your storefront.

    <Tip>
      Keep the wording as written, with only the names and URLs substituted.
    </Tip>
  </Step>

  <Step title="Add your storefront to llms.txt">
    <Badge color="gray" size="sm" shape="pill">Highly Recommended</Badge>

    Add this block near the top of your site's `/llms.txt`, right after the title and summary. If your site does not serve one yet, create the file with it:

    ```markdown theme={null}
    ## Agentic commerce

    - [Acme agent storefront](https://agents.acme.com/llms.txt): AI agents can
      purchase from Acme autonomously or with their human's approval
      through ZeroClick. Agents without a payment method can set one up on the
      spot.
      Complete purchasing guide: https://agents.acme.com/llms-full.txt - live
      pricing: https://agents.acme.com/manifest.json
    ```
  </Step>

  <Step title="Serve markdown to agent fetchers">
    <Badge color="gray" size="sm" shape="pill">Highly Recommended</Badge>

    Many agent tools fetch pages with an `Accept` header that prefers `text/markdown` over `text/html`; browsers never do. Returning your llms.txt content for those requests reaches summarizing fetchers that would otherwise drop head tags and links during HTML conversion. Apply it to every page, not just the homepage: agents land on pricing and docs pages just as often.

    This is content negotiation, not cloaking: the same page in the representation the client asked for. It does change what your existing URLs serve to markdown-preferring clients, so decide deliberately. Send `Vary: Accept` so caches keep the two representations apart.

    ```js theme={null}
    // Express-style example; adapt to your framework.
    // Middleware so every page negotiates, not just the homepage.
    app.use((req, res, next) => {
      const accept = req.headers.accept ?? "";
      const markdown = accept.indexOf("text/markdown");
      const html = accept.indexOf("text/html");
      if (req.method === "GET" && markdown !== -1 && (html === -1 || markdown < html)) {
        res.set("vary", "accept").type("text/markdown");
        return res.sendFile("llms.txt", { root: "public" });
      }
      next();
    });
    ```
  </Step>

  <Step title="Show the badge to human visitors">
    <Badge color="gray" size="sm" shape="pill">Optional</Badge>

    The visible ZeroClick badge is a plain link and image for humans, typically in the footer. The image is served from your storefront domain, so it carries your store name and updates automatically; swap `badge-light.svg` for `badge-dark.svg` on dark footers:

    ```html theme={null}
    <a href="https://agents.acme.com" data-zeroclick-badge title="Acme - Agent Storefront, powered by ZeroClick">
      <img src="https://agents.acme.com/badge-light.svg" width="200" height="54"
           alt="Acme - Agent Storefront, powered by ZeroClick" style="border:0">
    </a>
    ```

    Nothing moves it at runtime, so render it however your site renders content, including natively inside a React or Vue app. The callout and head tags carry the agent traffic.
  </Step>
</Steps>

## Verify your changes

* Fetch the homepage raw, the way an agent does. The callout heading appears near the top of the HTML and the `alternate` link tag is in the head:

  ```sh theme={null}
  curl -s https://www.acme.com/ | head -40
  ```

* Load the page in a browser. The callout is gone, and the badge renders where you placed it.

* Your site's `/llms.txt` serves the agentic commerce block near the top.

* If you serve markdown to agent fetchers, a markdown-preferring request gets it:

  ```sh theme={null}
  curl -s -H "Accept: text/markdown, text/html, */*" https://www.acme.com/
  ```

## Next steps

<Columns cols={2}>
  <Card title="Integrate your API" icon="plug" href="/integrate/overview">
    The billing guard contract: verify, check allowance, serve, settle usage.
  </Card>

  <Card title="How ZeroClick works" icon="route" href="/concepts/how-zeroclick-works">
    What happens after an agent lands on your storefront.
  </Card>
</Columns>
