> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nocknock.cloud/llms.txt
> Use this file to discover all available pages before exploring further.

# Install the NOCK Feedback Widget — Script Tag Guide

> Add the NOCK feedback widget to any website by pasting a single script tag into your HTML — no build step or package manager required.

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.

```html theme={null}
<script
  src="https://nocknock.cloud/widget/nock.js"
  data-token="YOUR_PROJECT_TOKEN"
  data-api-base="https://nocknock.cloud"
></script>
```

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

## Attribute reference

| Attribute       | Required | Description                                                                                                                 |
| --------------- | -------- | --------------------------------------------------------------------------------------------------------------------------- |
| `data-token`    | **Yes**  | Your project token, found in **Settings → Widget** in the Dashboard.                                                        |
| `data-api-base` | No       | The 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>`.

```html theme={null}
<!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.

```tsx theme={null}
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.

```tsx theme={null}
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`.

```vue theme={null}
<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.
</Tip>

## 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](/widget/troubleshooting) guide for more help.
</Warning>

<CardGroup cols={2}>
  <Card title="Configure the Widget" icon="sliders" href="/widget/configure-widget">
    Customize the button's appearance, position, categories, and behavior from the Dashboard.
  </Card>

  <Card title="Troubleshooting" icon="wrench" href="/widget/troubleshooting">
    Widget not showing up? Step through common installation problems.
  </Card>
</CardGroup>
