How to connect Feedbaq to your product

<script>
  window.feedbaq = window.feedbaq || function () { (window.feedbaq.q = window.feedbaq.q || []).push(arguments); };
</script>
<script src="https://feedbaq.to/embed.js" data-workspace="your-workspace-id" async></script>

<a href="https://feedbaq.to/acme/in-product-feedback#panel">Send feedback</a>

Connect your product

In Feedbaq, go to Settings, then Connect product. Tick the attributes you want on each response, such as email or plan, or add your own. The code on the page updates as you tick, and it already includes your workspace ID. You don't need to tick anything for the basics: Feedbaq records the browser version, operating system, device, window size, language, time zone and country on its own.

• The script goes in the layout that every page shares. One script covers every study in your workspace.
• The identify call tells Feedbaq who is signed in. Put it where your code knows the current user, and swap user for your product's own variable.

// "user" is the person who is signed in. Use your product's own variable.
feedbaq("identify", { email: user.email, name: user.name, company: user.company, plan: user.plan });

// When they sign out:
feedbaq("reset");

As soon as someone opens a page with the script, Connect product shows your product as connected. If that page runs on a developer's computer, the page says so, and your customers get it once the change is released.

Let your agent do it

Rather hand it off? On Connect product, choose Copy AI agent instructions and paste them into Claude Code, Cursor, Codex or any other coding agent. They include everything the agent needs, so it doesn't have to be connected to Feedbaq:

Connect this product to Feedbaq, so studies can open on the product's own pages and each response shows who gave it.

1. Load the script once, in the layout every page shares:
   <script>
     window.feedbaq = window.feedbaq || function () { (window.feedbaq.q = window.feedbaq.q || []).push(arguments); };
   </script>
   <script src="https://feedbaq.to/embed.js" data-workspace="your-workspace-id" async></script>

2. Where the product knows who is signed in, tell Feedbaq who they are, using values the product already has. Send these attributes: email, name, company, plan. Leave out any the product does not have:
   feedbaq("identify", { email: user.email, name: user.name, company: user.company, plan: user.plan });
   Call feedbaq("reset") when they sign out.

3. If the site sets a Content-Security-Policy, add https://feedbaq.to to script-src, connect-src and frame-src. If it sets a Permissions-Policy, allow https://feedbaq.to for microphone and display-capture.

4. Run the product and open any page while signed in. Feedbaq's Connect product page then shows the product as connected. If it does not, read the browser console: lines that start with [feedbaq] say what to fix.

Show me what you changed. Guide: https://feedbaq.to/help/in-product

To add a study later, copy its link and ask your agent to put it behind a feedback button. If your agent is connected to Feedbaq's MCP server, it can fetch the link itself with get_study, so you can simply ask it to add the study.

Add a study

Publish your study and open Share. Once your product is connected, you get two links: In your product opens the study in a panel on the page, and In a new tab opens it as its own page. Copy the one you want and put it behind a button or link in your product, such as the help menu, the account menu or settings. Site builders work too, because a link is all they need.

The panel link is your study's address with #panel at the end. On pages with the script, a click opens the panel. Anywhere else, or if an ad blocker stops the script, it opens the study's own page instead. The new-tab link always opens a new tab from your product, so your product stays where it was. Clicked inside your product, both links carry the attributes. Developers can also turn any element into a study button with data-feedbaq-open:

<button data-feedbaq-open="acme/in-product-feedback" data-feedbaq-trigger="settings">Send feedback</button>

A link you send by email or post elsewhere opens as a normal page without attributes, because your product's script isn't there to add them. To fill them in from your email tool, see Attributes on a plain link.

Say who is answering

Your product already knows who is signed in, so let it tell Feedbaq. Each response then shows the person and their account, you can filter responses by plan or account, and your agent can compare answers across them. Send whatever you already have, and call reset when someone signs out.

window.feedbaq = window.feedbaq || function () { (window.feedbaq.q = window.feedbaq.q || []).push(arguments); };

feedbaq("identify", { id: "u_123", email: "ana@acme.com", name: "Ana", plan: "pro", account: "Acme", release: "2026.11.2" });

feedbaq("reset");

The first line lets you call it before the script has loaded. These fields have a fixed place on each response:

Each value can be up to 200 characters. Feedbaq stores what your product sends without checking it. If a value changes while someone is on a page, update it with setContext. Mention the data you send in your own privacy policy.

The attributes you tick on Connect product are only a starting point. You can change the identify call whenever you like, and Connect product always lists what Feedbaq actually receives. A new attribute shows up as soon as a page sends it. One you remove disappears soon after someone opens the updated page, or after 7 days at the latest.

