Add a feedback widget to a Squarespace site

Is code injection the right place for the widget?

Squarespace has a code injection area, which lets you add scripts to the site's header or footer. For the widget, the footer is the right place. A script there loads on every page, and the floating Feedback button appears in the corner. The code injection setting is available on plans that allow custom code, so confirm yours before you start.

If you cannot use code injection, the hosted feedback page is a complete alternative. You link to it from a button or menu item, and visitors send feedback without any script on your site.

Add the snippet to the site footer

Open the site's settings, find the advanced section, and open code injection. Paste the footer snippet into the footer field:

<script src="https://escutaproduto.com/widget.js" data-key="pk_your_product_key" defer></script>

Save the change, then open the live address in a private window rather than trusting the editor preview. The script uses defer, so it does not block the page, and it adds no dependencies.

Keep the footer field limited to scripts you know. Several tools inject code there, and when you remove one later, you want to know exactly which snippet belongs to which tool.

Limit the widget to some pages

Sometimes a feedback prompt belongs on a help article or a pricing page only. You have two good routes.

The first is page-level header injection. Each page in Squarespace has its own advanced settings, and a page-level header code injection area there runs only on that page. Paste the same script tag into the pages you choose, and leave the footer empty.

The second route is to keep the floating button off site-wide and place your own button where it belongs. Add data-trigger="none" to the snippet, then add a code block to the page with a button:

<button type="button" data-escuta-open="idea">Suggest a feature</button>

Any element with the data-escuta-open attribute opens the form. The value preselects the type, so use bug for a problem report and praise for thanks. The code block is a good fit for a call to action that sits inside your layout, not in a floating corner.

Confirm your domain is allowed

Squarespace sites are reachable at a custom domain and at a squarespace.com address, and sometimes both redirect. In the product settings, list each address that serves the site under Allowed origins, using the full https form such as https://example.com. Include the www version if visitors use it.

Requests from any other origin get a 403 response. A test that works on the squarespace.com address but fails on your custom domain usually means the custom domain is missing from the list.

Test the live site on a phone

Open the published site in a private window on a desktop, then on a phone. Check that the floating button appears, does not cover a call to action, and opens the form. Send one message from each device, then confirm both arrive in the inbox with the page URL saved.

If the button covers something important on a phone, move it with the position option set to left, or hide the floating button and use a code block button instead.

How Squarespace feedback reaches Escuta Produto

Every message is sent to the inbox of the product you set up for the site. The page URL tells you which page a message came from, which matters on a site with many pages, such as a portfolio or a course catalog. Filter by type and status, and add internal notes to record what you decided.

Use the 30-day chart to see when feedback rises. A jump right after a site update is a useful signal to check that the change did not break something.

When the widget does not appear on a page

If the floating button is missing from one page or from the whole site, check these in order.

First, confirm the snippet is in the field you expect. Footer code injection applies to the whole site, while page-level header injection applies only to the page where you pasted it. A snippet in the wrong field will load on some pages and not others, which looks like a random bug.

Second, check for data-trigger="none". If you turned off the floating button to place a code block button, the floating button will stay hidden on every page until you remove the attribute. That is correct behavior, but it surprises people who forget the change.

Third, look at the browser console on the published page. A blocked script often comes from a browser extension, an ad blocker or a policy that rejects the widget file. Test in a private window with extensions off to rule them out.

Fourth, compare the address with allowed origins. A custom domain that is missing from the list still loads the button, but the feedback request fails with a 403 response. The button looks fine, so people often miss this one.

Finally, clear your browser cache and retest. A copy of the page saved before you edited the code can hide the change until the cache is refreshed.

Related

• Options such as the trigger, position and language are in the widget docs.
• For the link-only option, see the hosted page docs.
• For another builder with a footer script, read Add a feedback widget to a Wix site.
• For a short definition of the tool category, read What is a feedback widget?.