> ## 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.

# Framer

> Add pagent to your Framer site with custom code.

Framer adds custom code to every page of your site from the site settings.

Copy your pagent snippet. You find it in the install step after you start your trial, and any time later in pagent under **Settings → Setup**. It looks like this, with your own client key:

```html theme={"dark"}
<script
  src="https://cdn.pagent.ai/js/sdk.js"
  data-client-key="YOUR_CLIENT_KEY">
</script>
```

Paste it unchanged. Don't add `async`, `defer` or `type="module"`: pagent needs to load before your page shows, so visitors never see the original flash.

## Add the snippet as custom code

**1. Open the code settings**

Open **Site Settings → Code**. On older projects, it's under **Site Settings → General → Custom Code**.

**2. Add your snippet**

Add a new code entry and paste your snippet.

**3. Place it at the start of the head**

Set the placement to **Start of `<head>`**, run it on **all pages**, and once per page.

**4. Publish**

Save and publish your site. Framer doesn't run custom code on the canvas or in the preview, only on the published site.

## Check it worked

1. Open your site in a private browser window, so no cached version shows.
2. Back in pagent, click **Check connection** in the install step. If you've finished setup already, open **Settings → Setup**: it shows **You are ready** once pagent has received visits from your site.
3. pagent loads your live site and looks for the snippet. When it finds it, you can start your first test.

> [!TIP]
>
> pagent couldn't find the snippet? Make sure you published or saved the change on your live site, then check again. If you installed it through Google Tag Manager, open your site once in a normal browser window first.


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