Every study keeps every attribute by default. To leave one out of a study, untick it under Participant attributes in that study's Share dialog. It takes effect right away and needs no code change: your product keeps sending it, and Feedbaq doesn't store it for that study.

Open it from your own code

You can also open a study from your own code, for example right after someone finishes checkout:

feedbaq("open", { study: "acme/checkout-feedback", trigger: "checkout-done", once: true });

close closes the panel. If a screen recording is running, the panel stays open until it ends. To react to what happens, listen with on:

feedbaq("on", "completed", ({ study, responseId }) => { /* thank them */ });

The events are open, ready, started, completed and close. They come from the browser, so use them to update your interface, not to grant rewards or access.

What each response records

• The page: its address, title and window size, and the site the person came from. Feedbaq keeps the path and any utm_ values, and drops other query values and anything after #, because those often hold tokens or emails.
• The browser: browser, operating system, device, language, time zone, screen size and country. Feedbaq never stores the IP address.
• A replay link, when the page exposes Sentry Replay, PostHog, LogRocket or FullStory on window. You see what happened before the person answered, and you hear what they meant. When the tool is bundled into your own code, pass its link with setContext.

The script only reads the page once a study starts loading, which happens when someone points at or clicks a study link. Before that, it sends Feedbaq just your site and the names of the attributes you pass, never their values. It does this at most once an hour in each browser, or when the names change, so Connect product can list them.

On each response, all of this sits in a table at the top, with the person first. You can filter responses by page, plan, account, release, flags and country, export everything to CSV, and ask your agent about it.

feedbaq("config", {
  keepParams: ["tab"],                     // query values worth keeping
  sanitize: (page) => ({ title: null }),  // the last say over page details
  sentry: { org: "acme" },                // needed to build a Sentry replay link
});

feedbaq("setContext", { replayUrl: () => myReplayTool.currentUrl() });  // a link, or a function that returns one

sentry: { flush: true } also saves a buffered Sentry replay when the study opens. It counts toward your Sentry quota, so it stays off unless you turn it on.

Attributes on a plain link

A plain study link can carry attributes too, which is handy when your email tool can fill in each person's details. Ask an agent connected to the MCP server to set linkFields on the study, for example plan, company, email, then publish. Your links can then include them:

https://feedbaq.to/acme/in-product-feedback?plan=pro&company=Acme#email=ana@acme.com

Feedbaq keeps only the fields you listed and ignores the rest. Put anything personal after #: browsers never send that part to a server, so it stays out of logs. These links work in the panel too.

Security headers

If your site sets a Content-Security-Policy, allow Feedbaq for scripts, connections and frames. If the policy blocks inline scripts, move the line from the first script tag into your own code.

Content-Security-Policy: script-src https://feedbaq.to; connect-src https://feedbaq.to; frame-src https://feedbaq.to

The microphone and screen recording only work over HTTPS. If your site sets a Permissions-Policy, allow Feedbaq for both:

Permissions-Policy: microphone=(self "https://feedbaq.to"), display-capture=(self "https://feedbaq.to")

Browsers, phones and apps

• Screen recording starts from the panel. Chrome and Edge suggest the current tab first, so people can show the problem in your product while they talk. Firefox and Safari show their own picker. While recording, the panel shrinks to a small bar with a Stop button.
• Moving around. The panel stays open while people move around a single-page app. A full page load closes it and stops any recording, so if every click on your site loads a new page, use the new-tab link for studies with screen questions.
• Phones and tablets. In a window narrower than 560 or shorter than 500 pixels, the panel fills the window. Voice, text and choice all work there, and a screen question falls back to the other formats you allow.
• Native apps. Open the study link in the system browser, with SFSafariViewController on iOS or Custom Tabs on Android. A web view works too when your app grants it the microphone.

Troubleshooting

Open the browser console. Lines that start with [feedbaq] say what to fix, and a coding agent can read them too.

• Connect product keeps waiting. Check that the script is on a page someone has opened since the change. Then check the console, and connect-src if the site sets a Content-Security-Policy.
• No attributes appear. Open the product while signed in, and check that your code reaches the identify call. The console shows an error if user is not your product's variable.
• The panel says it cannot find the study. Publish the study, or check the address. The panel works as soon as the study is live, with no code change.
• The panel offers a new tab instead. The site's Content-Security-Policy blocks the frame. Add https://feedbaq.to to frame-src.
• The microphone does not work in the panel. Check that the page is on HTTPS, then its Permissions-Policy. The browser asks for permission on behalf of your site, so someone who blocked it needs to allow it again in the settings for your site.
• The panel link opens the study's own page. Check that the link ends in #panel. Then the script did not load: check that it is on the page, then the script-src rule, then any ad blocker.

Still stuck? Write to peter@feedbaq.to with the page address and what the console says.