Add a feedback widget to a Framer site

Which Framer setting loads the widget on every page?

Framer sites take one script tag in the site-wide custom code area. In the site settings, find the custom code section and the field for code at the end of the body tag. Anything you paste there loads on every published page, which is what the widget needs. The feature is available on plans that allow custom code, so check your plan first.

If custom code is not available for your site, you still have a working option. Link visitors to the hosted feedback page, which needs no script at all. Both routes end in the same inbox.

Paste the snippet at the end of the body

Copy the snippet from your product's install page, paste it into the end-of-body field, and save:

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

The script is about 5 KB compressed and has no dependencies. Because it is deferred, your design loads first and the floating Feedback button appears when the page is ready. Keep the field limited to this snippet, so you can find it again when you rotate the product key or move the site.

Why you must publish before the widget appears

Framer's editor shows your design, but the public site is what visitors see. Changes to custom code and to the design both reach the public address only after you publish. If you test in the editor and see nothing, that tells you nothing about the live install.

Publish, then open the live domain in a private window. Use your custom domain or the default Framer address, and add whichever you test on to the allowed origins list in the product settings. Without that entry, a test message from the live site is rejected with a 403 response.

Add a feedback button with an Embed component

A floating button in the corner is not always the right prompt. A pricing page or a changelog may need a clear call to action instead. Framer's Embed component lets you paste HTML into a page, so you can place your own button where it fits.

First, set the floating button off in the site-wide snippet by adding data-trigger="none" to the script tag. Then add an Embed component to the page and paste:

<button type="button" data-escuta-open="bug" style="padding: 8px 14px; cursor: pointer;">Report a problem</button>

The data-escuta-open attribute opens the feedback form and preselects the type, here bug. Give the button inline styles, because the embed is isolated from your Framer styles and you will want it to match your design by hand. Publish and click it on the live page to confirm the form opens.

Open the widget from a menu link

Some sites put feedback in the main navigation. You can do that without any extra code by linking to the hosted feedback page for your product:

https://escutaproduto.com/f/your-product-slug

Add ?lang=pt or ?lang=en to set the language. The hosted page uses your product's accent color and is not indexed by search engines, so it works as a clean, separate destination. Use the link wherever you cannot place code at all.

Pass a visitor's email to the form

Most Framer sites are public marketing pages, so visitors are usually anonymous. If you already know someone's email, for example from an invite email, you can prefill the hosted page with the email parameter, which fills the field so the visitor does not retype it.

Inside the widget, the identify call fills the email and name fields and hides the email field. That fits sites where people log in through another tool and you can read their details in code. For a plain Framer marketing site, the anonymous form with an optional email is the honest default.

Where Framer feedback lands in Escuta Produto

Every message appears in the inbox of the product connected to your site, with the page URL, the browser and the country added by the server. Filter by type to separate bugs from ideas and praise, then move each item through the statuses: new, planned, in progress, done or closed.

Use internal notes for context that never goes to customers. If you connect a Slack or Discord webhook, each new message posts a summary with a link back to the dashboard, so you can answer quickly.

What to check when feedback does not arrive

Start with the simplest question: did the page you are testing come from the latest publish? Framer keeps the editor and the public site separate, so an old published version can still be live after you changed the code. Publish again, then reload the live page in a private window.

Next, check the snippet itself. It should be the exact script tag from your product's install page, with your product key in the data-key attribute. A copied key with a missing character will load the script without ever matching your product, and the form will show an error when someone sends a message.

Then check allowed origins. If you added a custom domain after the first test, the new address is not on the list until you add it. Requests from an unlisted site are rejected with a 403 response, so a working test on one address and silence on another points straight at this setting.

Finally, open the browser console on the live page. A blocked script or a policy error is visible there, even when the page looks normal. If you find nothing, send a test message from a second device on a different network, which rules out a cached copy of the page on your own machine.

Related

• The full widget reference, including data-trigger and data-escuta-open, is in the widget docs.
• The hosted page options are in the hosted page docs.
• For a different builder with the same script approach, see Add a feedback widget to a Webflow site.
• To decide how to prompt visitors, read What is a feedback widget?.