How to Add a Comment Widget to Squarespace

Your plan decides whether this is possible at all

Squarespace sells four plans, and the line that matters here falls between the first two. Basic gives you a Code Block, but that block accepts plain text, HTML, Markdown and CSS only. Paste a <script> tag into it and nothing runs. Code injection, the site-wide Header and Footer fields, is not on Basic either.

Squarespace states it in two places. The pricing comparison table marks Code injection and the advanced code block as excluded on Basic and included on Core, Plus and Advanced. The Help Center matches: code injection is available in the Core, Plus, Advanced and some legacy billing plans, and JavaScript or iframes in code blocks are available in Core, Plus and Advanced plus the retired Business and Commerce tiers.

Business, Commerce Basic and Commerce Advanced still appear in those help articles. Those are legacy plans, no longer sold. If your site sits on one, you already have custom code and the rest of this applies unchanged.

See the thread before you touch a panel

Two panels, two different jobs

Squarespace keeps site-wide code and in-page code in separate places, and this install uses one of each. The loader has to be present wherever a widget might appear, so it goes in Code Injection. The mount element marks the exact spot the thread belongs, so it goes in the page content as a Code Block.

Mixing them up is the usual first mistake. Put the mount div in the site-wide Footer field and every page sprouts a thread at the bottom, all sharing one conversation.

The install, panel by panel

1. The built-in squarespace.com URL counts as its own domain

   Every Squarespace site starts on a built-in something.squarespace.com URL and keeps answering there until a custom domain is connected, so on a trial site, or on a rebuild you have not pointed the real domain at yet, the address in your browser bar is not the address you will launch on. BootSignal checks location.hostname against the domains registered to your site id before the thread loads, which makes those two separate entries in the dashboard rather than one site with two names. Add the one you are working on now, add the custom domain the day you connect it, and remove the built-in URL later once nothing resolves there. The dashboard shows a site id beside the domain, and that string is the only BootSignal value anywhere in this guide.

2. Paste the loader into Code Injection

   From the Squarespace dashboard open Website, then Website Tools, then Code Injection. Put the tag in the FOOTER field, which Squarespace injects before the closing body tag on every page in the site, and save. The Header field works too; Footer keeps the script out of the way of your first paint.

   <script src="https://bootsignal.com/bootsignal.js"
           data-site-id="YOUR_SITE_ID" data-lang="en" defer></script>

   Copy

3. Add a Code Block where the thread belongs

   Edit the page or blog post, hover over the section under your content, click Add block or the + button, and pick Code from the block menu. Click the pencil icon to open the block editor and paste the mount element into the text field. Change page-key to something stable and specific to that post, such as its slug.

   <div data-bootsignal="comments" data-thread-id="page-key"></div>

   Copy

4. Turn Display Source off, then Apply and Save

   The block editor has a Display Source toggle. On means show this markup as visible text. Off means run it. You want it off. Apply the block, then save the page.

5. Check it in a private window

   Open the live URL with no Squarespace session running. That is the only view that tells you the truth, for reasons the next two sections cover.

Display Source is the toggle that turns embeds into text

If your page shows a literal line of angle brackets where the thread should be, this is why. Every time. The Code Block does double duty: it can execute your markup, or display it as a code sample for readers, and Display Source picks which. Leave it on and Squarespace faithfully prints <div data-bootsignal="comments"> to your visitors.

The toggle lives inside the block editor, not in site settings, so it is per block. The Code Block you add three months from now starts with its own toggle and can catch you the same way. Checking it takes two seconds. Debugging it from the front end costs an afternoon, because nothing is actually broken.

The editor is a bad place to judge whether it worked

Squarespace treats logged-in sessions differently from visitor sessions, and custom code is where they diverge. Four things to know before you conclude the widget is broken:

• Scripts often do not run while you are logged in. Squarespace puts it plainly: as a security measure, sometimes your code will not appear when you are logged in, even if visitors can see it.
• The Code Block editor has a Preview in Safe Mode button, which renders the embedded item on its own so you can at least confirm the markup is intact.
• If custom code trips the editor you get the message "We detected an error loading your site preview" plus a Disable Scripts in Preview button. Click it and your custom code stops rendering while you are logged in, though visitors keep seeing it normally. Squarespace does not recommend switching scripts back on in preview, since it can interfere with editing the site.
• A private or incognito window with no Squarespace session is the only check that settles the question.

One subscription, however many blocks you add later

Comments are not sold on their own. One registered domain is $20 per month or $200 per year, and that single line covers the catalog: 31 paid widgets today, 31 free browser tools beside them, and whatever else ships while you are subscribed. No part of the figure counts pageviews or comments, so the post that unexpectedly travels bills the same as the post nobody read. A second Squarespace site is a second domain, added from the same dashboard.

The practical effect on Squarespace is that the second widget costs you one more Code Block. The loader is already in Code Injection, so mounting a star rating under the same post is a single div in a new block.

Two things worth saying out loud, since plenty of widgets in this category do the opposite. The Testimonial Wall builds its wall from reviews the Ratings widget actually collected; it has no mechanism for inventing a quote. The Social Proof Toast replays only real activity your site already stored, so it will never manufacture a "someone in Ohio just bought this" popup.

Still choosing between hosted comment systems rather than installing one? The alternatives section carries the priced comparisons.

Things that bite a month later

• One thread id per post, always. Two Code Blocks that share a data-thread-id share a conversation. Naming each one after the post slug keeps the pattern obvious to whoever edits the site next.
• If you write CSS around the block, for spacing or width, put it in the CSS Editor, not the Code Injection header. Squarespace warns that Ajax page loading can keep injected CSS from applying, and points you at the CSS Editor for this case.
• A Code Block holds up to 400 KB, roughly 300,000 characters. A one-line mount never approaches it, but that is the ceiling if you paste something heavier in later.
• Version 7.0 sites only: code on a page that sits inside an Index may not render. The Squarespace workaround is to pull the page out of the Index and log out to test.
• Custom code sits outside the scope of Squarespace support, and they warn that platform updates can break code-based customizations. The check after a template change is yours to run.

One habit for the redesign checklist: after any template or section change, open a post in a private window and confirm the thread is still there. Squarespace moves blocks when layouts change, and a Code Block that lands in a hidden section takes its comments with it.