Skip to main content
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:
  1. Open your project from the Projects list.
  2. Go to Settings → Widget.
  3. Click Copy Snippet — the full script tag is copied to your clipboard with your real project token already filled in.

​
The widget script tag

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 your project’s Settings → Widget screen (or just copy the pre-filled snippet — it’s already correct).

​
Script tag attributes

AttributeRequiredDescription
srcYesThe URL of the NOCK widget script. Do not change this value.
data-tokenYesYour unique project token. This tells NOCK which project inbox to send feedback to.
data-api-baseNoThe NOCK API endpoint. Defaults to https://nocknock.cloud — leave this value unchanged.
Additional configuration options — such as button position, colour, and which data-capture features to enable — are managed from the Dashboard under Settings → Widget. You don’t need extra attributes in the script tag to use them.

​
Placing the snippet

1

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

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

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 / SetupWhere to add the snippet
Plain HTMLInside the <body> of every HTML file, or a shared footer.html partial
React (Create React App / Vite)public/index.html, before </body>
Next.jsapp/layout.tsx (App Router) or pages/_document.tsx (Pages Router), inside the <body>
Nuxt.jsapp.vue or a layout file, using a <script> tag via useHead or directly in the template
AstroA global layout component, inside the <body> slot
WordPressTheme’s footer.php, before </body> — or use a header/footer plugin
WebflowProject Settings → Custom Code → Footer Code
Shopifytheme.liquid, before </body>
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.
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.