Installing Table of Contents Pro

Before You Start

After purchase, you'll receive an email containing a short <script> snippet. Have that email open — you'll copy the snippet into Squarespace.

Open the purchase confirmation email. You'll see a <script> tag that looks like this:

<script
  src="https://www.thebigfishseo.com/toc-pro/v2/widget.js"
  data-key="toc_a7f3bc91"
  data-config='{
    "style": "minimal",
    "title": "Table of Contents",
    "color": "#9E6350"
  }'
  defer>
</script>

Select and copy the entire snippet. Your data-key and data-config values will be unique to your license.

In the Squarespace editor, open the blog post where you want the TOC. Click the gear icon to open Post Settings, then scroll to Advanced and find Post Blog Item Code Injection.

Paste the snippet into the Code Injection field in Post Settings → Advanced.

Paste the script snippet into the Code Injection field and click Save at the top of the Post Settings panel.

Paste the snippet exactly as it appears in your email — don't change any of the values.

Open your blog post in a new tab (not the Squarespace editor preview — Code Injection doesn't run inside the editor). Check these three things:

• ✓ TOC appears — a sidebar (desktop) or collapsible menu (mobile) shows your post headings.
• ✓ Links work — clicking a heading in the TOC scrolls to that section.
• ✓ Scroll tracking — as you scroll, the active heading highlights in the TOC.

Adding the TOC to every blog post

The steps above add the TOC to a single post. If you want it on every blog post automatically, paste the snippet into your Blog Settings Code Injection instead:

1. 1 In your Squarespace dashboard, go to Website → Pages → Blog.
2. 2 Click the gear icon next to your Blog page to open Blog Settings.
3. 3 Scroll to Advanced, then paste the snippet into Post Blog Item Code Injection.
4. 4 Click Save. The TOC now appears on every post in that blog.

Blog-level injection applies the TOC to every blog post automatically.

Customizing after install

Your snippet's data-config attribute controls every setting — colors, heading levels, sidebar position, and mobile behavior. Edit the JSON values directly in your snippet to adjust. No need to repurchase.

Config reference

Example with all options

data-config='{
  "style": "minimal",
  "title": "In This Post",
  "color": "#9E6350",
  "textColor": "#6b7c6b",
  "bgColor": "#ffffff",
  "position": "left",
  "headings": "h2, h3",
  "mobile": "collapsed",
  "mobilePosition": "top",
  "scrollOffset": 160,
  "marginTop": 20,
  "itemSpacing": "0.375rem",
  "titleWeight": "600",
  "tocWidth": 35,
  "indentSize": "1rem",
  "dividerColor": "#6b7c6b",
  "fontFamily": "Georgia, serif",
  "mobileBorder": true
}'

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

Troubleshooting

// Wrong — trailing comma breaks JSON
data-config='{
  "color": "#3e5f4e",
  "title": "In This Article",  ← remove this comma
}'