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

# Gatsby

> Add pagent to a Gatsby site.

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

```jsx gatsby-ssr.js theme={"dark"}
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](https://www.pagent.ai/docs/install/frameworks.md) for the shared rules and the Content Security Policy.

## Check it worked

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


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.