Shopify Hydrogen

Hydrogen renders your storefront with React Router, so pagent goes into the document <head> in app/root.tsx, with data-await-hydration="true". How you allow it in the Content Security Policy depends on your Hydrogen version.

Hydrogen 2026.4 and earlier

These versions set a Content Security Policy for you, so the script needs the policy’s nonce, and the policy needs pagent’s domains.

Add the script

Add the tag at the top of the <head> in your Layout, with the nonce Hydrogen already gives you:

app/root.tsx

export function Layout({ children }: { children?: React.ReactNode }) {
  const nonce = useNonce();

  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <script
          nonce={nonce}
          src="https://cdn.pagent.ai/js/sdk.js"
          data-client-key="YOUR_CLIENT_KEY"
          data-await-hydration="true"
        />
        <Meta />
        <Links />
      </head>
      <body>
        {children}
        <ScrollRestoration nonce={nonce} />
        <Scripts nonce={nonce} />
      </body>
    </html>
  );
}

Allow pagent in the Content Security Policy

In app/entry.server.tsx, pass pagent’s domains to createContentSecurityPolicy:

app/entry.server.tsx

const { nonce, header, NonceProvider } = createContentSecurityPolicy({
  shop: {
    checkoutDomain: context.env.PUBLIC_CHECKOUT_DOMAIN,
    storeDomain: context.env.PUBLIC_STORE_DOMAIN,
  },
  scriptSrc: [
    "'self'",
    "https://cdn.shopify.com",
    "https://cdn.pagent.ai",
  ],
  connectSrc: [
    "https://cdn.pagent.ai",
    "https://ingest.pagent.ai",
    "https://app.pagent.ai",
  ],
});

Hydrogen’s default policy has no script-src, so scripts fall back to default-src. Once you pass scriptSrc, it contains only your list plus the nonce: keep 'self' and https://cdn.shopify.com in it, and add http://localhost:* for local development. connectSrc is merged with Hydrogen’s defaults.

Tests that change JavaScript also need 'unsafe-eval' in scriptSrc. Without it, those JavaScript changes don’t apply.

Hydrogen 2026.10 and later

Hydrogen 2026.10 removed useNonce and createContentSecurityPolicy: your app owns its Content Security Policy now. Add the same tag without nonce:

app/root.tsx

<script
  src="https://cdn.pagent.ai/js/sdk.js"
  data-client-key="YOUR_CLIENT_KEY"
  data-await-hydration="true"
/>

If your app sets its own policy, add pagent’s domains to it as listed under Frameworks. If you use nonces, pass yours to the tag.

Both versions

Navigation between routes is tracked automatically.

To count orders from Shopify’s checkout, add the order-tracking pixel as on any Shopify store. See Frameworks for the shared rules.

Check it worked

Deploy, then open your site in a private browser window.
Back in pagent, click Check connection in the install step.
Open a test’s preview link and check that the variant shows and stays after the page has finished loading.

Get started

Shop platforms

Frameworks

Other ways

Cookie banners

Hydrogen 2026.4 and earlier

Add the script

Allow pagent in the Content Security Policy

Hydrogen 2026.10 and later

Both versions

Check it worked

​Hydrogen 2026.4 and earlier

​Add the script

​Allow pagent in the Content Security Policy

​Hydrogen 2026.10 and later

​Both versions

​Check it worked

Hydrogen 2026.4 and earlier

Add the script

Allow pagent in the Content Security Policy

Hydrogen 2026.10 and later

Both versions

Check it worked