Install the NOCK Feedback Widget

Add the NOCK feedback widget to any website by copying the project-specific script tag from Settings > Embed.

The fastest way to get NOCK running on your site is a single <script> tag. Paste it into your HTML once and the widget appears on every page that loads that file.

You get the exact snippet from your project in Settings > Embed. That tab also shows the current project token and lets you regenerate it if a token is exposed.

Copy the snippet

Open Settings > Embed

In the NOCK Dashboard, select the project you want to install and open Settings > Embed.

Copy the script tag

Use the Script Tag method and copy the generated snippet. It already contains the correct project token and API base for your environment.

Paste before body close

Add the snippet just before the closing </body> tag, or in your framework's global layout/footer script area.

Always copy the snippet from Settings > Embed instead of hand-writing it. The Dashboard is the source of truth for the token, API base, and asset origin. CDN/SRI distribution is a future rollout and is not required for the current production install.

Attribute reference

Attribute	Required	Description
`src`	Yes	Widget script URL. Current production uses `https://nocknock.cloud/widget/nock.js`.
`data-token`	Yes	The project token shown in Settings > Embed.
`data-project-token`	Alternative	The custom element uses this internally. Script tags can use either `data-token` or `data-project-token`.
`data-api-base`	Optional	API base URL. The Dashboard includes it when needed; production normally uses `https://nocknock.cloud`.
`data-asset-base`	Optional	Asset origin for `nock.css`. Usually inferred from the script `src`; set it only for custom hosting or split asset setups. Screenshot and pin capture currently load `nock-capture-runtime.js` from `data-api-base`.

Token rotation

Use Regenerate Token in Settings > Embed only when the current widget token has leaked or must be rotated.

Warning

Regenerating the token immediately invalidates the old token. Any website still using the old snippet will stop loading the widget until you deploy the new snippet.

Content Security Policy

If your site uses CSP headers, allow the widget script, stylesheet, screenshot runtime, API requests, image loading, and Shadow DOM styles:

Content-Security-Policy:
  script-src 'self' https://nocknock.cloud;
  connect-src 'self' https://nocknock.cloud;
  img-src 'self' data: https://*.supabase.co;
  style-src 'self' https://nocknock.cloud 'unsafe-inline';
  frame-ancestors 'none';

The main script loads nock.css for Shadow DOM styles. Screenshot and pin capture load nock-capture-runtime.js only when the user starts those actions. Include https://nocknock.cloud in script-src, style-src, and connect-src. If a future CDN snippet is enabled for your workspace, allow that CDN origin too.

Framework examples

Plain HTML

Add the snippet inside your main layout file or any HTML page where you want the widget to appear, just before </body>.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My App</title>
  </head>
  <body>
    <!-- your page content -->

    <!-- Paste the exact snippet from Settings > Embed here. -->
    <script src="https://nocknock.cloud/widget/nock.js" data-token="YOUR_PROJECT_TOKEN" data-api-base="https://nocknock.cloud"></script>
  </body>
</html>

Next.js (App Router — `layout.tsx`)

In the App Router, add the script to your root app/layout.tsx so it loads on every page. Use Next.js's built-in <Script> component with strategy="lazyOnload" to avoid blocking the main thread.

import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://nocknock.cloud/widget/nock.js"
          data-token="YOUR_PROJECT_TOKEN"
          data-api-base="https://nocknock.cloud"
          strategy="lazyOnload"
        />
      </body>
    </html>
  );
}

Next.js (Pages Router — `_document.tsx`)

If you use the Pages Router, add the script to your custom _document.tsx inside the <body> element.

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

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <Main />
        <NextScript />
        <script src="https://nocknock.cloud/widget/nock.js" data-token="YOUR_PROJECT_TOKEN" data-api-base="https://nocknock.cloud" />
      </body>
    </Html>
  );
}

Nuxt (`app.vue`)

In a Nuxt project, use the useHead composable (or the <Head> component) to inject the script globally from app.vue.

<script setup>
useHead({
  script: [
    {
      src: "https://nocknock.cloud/widget/nock.js",
      "data-token": "YOUR_PROJECT_TOKEN",
      "data-api-base": "https://nocknock.cloud",
      defer: true,
    },
  ],
});
</script>

<template>
  <NuxtPage />
</template>

CMS and website builders

Tip

Most CMS platforms (WordPress, Webflow, Framer, Squarespace, and similar) have a custom code or footer scripts section in their site settings. Paste the NOCK snippet there to load it on every page without editing individual templates.

Verifying the installation

Once you've added the snippet, open your site in a browser. The NOCK feedback button should appear in the corner of the page. Click it to open the widget and submit a test ticket — then check your Dashboard to confirm the ticket arrived.

Warning

If the button doesn't appear, open your browser's developer console and look for any errors related to nock.js. The most common causes are a missing or incorrect data-token and a script tag placed outside the <body> element. See the Troubleshooting guide for more help.

Configure the Widget

Customize the button's appearance, position, categories, and behavior from the Dashboard.

Troubleshooting

Widget not showing up? Step through common installation problems.