Fruitback Docs
fruitback.com GitHub
All the docs

Docs Reference Widget options

Widget options

What init takes beside the address of the worker and the id of the site, and what the widget gives back.

What else init takes

Option Why you would
label the text on the floating button
locale the language to show, as a tag like fr or pt-BR: the browser’s by default
messages your own words for that language: see Another language
ignore elements the pointer must skip: your own chrome, a support chat, a cookie banner
identityToken a signed token, so a reporter is verified: not on a site of the console yet, see Identified reporters
includeEnv true to send the reporter’s user agent, language and platform: off by default
transport who carries the calls: the extension’s, in team mode
showSelectors true to show the CSS selector of the element in the thread of a pin and in the head of a new note: off by default; the issue keeps it
selectorInHead always to write the CSS selector in the head of a new note whatever showSelectors says. The default is with-selectors: the head writes what the element says (Commander · <Button>)
position the corner of the dock: bottom-right (the default), bottom-left, top-right or top-left: data-fruitback-position on the tag
hide a function that hides the widget on this page: the settings then end with « Hide Fruitback on this page », which calls it

One part of the fragment is the widget’s: fruitback-note=<id>. A link like https://staging.acme.dev/pricing#fruitback-note=<id> opens that note on its page, and the widget then takes its part out of the address. The rest of the fragment is yours: #pricing is neither read nor changed, and #pricing&fruitback-note=<id> leaves #pricing.

The feedback of a page, as text

The settings panel has a button, Copy the notes as text. It puts the notes of the page in the clipboard, as Markdown: one block per note, with its status, the element it points at, the component and the file behind it when your build exposes them, who wrote it, and the team’s replies.

# Notes on https://staging.acme.dev/pricing

## 1. FB-12 — To do

- Element: button "Add to cart" · `[data-testid="card-latte"] .add`
- Component: Button · src/components/site.tsx:42
- By: Camille Durand · 2026-10-06

> The price is cut off on mobile

Reply from Léa · 2026-10-07

> Fixed in the next deploy.
  • It is what the reviewers wrote and where, and nothing else. No instruction and no introduction. Paste it into a ticket, a message or an agent, and write your own request around it.
  • Every line a reviewer wrote starts with >. A note is text from anybody who can reach the page. Quoted, it cannot pass for a heading or a line of the format. It is still somebody else’s text: an agent that reads it must treat it as data.
  • It follows the panel: a stage the reporter hid is not copied. A note whose element is gone is copied, and says so.
  • The labels follow the language of the widget. The dates are 2026-10-06 in every language.
  • The same text comes from your own code, with no request to the worker:

    const widget = init({ endpoint: WORKER_URL, clientId: 'site_…' });
    const text = widget.feedbackAsText();