Feedback widget

1. Turn it on for a project

Open the project in Loki, go to Feedback, tap … and Set up the widget. Then choose Put it on the site, which creates the project's key and asks an agent to add the line to your site, or Turn on only if you will add it yourself. Next.js sites started from Loki's starter already have it.

<script src="https://loki.orangecat.ch/widget.js"
        data-fc-project="fcw_…" async></script>

The key in that line is public on purpose and can only send: it files feedback for this one project and can read nothing. Only your project's own web address may use it; reports sent from anywhere else are turned away.

2. Install it — two ways

• Copy snippet — paste the line into your site's main template, before </body>. It works with any framework.
• Install via agent — for projects with a repository, an agent adds the line to your code, checks the page still loads, and ships it the way your project ships changes. It will not add a second copy if one is already there. Remove via agent takes it out again.

3. Where the button sits

Nothing to set up in the usual case. The button looks for a free corner each time the page loads, scrolls or changes, and stays off anything a visitor could click — your links, buttons, form fields, chat bubbles and bottom bars. If every corner is taken, it becomes a slim tab on the side edge until a corner clears, so it is never missing.

For the cases it cannot see, mark your page:

• data-fc-avoid on any element — the button never covers it.
• data-fc-place="left" or "right" on <html> or on part of a page — keep the button on that side.
• data-fc-place="tab" — show the slim edge tab instead of the corner button while that part of the page is showing, for pages whose corners are busy (a terminal, a chat composer).
• data-fc-place="hidden" — no button while that part of the page is showing, for example on a checkout. Give people another way in there: Loki.report() from your own link opens the panel.

The older data-fc-bottom="88" on the script line still works and lifts the button by that many pixels.

4. What visitors get

A small button on every page. Opening it, the visitor picks what they mean — Element (they click the exact thing that is wrong, and the widget notes which one), This page, or Whole site — writes what should be better, can add a picture (it is shrunk in their browser, so a phone photo never uploads megabytes), and can leave a name or email. The widget is sealed off from your page, so your styles and its styles cannot interfere.

The same complaint sent twice does not pile up: it adds to a counter on the existing report (shown as ×N), so you still see how many people hit it.

Visitors can speak instead of typing — useful on a phone. What they say appears as text they can edit, and they still press Send.

One conversation with Loki. Most people you build a site for are not web professionals and cannot tell a mistake from a convention. In the panel they simply talk to Loki — about the page, the whole site, or an element they point at — and get an honest second opinion that may well be “leave it”. Every change Loki suggests, and their own message as written, has Send to builder, which becomes an ordinary report; the receipt and a tracking link land in the same conversation, which survives their page loads. Loki reads an outline of the page — headings, words, links, buttons — not a picture of it, and says so. Answers are charged to your AI budget. data-fc-modes="report" on the script line turns the answers off.

Watch is in the panel’s header. On your own site, press it and sign in with Loki: you come straight back with Loki watching how you use the page, fixing what breaks, and on Review saying what to improve. Visitors are never watched.

A studio front desk instead of site advice: with data-fc-modes="chat" the Cat and Loki point visitors to the right project.

Visitors can hide it. Hide this button on this site at the foot of the panel hides it for that visitor only, with an Undo. Opening any page with #loki at the end of the address brings it back.

Visitors can follow their report. Someone who signs in to Loki sees every report they have sent, and where its fix stands, on My feedback.

The microphone needs your site's permission. If your site sends a Permissions-Policy header with microphone=() — which several security presets do by default — browsers block the microphone everywhere on your site and never ask. The widget notices and does not show the button, rather than one that can only fail. To allow it, send Permissions-Policy: microphone=(self). Everything else works either way.

5. Change it without redeploying

The line on your site only points at Loki; everything else is decided on Loki's side. Each time a page loads, the widget asks Loki whether to show itself, and that same call tells Loki the widget is really running:

• The setup card only says the widget is running on your site once that call has actually arrived from it — not just because the line is in your code.
• Pause / Resume hides or shows the widget on your site within about 30 seconds, without touching your code.
• Rotate makes a new key (the old line stops working); Disable switches it off for good.

6. From report to fix

Reports land in the project's inbox and in Feedback (after you sign in), which shows every project's reports in one list and what stage each fix is at. On the project you have:

• Implement — one report becomes one agent run, on whichever builder the project runs on. You do not pick a terminal.
• Implement all as one (two or more new reports) — one agent run that covers the whole pile, when you want a single fix now.
• Synthesize (three or more new reports) — an agent groups them into a few clear briefs, filed back into the same inbox, which you then implement. Nothing does this on a schedule; it runs when you press it.
• AI review — an agent opens a page of your site in a browser, at desktop and phone size, and files what it finds into the same inbox.

7. Your own notes start the work

When you open your site from the project in Loki, the widget knows it is you. A note you leave that way starts an agent on it straight away, with no second click — say what to change and it gets built. To keep a leaked link from running up costs, this is capped at 40 a day per project; past that, notes wait in Loki for you to start them.

What a visitor writes never runs by itself. Their text could say anything, so it reaches an agent only after you press Implement. That click is a safety boundary, not a formality.

8. You close the loop

Every report remembers the run that worked on it, so you can see what shipped against it. Once a fix is out, Watch the fix opens your page and tells the story of the change in about a minute: the report and the screenshot that came with it, what was actually wrong, the change shown live with a pointer, why it was done that way, what else was considered, and who it helps. Back, Pause and Next set the pace. If a step cannot be shown, it says so and files that back into your inbox, so a fix that did not really land comes back to you. The person who reported it gets their own shorter version on their feedback page: their words, the change shown live, and one plain sentence about what changed for them, without the technical reasoning. Share gives you a link for anyone else: it opens the live site and plays the same walkthrough there in plain words, without the reasoning, the pull request, or the reporter's words and screenshot.

If it is not quite right, say so on the walkthrough's last card — typed or spoken — and the fix starts again with your words. Show me first redraws the live page the way you described it, on your screen only, so you can see an idea before anything is built; Build this sends it, Undo puts the page back.

Marking a report resolved is your call — a finished run is not proof the problem went away. When you do, any visitor who left an email gets a short note that their feedback shipped. People who hear back report again; that is the point.

Security model

• The key can only send feedback for one project; reading anything needs your sign-in.
• Only your project's own address may use the key; sending is rate-limited.
• Pause, rotate and disable take effect on your site without a deploy.
• Visitor text reaches an agent only after you click. Only your own notes, left while signed in as the owner, start work by themselves — at most 40 a day per project.