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

# Magento and Adobe Commerce

> Add pagent to a Magento 2 or Adobe Commerce store through the admin or your theme.

Magento 2 and Adobe Commerce add custom code to the `<head>` of every page through the design configuration. This takes about five minutes.

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 in the admin

**1. Open the design configuration**

In the admin, go to **Content → Design → Configuration**.

**2. Edit your store view**

In the row of the store view your shop runs on, click **Edit** in the **Action** column.

**3. Paste the snippet**

Open **Other Settings → HTML Head** and paste your snippet into **Scripts and Style Sheets**.

**4. Save**

Click **Save Configuration**. Repeat for every store view that should run tests.

**5. Flush the cache**

Go to **System → Tools → Cache Management** and click **Flush Magento Cache**. If you run Varnish or another full-page cache, purge it too.

> [!NOTE]
>
> Magento places this field at the end of `<head>`. pagent still loads before your page shows, so this is fine for most shops. To load it earlier, use your theme instead (below).

## Content Security Policy (Magento 2.4.7 and later)

From Magento 2.4.7, checkout payment pages enforce a Content Security Policy, and every other page reports violations. To keep pagent working everywhere, a developer adds its domains in the `etc/csp_whitelist.xml` of a custom module:

```xml etc/csp_whitelist.xml theme={"dark"}
<?xml version="1.0"?>
<csp_whitelist xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Csp:etc/csp_whitelist.xsd">
    <policies>
        <policy id="script-src">
            <values>
                <value id="pagent-cdn" type="host">https://cdn.pagent.ai</value>
            </values>
        </policy>
        <policy id="connect-src">
            <values>
                <value id="pagent-cdn" type="host">https://cdn.pagent.ai</value>
                <value id="pagent-ingest" type="host">https://ingest.pagent.ai</value>
                <value id="pagent-app" type="host">https://app.pagent.ai</value>
            </values>
        </policy>
    </policies>
</csp_whitelist>
```

Then run `bin/magento cache:flush`.

## Option: your theme (for developers)

To load pagent at the very top of `<head>`, add it from your theme's `Magento_Theme/templates/html/` folder through a block in the `head.additional` container, or with your own head template. Keep it a plain `<script>` tag with the `data-client-key` attribute; layout XML's `<script src>` element can't carry that attribute.

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