Installing Footnotes Pro

Before You Start

Open your license email. You'll see a <script> tag that looks like this:

<script
  src="https://www.thebigfishseo.com/footnotes-pro/v1/widget.js"
  data-key="fn_xxxxxxxx"
  data-config='{}'
  defer>
</script>

Your real snippet has your license key and any options you chose at purchase. Always copy it from your email, not from this page.

In Squarespace, go to Settings → Developer Tools → Code Injection, paste the snippet into the Footer box, and save. This is one-time: the snippet works site-wide, on every blog post, including ones you write later.

In the body of your post, type [1] wherever you want a footnote marker. Then, at the very end of the post, add your definitions: each one is its own paragraph that starts with the matching number in brackets.

Sea otters hold hands while they sleep so they
don't drift apart.[1] Some also wrap themselves
in kelp for extra anchoring.[2]

Footnotes

[1] Observed primarily in resting rafts of
females and pups.
[2] Kelp wrapping is learned behavior, passed
from mother to pup.

• • The definitions must be the last paragraphs of the post. The widget reads up from the bottom and stops at the first paragraph that doesn't start with a bracketed number.
• • A heading like "Footnotes", "Notes", or "References" above the definitions is optional. If you add one, the widget replaces it with its own styled section title. You don't need a divider or dashes; typing --- does nothing in Squarespace.
• • Markers inside links or code blocks are deliberately ignored, and a marker only becomes a footnote if a matching definition exists.

Open a published blog post on your live site: the version your readers see, not the Squarespace editor preview. Code injection doesn't run inside the editor, so the editor will never show footnotes.

• ✓ Markers became superscripts: [1] in your text now renders as a small raised number.
• ✓ Popovers appear: hovering (or tapping on mobile) a superscript shows the footnote text.
• ✓ The section is styled: your definitions at the bottom became a formatted list with return arrows.

Troubleshooting

If nothing appears, walk this list in order. It covers every failure mode we know about.

1. 1 Are you looking at a blog post? Footnotes Pro runs on individual Squarespace 7.1 blog posts only, not regular pages or the blog index.
2. 2 Are you on the live site? The Squarespace editor and its preview don't run code injection. Open the published post in a normal browser tab.
3. 3 Is your plan Business or higher? Personal plans don't run Code Injection at all. Squarespace won't warn you; the code just never loads.
4. 4 Try a private/incognito window. The widget caches its license check in your browser for 24 hours. If an earlier attempt failed, that stale result can linger. An incognito window starts fresh.
5. 5 Does every marker have a definition? A [1] in your text only activates if a paragraph at the end of the post starts with [1]. Check numbering on both sides.
6. 6 Are the definitions the last thing in the post? Anything after them (even a stray paragraph) breaks detection. Move definitions to the very end.
7. 7 Still stuck? Reply to your license email or contact us. Include a link to the post; we'll usually spot the issue the same day.

Customizing after install

Your snippet's data-config attribute controls how the footnotes look and behave. Edit the JSON values directly in your snippet to adjust. No need to repurchase.

Config reference

Example with all options

data-config='{
  "sectionTitle": "Footnotes",
  "color": "#c17f59",
  "textColor": "#333333",
  "bgColor": "#ffffff",
  "popoverBehavior": "hover",
  "scrollOffset": 80
}'

Every option is optional: remove any line you don't need and the default kicks in.