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

# Standard HTML Installation

> Add Pockla to any website with HTML access

Adding the Pockla snippet to your website's `<head>` section takes just a few minutes.

## Step 1: Open Your HTML

Locate the HTML file that contains your site's `<head>` section. This is typically:

* `index.html` for static sites
* A layout or template file for frameworks
* Your theme's header file for CMS platforms

## Step 2: Add the Snippet

Copy the Pockla snippet:

```html theme={null}
<script>var p=new URLSearchParams(location.search).get('pklid');if(p)document.write('<script src="https://embed.pockla.io/'+p+'.js"><\/script>');</script>
```

Paste it at the very top of your `<head>` section:

```html theme={null}
<!DOCTYPE html>
<html>
<head>
  <script>var p=new URLSearchParams(location.search).get('pklid');if(p)document.write('<script src="https://embed.pockla.io/'+p+'.js"><\/script>');</script>

  <!-- Your other head content -->
  <meta charset="UTF-8">
  <title>Your Site</title>
  ...
</head>
```

<Warning>
  The snippet must be the very first thing in your `<head>` to prevent a flash of unpersonalized content.
</Warning>

## Step 3: Save and Deploy

Save your changes and deploy to your live site.

## Verify Installation

Open your site in a browser and check that the snippet is present:

1. Right-click the page and select **View Page Source**
2. Search for `pklid` — you should see the Pockla snippet in the `<head>` section

The snippet only activates when a visitor arrives via a Pockla link, so it won't make any network requests on a normal page load. To see it in action, send yourself a Pockla link and click through to your site.

## Framework-Specific Notes

<AccordionGroup>
  <Accordion title="Next.js / React">
    For Next.js, add the snippet to your root layout using `dangerouslySetInnerHTML`:

    ```jsx theme={null}
    // app/layout.tsx
    export default function RootLayout({ children }) {
      return (
        <html>
          <head>
            <script
              dangerouslySetInnerHTML={{
                __html: "var p=new URLSearchParams(location.search).get('pklid');if(p)document.write('<script src=\"https://embed.pockla.io/'+p+'.js\"><\\/script>')"
              }}
            />
          </head>
          <body>{children}</body>
        </html>
      )
    }
    ```

    Or use `next/script` with `beforeInteractive` strategy:

    ```jsx theme={null}
    import Script from 'next/script'

    <Script 
      id="pockla"
      strategy="beforeInteractive"
      dangerouslySetInnerHTML={{
        __html: "var p=new URLSearchParams(location.search).get('pklid');if(p)document.write('<script src=\"https://embed.pockla.io/'+p+'.js\"><\\/script>')"
      }}
    />
    ```
  </Accordion>

  <Accordion title="Vue / Nuxt">
    For Nuxt 3, add to `nuxt.config.ts`:

    ```typescript theme={null}
    export default defineNuxtConfig({
      app: {
        head: {
          script: [
            {
              innerHTML: "var p=new URLSearchParams(location.search).get('pklid');if(p)document.write('<script src=\"https://embed.pockla.io/'+p+'.js\"><\\/script>')"
            }
          ]
        }
      }
    })
    ```
  </Accordion>

  <Accordion title="Astro">
    Add to your layout's `<head>`:

    ```astro theme={null}
    ---
    // src/layouts/Layout.astro
    ---
    <html>
      <head>
        <script is:inline>var p=new URLSearchParams(location.search).get('pklid');if(p)document.write('<script src="https://embed.pockla.io/'+p+'.js"><\/script>');</script>
      </head>
      <body>
        <slot />
      </body>
    </html>
    ```
  </Accordion>

  <Accordion title="Static HTML">
    Simply add the snippet to every page's `<head>`, or to a shared header include file.
  </Accordion>
</AccordionGroup>

## Troubleshooting

<AccordionGroup>
  <Accordion title="Snippet not loading">
    * Check for typos in the snippet
    * Ensure there are no JavaScript errors blocking execution
    * Verify the snippet is inside `<head>`, not `<body>`
  </Accordion>

  <Accordion title="Personalization not appearing">
    * Confirm the URL includes a valid `pklid` parameter
    * Confirm you've published personalization rules in Pockla
    * Check that the visitor matches your targeting criteria
    * Clear your browser cache and reload
  </Accordion>

  <Accordion title="Flash of unpersonalized content">
    * Make sure the snippet is the very first thing in your `<head>`
    * Ensure no other scripts are blocking Pockla from loading
  </Accordion>
</AccordionGroup>

## Need Help?

<Card title="Contact Support" icon="headset" href="mailto:support@pockla.io">
  Get help with installation
</Card>
