Install the snippet

One script tag on your client’s site is all ClickNote needs. Each project has its own snippet and its own review link. A new project shows both on its first page in your dashboard. After that the snippet is on the project’s Install and settings page, and the link on Review link and people.

<script src="https://YOUR-ADDRESS.clicknote.io/l.js" data-project="PROJECT_ID" async></script>

• YOUR-ADDRESS.clicknote.io stands for your workspace’s own address, a short random name such as k7m3q9x2.clicknote.io. If you have connected your own domain on the Agency or Scale plan, the snippet uses that instead, for example feedback.youragency.com.
• PROJECT_ID is the project’s id. The snippet you copy from the dashboard already has it filled in.
• Put it just before the closing </body> tag, on every page your client should be able to review.

Step by step for your platform

• Shopifytheme.liquid, and stores still behind a password
• WordPressAny theme or builder
• WebflowSite settings, and the staging address
• SquarespaceCode Injection, 7.0 and 7.1
• WixCustom Code, Editor and Studio
• Astro, HTML and appsBelow on this page

Anything else that serves HTML works too: the rest of this page covers Astro, plain HTML and single-page apps.

Astro

Add the snippet to your base layout with is:inline, so Astro leaves the tag exactly as written.

---
// src/layouts/Base.astro
---
<html lang="en">
  <body>
    <slot />
    <script is:inline src="https://YOUR-ADDRESS.clicknote.io/l.js" data-project="PROJECT_ID" async></script>
  </body>
</html>

Plain HTML

Paste the snippet before </body> on every page, or in the shared footer include if your site has one.

    ...
    <script src="https://YOUR-ADDRESS.clicknote.io/l.js" data-project="PROJECT_ID" async></script>
  </body>
</html>

Single-page apps

ClickNote works with React, Next and Vue routers. Add the snippet once, to the HTML document every route shares.

Sites with a strict Content-Security-Policy

If the site sends a Content-Security-Policy header, allow your ClickNote address in both script-src and connect-src. Use your own domain here if you have connected one.

Content-Security-Policy:
  script-src 'self' https://YOUR-ADDRESS.clicknote.io;
  connect-src 'self' https://YOUR-ADDRESS.clicknote.io;

Check it works

1. Open the project in your dashboard, go to Review link and people and press Copy review link.
2. Open the link. You land on the client’s site and are asked to confirm your email.
3. Click any element and write a note. It appears on the project’s Notes page in your dashboard.