Standard HTML Installation

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:

Right-click the page and select View Page Source
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

Next.js / React

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>')"
  }}
/>

Vue / Nuxt

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>')"
        }
      ]
    }
  }
})

Astro

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>

Static HTML

Simply add the snippet to every page’s <head>, or to a shared header include file.

Troubleshooting

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>

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

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

Need Help?

Contact Support

Get help with installation

Overview

HubSpot

Gmail

JavaScript Snippet

Standard HTML Installation

Step 1: Open Your HTML

Step 2: Add the Snippet

Step 3: Save and Deploy

Verify Installation

Framework-Specific Notes

Troubleshooting

Need Help?

Contact Support

​Step 1: Open Your HTML

​Step 2: Add the Snippet

​Step 3: Save and Deploy

​Verify Installation

​Framework-Specific Notes

​Troubleshooting

​Need Help?

Contact Support

Step 1: Open Your HTML

Step 2: Add the Snippet

Step 3: Save and Deploy

Verify Installation

Framework-Specific Notes

Troubleshooting

Need Help?