Gatsby - pagent.ai Documentation

Gatsby’s <Script> component has no strategy that runs before the page shows, so add pagent to the document head in gatsby-ssr.js:

gatsby-ssr.js

import * as React from "react";

export const onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents([
    <script
      key="pagent"
      src="https://cdn.pagent.ai/js/sdk.js"
      data-client-key="YOUR_CLIENT_KEY"
      data-await-hydration="true"
    />,
  ]);
};

Keep data-await-hydration="true". pagent recognizes Gatsby’s hydration and applies the variant after it.
Navigation with Gatsby’s <Link> is tracked 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.