# Add a feedback widget to a Webflow site

> Paste the widget script into the footer custom code in your Webflow site settings, then publish. Test on the published domain, not the Designer canvas, and add the live domain to allowed origins.

Source: https://escutaproduto.com/resources/feedback-widget-webflow
Last updated: 2026-10-09

## Where does Webflow put custom code?

Webflow has two places for custom code. Site-wide code lives in the site settings, in the custom code section, and runs on every published page. Page code lives in the page settings and runs only on that page. Both areas are available on plans that allow custom code, so confirm your site's plan before you start.

For the widget, the site-wide area is the right default. Put the script in the footer code field, which sits before the closing body tag, and every page gets a floating Feedback button.

## Add the snippet to every page through site settings

Follow these steps once:

1. Open the site settings and go to the custom code section.
2. Find the footer code field and paste the snippet from your product's install page:

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

3. Save the custom code.
4. Publish the site. Custom code only reaches visitors after a publish, so a saved change that you have not published is invisible to customers.

The script uses defer and is about 5 KB compressed with no dependencies, so it adds little weight to the page. It renders inside a Shadow DOM, which keeps its styles from mixing with your Webflow design.

## Add the widget to one page only

Sometimes you want a feedback prompt on a pricing page or a help article, and nowhere else. The trick is to hide the floating button site-wide and place your own button on the page you choose.

First, change the footer snippet so the floating button is off:

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

Then add an Embed element to the target page, and paste a button into it:

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

The value after data-escuta-open preselects the type, so a button labeled as a bug report should use bug. Any element with that attribute opens the form, so you can style the button to match your design. Remember that data-trigger none removes the floating button from every page, so only use it when a button on each page is what you want.

## Publish before you test

The Designer canvas does not run your site's custom code, so the widget will not appear while you edit. Publish, then open the live domain in a private window. Scroll to the bottom of the page, check that the floating button appears, and send a short test message.

Webflow also gives each site a webflow.io address for staging. If your team tests there, add that address to allowed origins as well, or feedback sent from staging will be rejected.

## Keep allowed origins in step with your domains

The product key is public, so restrict where it works. In the product settings, add each domain that serves the site, using the full address with https, such as https://www.example.com. A site that answers at both the bare domain and the www address needs both on the list.

Requests from any other origin get a 403 response. If a test works in the Designer but the published site sends nothing, compare the address in your browser with the list in allowed origins.

## What Webflow feedback looks like in Escuta Produto

Messages from a Webflow site land in the inbox of its product. Each item saves the page URL, which tells you whether a complaint came from the homepage, a blog post or a product page. Filter by type to separate bugs from ideas and praise, then set statuses as you decide what to do.

Use the internal notes to record why you closed an idea or who asked for a feature, so the next person does not start from zero. The 30-day chart in the inbox helps you notice a jump in bug reports right after a site update.

## When the button does not appear on the live site

Work through the likely causes in order, because the first one is the most common.

1. Confirm the footer code is saved and the site was published after you saved it. A saved change that has not been published does not reach visitors.
2. Open the published page and look at the browser console. A blocked script usually means a browser extension, an ad blocker or a Content Security Policy is stopping the widget file.
3. Check the snippet for data-trigger="none". If you added it while testing a single-page button and forgot to remove it, no page will show the floating button.
4. Compare the address in your browser with allowed origins. A test from the webflow.io address fails if only the custom domain is listed.
5. Clear the browser cache or open the page in a private window, then test again. An old copy of the page can keep an earlier version of the code.

Keep a short list of these checks in your team's notes. Most install problems come down to one of these five. The whole list takes about five minutes on a small site. Run it after every install, and again whenever you change the footer code or add a domain, because either change can break the path without any visible error on the Designer canvas.

## Related

- Every option, including identify and the JavaScript API, is in the [widget docs](/docs/widget).
- If you cannot add custom code, a [hosted feedback page](/docs/hosted-page) needs only a link.
- Compare this setup with [Add a feedback widget to a WordPress site](/resources/feedback-widget-wordpress).
- For the difference between a widget and a plain email link, read [Feedback widget vs a mailto link](/resources/feedback-widget-vs-mailto-link).

## Frequently asked questions

### Does the Webflow widget have to go in the footer?

The footer is a good default because the script is deferred and adds a floating button. Head placement also works. The rule that matters is to add the script once per page, because two copies can create two buttons.

### Why don't I see the widget while I edit my Webflow site?

Site custom code runs on the published site, not in the Designer canvas. Publish, then open the live domain or your webflow.io staging address in a private window and look for the floating Feedback button.

### Can I show the feedback button on some Webflow pages but not others?

Yes. Set the trigger to none in the site-wide snippet, then add a button with the data-escuta-open attribute using an Embed element on each page you choose. The script still loads site-wide, but only your chosen pages show a button.

### Why is feedback from my published Webflow site rejected?

A 403 response means the address is not in allowed origins. Add the full https address of your custom domain, including the www version if you use it, and the webflow.io staging address if you test there.