Skip to main content
Adding the Pockla personalization script 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 Script

Copy the Pockla script: 
<script src="https://cdn.pockla.io/pockla.min.js"></script>
Paste it directly after the opening <head> tag: 
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.pockla.io/pockla.min.js"></script>
  
  <!-- Your other head content -->
  <meta charset="UTF-8">
  <title>Your Site</title>
  ...
</head>
Place the script as early as possible in the <head> to prevent flicker. Don’t add async or defer attributes—these disable the anti-flicker functionality.

​
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 it’s working:
  1. Open Developer Tools (F12 or right-click → Inspect)
  2. Go to the Network tab
  3. Reload the page
  4. Filter by “pockla”
  5. You should see pockla.min.js loading successfully

​
Framework-Specific Notes

For Next.js, add the script to your root layout:
// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <script src="https://cdn.pockla.io/pockla.min.js" />
      </head>
      <body>{children}</body>
    </html>
  )
}
Or use next/script with beforeInteractive strategy:
import Script from 'next/script'

<Script 
  src="https://cdn.pockla.io/pockla.min.js" 
  strategy="beforeInteractive" 
/>
For Nuxt 3, add to nuxt.config.ts:
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        { src: 'https://cdn.pockla.io/pockla.min.js' }
      ]
    }
  }
})
Add to your layout’s <head>:
---
// src/layouts/Layout.astro
---
<html>
  <head>
    <script src="https://cdn.pockla.io/pockla.min.js"></script>
  </head>
  <body>
    <slot />
  </body>
</html>
Simply add the script to every page’s <head>, or to a shared header include file.

​
Troubleshooting

  • Check for typos in the script URL
  • Ensure there are no JavaScript errors blocking execution
  • Verify the script tag is inside <head>, not <body>
  • Confirm you’ve published personalization rules in Pockla
  • Check that the visitor matches your targeting criteria
  • Clear your browser cache and reload
  • Move the script earlier in the <head> (right after the opening tag)
  • Remove any async or defer attributes
  • Ensure no other scripts are blocking Pockla from loading

​
Need Help?

Contact Support

Get help with installation