React

Vite and Create React App

Client-rendered React apps have one HTML file. Add the tag to its <head>, before your app’s script:

index.html

<head>
  <meta charset="utf-8" />
  <script
    src="https://cdn.pagent.ai/js/sdk.js"
    data-client-key="YOUR_CLIENT_KEY">
  </script>
  <!-- your stylesheets and the rest of the head -->
</head>

With Create React App, the file is public/index.html.

No hydration wait. A client-rendered app has no server HTML to hydrate, so leave out data-await-hydration.
Content your app renders later: pagent applies a variant when the page loads and on every route change. If a test targets content that appears only after data has loaded, open the test’s preview link and check that the variant shows.
Routing: React Router’s browser router is tracked automatically. With HashRouter, send a navigate command on every route change, as described in Frameworks.

Remix and React Router (framework mode)

Server-rendered apps render the document in app/root.tsx. Add the tag at the top of its <head>, with data-await-hydration="true":

app/root.tsx

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <script
          src="https://cdn.pagent.ai/js/sdk.js"
          data-client-key="YOUR_CLIENT_KEY"
          data-await-hydration="true"
        />
        <Meta />
        <Links />
      </head>
      <body>
        {children}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

pagent recognizes Remix and React Router hydration, and tracks client-side navigation automatically. See Frameworks for the shared rules and the Content Security Policy.

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

Vite and Create React App

Remix and React Router (framework mode)

Check it worked

​Vite and Create React App

​Remix and React Router (framework mode)

​Check it worked

Vite and Create React App

Remix and React Router (framework mode)

Check it worked