Does Patchrooms work on a Framer published preview?

Yes. The embed script runs on any page Framer serves, both staging previews and published production sites. Reviewers only need the link; they do not need a Framer account.

Where do I add the Patchrooms script in Framer?

Go to your Framer project settings → Custom Code → End of . Paste the Patchrooms script tag there and republish. It will appear on every page of your site.

Can clients leave feedback without signing up?

Yes. The review widget opens directly on the page. Clients click an element, type a comment, and submit. No account or login required.

Patchrooms for Framer

Add visual feedback to your Framer app

Framer is a design-and-publish platform where teams build and ship websites visually, with an instant shareable preview for every version. Patchrooms layers element-anchored feedback on top, so every comment turns into agent-ready context.

Try the live demo

Why Framer teams need visual feedback

Framer makes it easy to publish a polished preview for client review, but the only feedback channel is an email thread full of vague notes.
"The hero section feels crowded" means nothing without knowing which element, which viewport, and what the intended feel should be.
Going back and forth over screenshots in Slack burns revision cycles and delays the sign-off your client needs to give.
Patchrooms lets reviewers click directly on the published Framer preview, leave pinpoint comments anchored to each element, and export structured feedback you can act on immediately.

How Patchrooms works with Framer

Paste the Patchrooms script into your Framer project

In your Framer project settings, go to Custom Code and add the Patchrooms script before the closing </body> tag. It activates a review layer on every published preview without touching your design.
Share the preview link with your client or team

Anyone with the link clicks an element on the live Framer site, types what needs to change, and Patchrooms captures the CSS selector, a screenshot, and the page context automatically. No Framer account needed to review.
Act on structured sign-off feedback

Every comment exports as clean Markdown with the element selector, the goal, and the constraints. Use it to brief your designer or paste it into an AI agent: feedback lands directly on the right component.

What your agent receives

Each pinpoint comment exports as clean Markdown with the element selector, the page and viewport, and the console state alongside the ask.

## Feedback: Checkout submit button

Element: button[data-patchroom-id="checkout-submit"]
Page: /checkout · 1440×900 · Chrome 126

Issue
Stays clickable while required fields are empty and
submits an invalid form.

Expected
Disabled until the form is valid: reduced opacity
+ aria-disabled="true".

Console
POST /api/order 422 (validation_failed)

Add it with one script

Paste a script tag

Paste this snippet into the HTML your Framer project serves. It loads on the live preview and turns on artifact-review mode: pinpoint comments anchored to the elements your reviewers click.

<script src="https://room.patchrooms.com/v1/patchrooms.js"
        data-project-key="pr_xxx"
        data-source="framer"
        data-mode="artifact-review"></script>

Or try it locally: no account, no key, no server

Reviewing a Framer artifact on your own machine? Run Patchrooms in local mode: no account, no project key, zero network calls. Pinpoint comments stay in your browser and export to Markdown you paste straight back into Framer.

<script src="https://room.patchrooms.com/v1/patchrooms.js"></script>
<script>
  Patchrooms.init({ storage: 'local', mode: 'artifact-review' });
</script>

Review workflow

Share the preview link with your team or client. Anyone clicks an element, types a comment or records a voice note (Patchrooms auto-transcribes it to clean text), and captures the selector, a screenshot, and the page context. Every comment carries a status (new, triaged, in-progress, closed) so nothing falls through the cracks. See the full UI review workflow.

Export feedback to your AI agent

Each report exports as clean Markdown with the element selector, a screenshot reference, and the artifact goal and constraints. Paste it straight into Framer and the agent fixes the exact issue: this is the heart of AI artifact review. The Patchrooms MCP server lets agents read reports directly (list_reports / get_report) and triage them (set_status). Available now; extended MCP tools (create_room, issue creation) are planned, and a @patchrooms/react package is coming for tighter React integration.

FAQ

Does Patchrooms work on a Framer published preview?: Yes. The embed script runs on any page Framer serves, both staging previews and published production sites. Reviewers only need the link; they do not need a Framer account.
Where do I add the Patchrooms script in Framer?: Go to your Framer project settings → Custom Code → End of <body>. Paste the Patchrooms script tag there and republish. It will appear on every page of your site.
Can clients leave feedback without signing up?: Yes. The review widget opens directly on the page. Clients click an element, type a comment, and submit. No account or login required.