Wf

How to add Pinnote to Webflow

Webflow has a box for site-wide code. Paste Pinnote there once and it works on every page.

About 2 minutes · No developer needed

Your Pinnote code looks like this

Pinnote code
<script src="https://www.pinnote.xyz/widget.js" data-site="YOUR_SITE_ID" defer></script>

Copy your own code from Pinnote (Websites, your website, Install). It has your website's ID instead of YOUR_SITE_ID. Don't have an account? Create one free.

Steps

  1. In Pinnote, open Websites, choose your website and open the Install tab. Click Copy code. The code already contains your website's ID.
  2. In Webflow, open your site's Site settings (from the dashboard, or the Webflow menu in the Designer).
  3. Open the Custom code tab.
  4. Paste the Pinnote code into Footer code and click Save changes.
  5. Publish your site. Custom code runs on the published site, not inside the Designer.
  6. Open your review link (the Review links tab in Pinnote). The Pinnote toolbar appears at the bottom of the page. Normal visitors never see it.

Plan: Webflow only runs custom code on sites with a paid site plan. Without one, use the no-install option.

Troubleshooting

Review your staging site

Add your-site.webflow.io under Settings › Allowed domains for this website in Pinnote, then publish to staging.

Nothing shows in the Designer

That's expected. Open the published site (or its webflow.io address) with your review link.

Need a hand? Email hello@pinnote.xyz and we'll help you set it up.
Try the live demo