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

# Installation Guides

> Choose the right AgentRef installation guide for your framework, site builder, or Stripe checkout setup.

AgentRef only needs one tracking script, but the correct installation point depends on your stack. This section gives you a platform-specific guide for each framework and builder linked from the AgentRef dashboard.

## The AgentRef contract in one minute

1. Install the script on every page where affiliate traffic can land or where checkout can start.
2. Set the program website in AgentRef to the same root domain that serves the script.
3. Keep the user journey on the same root domain when possible. `www.example.com` and `app.example.com` work well together. Different roots like `example.com` and `example-store.com` do not share first-party cookies.
4. If you use Stripe Payment Links, Buy Buttons, or Pricing Tables on the same page, the script is usually enough.
5. If you create Stripe Checkout Sessions yourself, read `window.AgentRef.getCheckoutMetadata()` and pass it into Stripe metadata. See the Stripe guide below.
6. If your buy button lives in a Chrome extension, desktop app, mobile app, or external dashboard, route it through a checkout start page on the website where AgentRef is installed before redirecting to Stripe.
7. If a platform uses its own native ecommerce checkout, do not assume automatic attribution. Several builder guides call this out explicitly.

<Tip>
  Copy the exact script snippet from <code>Settings -> Integration</code> in AgentRef. It already includes your real program ID.
</Tip>

## Framework guides

<CardGroup cols={3}>
  <Card title="Next.js" icon="code" href="/docs/integration/nextdotjs">
    App Router and Pages Router installation for full-site tracking.
  </Card>

  <Card title="React" icon="code" href="/docs/integration/react">
    Install once in your app shell without duplicate script injection.
  </Card>

  <Card title="Vue.js" icon="code" href="/docs/integration/vuedotjs">
    Recommended setup for Vue SPAs and static Vue sites.
  </Card>

  <Card title="Nuxt" icon="code" href="/docs/integration/nuxt">
    Add AgentRef through <code>nuxt.config.ts</code> or a shared layout.
  </Card>

  <Card title="Astro" icon="code" href="/docs/integration/astro">
    Install in a reusable Astro layout that covers all landing pages.
  </Card>

  <Card title="Svelte" icon="code" href="/docs/integration/svelte">
    SvelteKit and plain Svelte installation options.
  </Card>
</CardGroup>

## Website builder guides

<CardGroup cols={3}>
  <Card title="WordPress" icon="globe" href="/docs/integration/wordpress">
    Theme, plugin, and child-theme options for site-wide tracking.
  </Card>

  <Card title="Shopify" icon="shopping-cart" href="/docs/integration/shopify">
    Theme installation plus a clear note about Shopify native checkout limits.
  </Card>

  <Card title="Webflow" icon="globe" href="/docs/integration/webflow">
    Site-wide custom code setup for published Webflow sites.
  </Card>

  <Card title="Framer" icon="globe" href="/docs/integration/framer">
    Framer custom-code setup without extra helper scripts.
  </Card>

  <Card title="Wix" icon="globe" href="/docs/integration/wix">
    Add the script through Wix custom code on all published pages.
  </Card>

  <Card title="Squarespace" icon="globe" href="/docs/integration/squarespace">
    Use code injection for a global AgentRef install.
  </Card>
</CardGroup>

## Stripe guide

<CardGroup cols={1}>
  <Card title="Stripe Checkout Integration" icon="credit-card" href="/docs/integration/stripe">
    Covers hosted Stripe surfaces, custom Checkout Sessions, external app checkout routing, metadata, and verification.
  </Card>
</CardGroup>

## Verify any installation

<Steps>
  <Step title="Open a real affiliate link">
    Use a live test link from AgentRef so the visitor arrives with a real referral parameter like <code>?via=abc123</code>.
  </Step>

  <Step title="Confirm the cookies exist">
    In browser DevTools, check that <code>agentref\_cid</code> and <code>agentref\_pid</code> exist after the page loads.
  </Step>

  <Step title="Run a debug pass">
    Add <code>?agentref\_debug=1</code> to the URL and inspect the browser console. You can also use <code>?agentref\_verify=1</code> on a live page to trigger a tracking-install verification hit.
  </Step>

  <Step title="Check AgentRef diagnostics">
    Use the tracking health panel, the REST endpoint at <code>/api/v1/programs/:id/tracking/status</code>, or the MCP <code>verify\_tracking</code> tool to confirm that the script install was seen and clicks are arriving.
  </Step>
</Steps>

## Related docs

<CardGroup cols={3}>
  <Card title="JavaScript Snippet" icon="code" href="/docs/tracking/javascript-snippet">
    Core script behavior, cookies, parameters, and the DOM API.
  </Card>

  <Card title="Consent and GDPR" icon="shield" href="/docs/tracking/consent-gdpr">
    How to gate AgentRef until the visitor grants consent.
  </Card>

  <Card title="Debug Mode" icon="bug" href="/docs/tracking/debug-mode">
    Inspect runtime state, warnings, and hosted Stripe instrumentation.
  </Card>
</CardGroup>