F

How to add Pinnote to Framer

Framer has site-wide custom code in its settings. Add Pinnote once and publish.

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 your Framer project, open Site Settings and find the Custom Code section.
  3. Paste the Pinnote code into End of <body> tag.
  4. Save, then click Publish.
  5. 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: if Framer asks you to upgrade before adding custom code, use the no-install option instead.

Troubleshooting

Reviewing on framer.website or framer.app

Add that address under Settings › Allowed domains for this website in Pinnote.

Nothing shows in the editor preview

Custom code runs on the published site. Open the published address with your review link.

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