Add a feedback widget to a Softr app

Where does Softr let you add custom code?

Softr lets you add custom code to a published app through its settings, so one script tag can load the feedback widget on every page your visitors open. The widget is a single script with a product key. Once it is in place, a floating Feedback button appears in the corner of the app.

Custom code may depend on your Softr plan, so check that your app allows scripts before you start. If it does not, the hosted feedback page is a fallback that needs only a link, covered further down.

How do you paste the widget into a Softr app?

1. Open your app in the Softr editor and go to the app settings.
2. Find the custom code section. Some builders split it into a head area and a body area. Use the body or footer field, because the widget loads with defer and does not need to block the page.
3. Paste the script tag from your product's install page:

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

4. Save the change and publish the app. Custom code reaches visitors only after a publish, so a saved change that is still in the editor is invisible to customers.

The script is about 5 KB compressed and has no dependencies. It renders inside a Shadow DOM, so its styles do not leak into your app's design, and you can change the button color with the data-color attribute if the default does not match your brand.

Can you pass the signed-in user to the widget?

Many Softr apps have member accounts. If your builder makes the signed-in user's details available to custom code, pass them to the widget with identify. The email and name fill the form for that visitor, and the email field is hidden, so each message is tied to the account that sent it.

Place this block before the widget script tag, and replace the placeholders with the values your builder provides for the current user:

<script>
  window.EscutaProduto = window.EscutaProduto || { q: [] };
  (window.EscutaProduto.q ||= []).push(["identify", [{ email: "USER_EMAIL", name: "USER_NAME", id: "USER_ID" }]]);
</script>

The queue form works even when the widget file has not loaded yet, so the order does not matter as long as the block comes first. Send only what you need. A name, an email and an internal user id are enough, and you should never pass a password, token or payment detail.

If Softr does not expose the user's details to custom code, skip identify. Visitors then type their own email in the form, which still works. You can also send signed-in users to the hosted page with their email in the link, as described in the hosted page docs.

How do you test the widget on the live app?

Editor previews do not always run custom code, so test the published app. Open the live address in a private window so you see what a new visitor sees, then work through these checks:

1. Confirm the Feedback button appears and opens the form.
2. Send a test message that starts with "test from Softr", so you can find it later.
3. Log in with a test account and check that the email field is hidden when identify ran.
4. Open the new item in your inbox and confirm the page URL matches the screen you tested.

Repeat the check on a phone. App screens often rearrange on small widths, and the floating button should not cover a submit button or a navigation bar.

What if the widget does not appear on the live app?

Start with the most common cause and work down the list.

• Confirm you published after you saved the custom code.
• Open the browser console on the live page. A content blocker or a Content Security Policy can stop the widget file from loading, and the console will name the blocked URL.
• Check allowed origins in the product settings. A submission from an address that is not on the list returns a 403 response. If your app runs on a builder subdomain and a custom domain, add both with https.
• Clear the cache or reload in a private window. An older copy of the app can keep an earlier version of the code.

Repeat the whole test after each change to the custom code, and keep a note of the date you last tested. Builders update their editors and their domains without warning, so a check that passed last month is only a starting point. A two-minute test after every publish catches most problems before a customer does.

Routing Softr feedback into your Escuta Produto inbox

Create one product for the app, so every message from it lands in the same inbox. The saved page URL shows which screen a complaint came from, which is faster to act on than a vague note. Use the type filter to separate bugs, ideas and praise, and the status filter to show what you have decided.

Use internal notes to record why you chose a status, such as a bug you could not reproduce. Those notes stay private to your team, so you can write candidly without replying to the customer.

Related

• Every widget option, including identify and the JavaScript API, is in the widget docs.
• If you cannot add custom code at all, the hosted feedback page needs only a link.
• For another app builder with a similar setup, see Glide and Webflow.
• To decide what to do with what you receive, read how to triage customer feedback.