How to Install the NOCK Feedback Widget on Your Site

Add a single script tag to your site to activate the NOCK feedback widget. Works with any framework or plain HTML in under five minutes.

Installing NOCK on your website takes a single script tag. No build step, no npm package, no framework-specific plugin required — paste the snippet before your closing </body> tag and the widget button appears automatically. This page shows you exactly where to find the snippet, what each attribute does, and how to place it correctly in common frameworks.

Find the snippet in your Dashboard

Every project has its own ready-to-copy snippet. To find it:

Open your project from the Projects list.
Go to Settings > Embed.
Copy the Script Tag snippet. The full script tag includes your real project token and environment-specific attributes.

The snippet you copy from the Dashboard looks like this:

<script
  src="https://nocknock.cloud/widget/nock.js"
  data-token="YOUR_PROJECT_TOKEN"
  data-api-base="https://nocknock.cloud"
></script>

Replace YOUR_PROJECT_TOKEN with the token shown in Settings > Embed (or copy the pre-filled snippet, which is already correct).

Script tag attributes

Attribute	Required	Description
`src`	Yes	The URL of the NOCK widget script. Do not change this value.
`data-token`	Yes	Your unique project token. This tells NOCK which project inbox to send feedback to.
`data-api-base`	No	The NOCK API endpoint. Defaults to `https://nocknock.cloud` — leave this value unchanged.

Note

Launcher options live under Settings > Widget. Categories, Console, AI, Embed, and Share each have their own tabs.

Placing the snippet

Open your site's global layout or HTML template

The snippet must load on every page where you want the widget to appear. In most setups this means your global layout file, your base HTML template, or a shared footer component.

Paste the snippet before the closing body tag

Place the script tag as the last element inside <body>, immediately before </body>. Loading it here ensures your page content renders first and the widget doesn't block any other scripts.

<!-- Your page content -->

<script
  src="https://nocknock.cloud/widget/nock.js"
  data-token="YOUR_PROJECT_TOKEN"
  data-api-base="https://nocknock.cloud"
></script>
</body>

Save and deploy

Save the file and deploy or restart your site as you normally would. The widget loads on every page that includes the snippet.

Framework tips

NOCK works with any framework that renders HTML. Here are the most common placement patterns:

Framework / Setup	Where to add the snippet
Plain HTML	Inside the `<body>` of every HTML file, or a shared `footer.html` partial
React (Create React App / Vite)	`public/index.html`, before `</body>`
Next.js	`app/layout.tsx` (App Router) or `pages/_document.tsx` (Pages Router), inside the `<body>`
Nuxt.js	`app.vue` or a layout file, using a `<script>` tag via `useHead` or directly in the template
Astro	A global layout component, inside the `<body>` slot
WordPress	Theme's `footer.php`, before `</body>` — or use a header/footer plugin
Webflow	Project Settings → Custom Code → Footer Code
Shopify	`theme.liquid`, before `</body>`

Tip

If your framework uses server-side rendering, the widget script loads on the client automatically — no special "use client" directive or dynamic import is needed. NOCK's script is fully self-contained.

Warning

Don't place the snippet inside a component that conditionally renders or unmounts. If the script tag is removed from the DOM after loading, the widget button will disappear. Always add it to a persistent layout that is present on every page.

What's next?

Your widget is installed. Now open your live site and confirm the button appears and feedback flows through correctly.

Test Your Widget

Send a test ticket and verify everything is working end to end.