Footnotes Pro
Academic-style footnotes for your blog posts. Write [1] in your text, add definitions at the end of your post, and the script handles the rest — superscript markers, hover popovers, and a formatted footnotes section.
- Hover popovers — readers see the footnote without scrolling away from the text
- Superscript markers —
[1]becomes a clickable superscript with smooth scroll navigation - One-line install — paste a single code snippet, no developer required
- Fully accessible — ARIA roles, keyboard navigation, and reduced motion support built in
See It in Action
This is a live preview. Hover over the superscript numbers to see popovers. Changes in the configurator below update this preview in real-time.
Healthcare practices that publish long-form blog content see measurably higher organic traffic [1]. But word count alone doesn't drive rankings — the content needs to demonstrate expertise and cite credible sources [2].
Footnotes solve this problem. They let you reference studies, add context, and credit sources without breaking the flow of your writing. Readers who want more detail can hover or click; everyone else keeps reading [3].
Features
Hover Popovers
Readers see the footnote content without leaving their place. Popovers appear on hover (desktop) or tap (mobile).
Superscript Markers
Bracket markers like [1] automatically become clickable superscript numbers, academic-style.
Smooth Scroll Navigation
Click a marker to scroll to its definition. Click the back-arrow to return to where you were reading.
Custom Colors
Match your brand with three configurable colors: accent, text, and popover background.
Mobile Optimized
Popovers reposition automatically on small screens. Tap to open, tap anywhere else to close.
Keyboard Accessible
Full keyboard navigation, ARIA roles and labels, focus management, and reduced motion support.
How It Works
Three steps. Under 60 seconds. No developer required.
Purchase and check your email
You'll get a customized code snippet with your domain and chosen config baked in.
Paste into Code Injection
Open Squarespace → Settings → Developer Tools → Code Injection → Footer. Paste the snippet.
Write footnotes in your posts
Add markers like [1] in your text. Add the definitions at the end of your post. The script does everything else.
What you write in Squarespace
Anywhere in your post
Studies show that long-form content ranks higher [1].
End of your post
[1] Backlinko, "Content Study 2024" — posts over 3,000 words get 3x more traffic.
Requirements
Customize Your Footnotes
Configure the settings below and watch the preview above update in real-time.
Heading above the footnotes section
Superscript markers and links
Popover and footnote text color
Popover background color
How popovers appear on desktop
Pixels from top when scrolling to a footnote
Free vs Pro
| Feature | Free | Pro |
|---|---|---|
| Bracket-to-superscript conversion | ✓ | ✓ |
| Footnotes section formatting | ✓ | ✓ |
| Hover popovers | — | ✓ |
| Smooth scroll navigation | — | ✓ |
| Back-reference arrows | — | ✓ |
| Custom colors | — | ✓ |
| Click or hover mode | — | ✓ |
| Keyboard accessible | — | ✓ |
| Domain-locked license | — | ✓ |
FAQ
How do I install it? +
After purchase, you'll receive an email with a single <script> tag. Paste it into Squarespace under Settings → Developer Tools → Code Injection → Footer. That's it — footnotes start working on all your blog posts.
Does it work with all Squarespace templates? +
Yes — it works with any Squarespace 7.1 template on a Business (Core) plan or higher. You need at least the Business plan because Code Injection is required. It's designed for blog post pages and adapts to your site's layout automatically.
How do I write footnotes in my posts? +
Write [1], [2], etc. in your text where you want the markers. Then add the definitions at the end of your post: [1] Your footnote text here. The script automatically matches markers to definitions.
Can I customize the colors? +
Yes. The script tag includes a data-config attribute where you can set accent color, text color, and popover background color using hex values. Use the configurator above to preview your settings before purchase.
What if it doesn't work for me? +
We offer a 30-day money-back guarantee. If you're not satisfied for any reason, email us for a full refund.
Can I use it on multiple sites? +
Each license is for one domain. Contact us for volume discounts if you have multiple sites.
What if I need help installing or customizing? +
We're here to help. Reach out to us and we'll walk you through installation, color matching, or any custom tweaks you need for your site.
Get Footnotes Pro
Your customized footnotes are ready. Enter your domain to complete your purchase.
e.g., myblog.com or mysite.squarespace.com
Want to try before you buy? Check out our free code snippets.