Collect client feedback on a Webflow site

Paste one line into the site’s footer code, publish, and your client can click anything on the site and leave a note. It works on the webflow.io staging address too, so you can collect feedback before the site goes live.

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

Copy the real one from the project’s Install and settings page in your dashboard: it already has your address and the project’s id in it.

Add it to the whole site

1. Open the site’s Site settings and go to the Custom code tab.
2. Paste the snippet into Footer code. Webflow puts it before the closing </body> tag on every page.
3. Click Save changes.
4. Publish the site. Custom code does not go live until you publish.

Feedback before launch

Publish to the Webflow staging subdomain only: in the publish dialog, tick yoursite.webflow.io, leave the custom domain unticked and choose Publish to select domains. Create the ClickNote project with the webflow.io address as its site, and send your client the review link.

When the site moves to its own domain, add that domain in ClickNote, under Other addresses of the same site on the project’s Install and settings page. The notes stay where they are.

Where it runs, and where it does not

• Published pages, on your own domain and on webflow.io: yes.
• The Designer canvas: no. Webflow shows a placeholder there instead of running custom code.
• Preview: only if custom code is switched on for the preview, with the Enable custom code toggle. Reviewing on the published staging address is simpler.

One page only

To put ClickNote on a single page, open that page’s Page settings in the Designer and paste the snippet into Before </body> tag under Custom code. Save, then publish.

What each note tells you on Webflow

• The site and the page, by Webflow’s own ids.
• The class names the element was given in the Designer, which is how you find it again there.
• Webflow’s own elements by name: a navbar, a form block, a rich text block, a collection list and the item inside it.
• For a component, its name and the variant in use.

Check it works

1. Open the project in your ClickNote dashboard, go to Review link and people and press Copy review link.
2. Open the link. You land on the 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.