Flawsnap
Free trial

Install Flawsnap on a Squarespace site

Squarespace Code Injection puts one line in the header of every page, which is all the Flawsnap widget needs.

Steps

  1. 1

    Check your plan supports Code Injection

    Code Injection is only available on some Squarespace plans. If you cannot find it in your settings, your plan does not include it.

  2. 2

    Allow your domains

    In Flawsnap, open the project’s Security settings and add both your built-in your-site.squarespace.com address and your custom domain under Allowed domains.

  3. 3

    Open Code Injection

    In Squarespace, open Settings and find Code Injection. Depending on your version it sits under the advanced or developer settings.

  4. 4

    Paste into Header

    Paste the Flawsnap snippet into the Header field and save.

  5. 5

    Test while logged out

    Open the site in a private window and send a test report from the button.

What goes in the Header field

Squarespace has a Header field and a Footer field. Use Header: the widget then loads at the start of every page and captures console messages and API calls from the moment the page opens. Footer works too, but early errors are missed.

Code Injection → Header
<script src="https://backend.flawsnap.com/widget.js" data-key="pk_…" async></script>

Two addresses, both allowed

Every Squarespace site has a built-in address ending in squarespace.com, and most have a custom domain too. The widget refuses any address that is not on the project's list, so add each one you will test on:

  • your-site.squarespace.com for checking changes on the built-in address.
  • example.com and www.example.com for the live site (they are separate entries).
  • Do not use *.squarespace.com. Flawsnap would accept it, but it covers every Squarespace site, so anyone else’s Squarespace site could send reports with your key. List your own addresses instead.

One page instead of the whole site

Squarespace pages have their own advanced settings with a page-level header injection. Put the snippet there instead if you only want feedback on, say, a new landing page or a booking page. Leave the site-wide field empty in that case.

Collecting feedback from a client before launch

Squarespace sites are often built for a client who then reviews them. Before launch, a site-wide password keeps the public out, and the widget still works for anyone with the password, as long as the address they use is allowed.

Your client does not need a Flawsnap account. They click Report a bug, draw a box or arrow on the problem, add a note and send. You see it on your board with the page URL, browser and screen size.

Ask clients to use the Blur tool on anything private before they send. It pixelates the area in the browser, before the screenshot is uploaded.

Troubleshooting

  • You are logged in to Squarespace and the button is missing: check the live site in a private window. The editor is not a reliable place to test injected code.
  • [flawsnap] widget disabled: in the console: the address in the address bar is not on Allowed domains.
  • The button clashes with a cookie banner or chat bubble: add data-position="left" to the tag or change the position in the project settings.
  • You pasted the code and then changed plans: if Code Injection is no longer on your plan, the code stops running.

Questions

Do I need a developer to add Flawsnap to Squarespace?
No. It is one line pasted into a settings field. Nobody edits a template.
Will the widget appear on my Squarespace checkout?
Code Injection adds code to your site pages. Whether it also reaches checkout depends on Squarespace, so test the checkout page itself before relying on reports from it.

Try it on your own site

7-day free trial, then $9 a month for Starter or $19 for Pro, per organization, with unlimited team members.

Start free trial Try the live demo

Related

Updated