Skip to main content
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: 
<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: 
<!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>
The snippet must be the very first thing in your <head> to prevent a flash of unpersonalized content.

​
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

For Next.js, add the snippet to your root layout using dangerouslySetInnerHTML:
// 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:
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>')"
  }}
/>
For Nuxt 3, add to nuxt.config.ts:
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>')"
        }
      ]
    }
  }
})
Add to your layout’s <head>:
---
// 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>
Simply add the snippet to every page’s <head>, or to a shared header include file.

​
Troubleshooting

  • Check for typos in the snippet
  • Ensure there are no JavaScript errors blocking execution
  • Verify the snippet is inside <head>, not <body>
  • 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
  • Make sure the snippet is the very first thing in your <head>
  • Ensure no other scripts are blocking Pockla from loading

​
Need Help?

Contact Support

Get help with installation