Skip to main content
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’ll find your project token in the NOCK Dashboard under Settings → Widget.

​
The snippet

Copy the snippet below, replace YOUR_PROJECT_TOKEN with the token from your Dashboard, and paste it just before the closing </body> tag of your HTML. 
<script
  src="https://nocknock.cloud/widget/nock.js"
  data-token="YOUR_PROJECT_TOKEN"
  data-api-base="https://nocknock.cloud"
></script>
Your project token is unique to each project. If you have multiple projects in NOCK, make sure you copy the token for the correct one.

​
Attribute reference

AttributeRequiredDescription
data-tokenYesYour project token, found in Settings → Widget in the Dashboard.
data-api-baseNoThe NOCK API base URL. Defaults to https://nocknock.cloud — you only need to set this if you are on a custom domain plan.

​
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 -->

    <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

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.
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.