Install the Knock2 Tracking Script on Your Website

The Knock2 tracking script is the foundation of your visitor identification pipeline. Once embedded in your site’s <head>, it silently captures session data for every visitor and sends it to Knock2’s identification engine — no personally identifiable information is collected on the client side, and the script never blocks your page from loading.

Get the Embed Snippet

Fetch your personalized embed snippet from the API. The response includes a script_url and a ready-to-paste embed_html tag pre-configured with your tenant slug.

curl https://api.knock2.ai/v1/script \
  -H "Authorization: Bearer YOUR_API_KEY"

{
  "data": {
    "product_slug": "your_tenant",
    "script_url": "https://api.knock2.ai/install/your_tenant/prod",
    "embed_html": "<script src=\"https://api.knock2.ai/install/your_tenant/prod\" async></script>"
  }
}

Copy the embed_html value exactly as returned. The script is served directly from Knock2’s API (not a separate CDN domain) — the tenant slug is resolved server-side from your API key and baked into the URL path, so there’s no data-slug attribute to configure.

Add the Script to Your Site

Copy the embed HTML

Copy the full value of embed_html from the API response above. It looks like:

<script src="https://api.knock2.ai/install/your_tenant/prod" async></script>

Paste it inside your site's <head> tag

Place the snippet before the closing </head> tag on every page you want to track. A typical HTML document looks like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Your Site</title>

    <!-- Knock2 tracking script -->
    <script src="https://api.knock2.ai/install/your_tenant/prod" async></script>
  </head>
  <body>
    <!-- your content -->
  </body>
</html>

Deploy your site

Publish the change through your normal deployment process. The script will begin collecting visitor data as soon as the updated page is live and receives its first non-localhost visit.

Verify Installation

Once your site is live, confirm that Knock2 is receiving data by calling the script status endpoint.

curl https://api.knock2.ai/v1/script/status \
  -H "Authorization: Bearer YOUR_API_KEY"

{
  "data": {
    "is_installed": true,
    "visitor_count_last_7_days": 42,
    "last_visit_at": "2024-06-01T14:23:00Z"
  }
}

Field	Description
`is_installed`	`true` when at least one unique non-localhost visitor has been recorded in the last 7 days
`visitor_count_last_7_days`	Total unique visitor IPs recorded in the current 7-day window
`last_visit_at`	ISO 8601 timestamp of the most recent visitor session

If is_installed is false after deploying, double-check that the snippet is present in the rendered HTML of your live site (use your browser’s View Source or DevTools Network tab to confirm the request to your /install/{your_tenant}/prod script URL loads).

Framework-Specific Tips

Next.js

Pages Router (_document.js)Add the script tag inside the <Head> component in pages/_document.js:

import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html>
      <Head>
        <script
          src="https://api.knock2.ai/install/your_tenant/prod"
          async
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

App Router (app/layout.tsx)Use the Next.js <Script> component with strategy="afterInteractive" inside your root layout:

import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head />
      <body>
        {children}
        <Script
          src="https://api.knock2.ai/install/your_tenant/prod"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

WordPress

Option 1 — Header pluginInstall a plugin such as Insert Headers and Footers or WPCode, paste your embed_html snippet into the Header section, and save. The plugin injects the tag site-wide without touching theme files.Option 2 — Theme CustomizerGo to Appearance → Customize → Additional CSS / Custom Scripts (exact label varies by theme). Some themes expose a Custom Header Code field — paste the snippet there. If your theme doesn’t support this natively, use the plugin approach instead to avoid losing the tag on theme updates.

Webflow

Open your Webflow project and go to Site Settings → Custom Code.
Paste your embed_html snippet into the Head Code text area.
Click Save Changes, then publish your site.

The script will load on every page of your published Webflow site. If you only want to track specific pages, use Webflow’s per-page Custom Code section (available on paid plans) under Page Settings → Custom Code → Head Code.

Single Page Apps (React, Vue, Angular, etc.)

Add the snippet once to the index.html file that serves as your app’s shell — typically public/index.html for Create React App / Vite projects. The tracking script listens for browser popstate and hashchange events and intercepts history.pushState calls, so it automatically tracks navigation between client-side routes without any additional configuration.You do not need to call any JavaScript function on each route change — the script handles this transparently.

The script is loaded with the async attribute and has no impact on page load performance. It will never block rendering or delay your site’s DOMContentLoaded event.

Get Started

Core Concepts

Guides

Multi-Tenant

Install the Knock2 Tracking Script on Your Website

Get the Embed Snippet

Add the Script to Your Site

Verify Installation

Framework-Specific Tips

​Get the Embed Snippet

​Add the Script to Your Site

​Verify Installation

​Framework-Specific Tips

Get the Embed Snippet

Add the Script to Your Site

Verify Installation

Framework-Specific Tips