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

# WooCommerce and WordPress

> Add pagent to your WooCommerce shop or WordPress site with a free header plugin.

The easiest way is the free plugin **WPCode**, which adds code to the `<head>` of every page. This works for classic and block themes.

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 with WPCode

**1. Install WPCode**

In your WordPress admin, go to **Plugins → Add New**, search for **WPCode**, then click **Install Now** and **Activate**.

**2. Open the header settings**

Go to **Code Snippets → Header & Footer**.

**3. Paste the snippet**

Paste your snippet into the **Header** box.

**4. Save**

Click **Save Changes** at the top right.

**5. Clear your cache**

If you use a caching plugin, clear its cache so visitors get the new version.

## Using a speed or caching plugin?

Plugins that delay or defer JavaScript would load pagent too late and cause flicker. Exclude pagent there:

* **WP Rocket:** go to **File Optimization**. Add `cdn.pagent.ai/js/sdk.js` to **Excluded JavaScript Files** under both **Load JavaScript deferred** and **Delay JavaScript execution**.
* **LiteSpeed Cache:** go to **Page Optimization → Tuning**. Add `cdn.pagent.ai/js/sdk.js` to **JS Deferred/Delayed Excludes**, and to **JS Excludes** if you combine or minify JavaScript.
* **Other plugins:** look for a setting that excludes scripts from deferring, delaying or combining, and add `cdn.pagent.ai/js/sdk.js`.

## Prefer code over a plugin?

Add the snippet through the `wp_head` hook in your **child theme's** `functions.php`, with an early priority so it loads near the top of `<head>`:

```php theme={"dark"}
add_action('wp_head', function () {
    echo '<script src="https://cdn.pagent.ai/js/sdk.js" data-client-key="YOUR_CLIENT_KEY"></script>';
}, 1);
```

Use a child theme, so the change survives theme updates.

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