Replit Agent

Ask Replit Agent to add the Patchrooms loader to the app it builds and hosts — reviewers comment in place on the live deployment, and you hand the structured feedback back to the agent.

Prerequisites

A Replit app built with Replit Agent that you can chat with and re-prompt.
A project key (pr_…) from your Patchrooms dashboard.

How it works

Replit Agent builds and hosts a full app, so you don’t paste a <script> tag by hand — you either drop it into the served HTML template yourself, or tell the agent in plain language to add it. The widget then loads on every hosted preview and on the deployed page. Reviewers click any element to comment, and reports stream into your Patchrooms dashboard.

Copy-paste prompt

Paste this into Replit Agent’s chat, replacing pr_xxx with your project key:

Add the Patchrooms review widget to this app so reviewers can comment in place on the hosted page.

Insert this loader script tag into the served HTML, just before the closing </body> tag, exactly as written:

<script src="https://room.patchrooms.com/v1/patchrooms/pr_xxx.js"></script>

(Replace pr_xxx with my key.) This per-project loader carries my project config, so the widget auto-initializes — no extra JavaScript needed.

Put it in the root HTML template so it loads on every page the app serves. For a framework that owns its own template (Next.js, Vite, Express + a view engine, etc.), add it to that template, not inside a single component.

Never put any API keys, secrets, or personal data in the page. pr_… is a public project key and is fine to include; never paste a secret pr_sk_… key into the app.

The install snippet

The widget loads from a single per-project script tag. The key lives in the URL, and the server inlines your config so the widget auto-initializes:

<script src="https://room.patchrooms.com/v1/patchrooms/pr_xxx.js"></script>

Programmatic alternative (use when you want to set options from JavaScript):

<script src="https://room.patchrooms.com/v1/patchrooms.js"></script>
<script>
  Patchrooms.init({ projectKey: 'pr_xxx' });
</script>

projectKey goes inside init() — it is not a script-tag attribute. The UMD build attaches window.Patchrooms.

Where it goes

The script tag belongs in the page <head> or just before </body> in the HTML the Replit app serves.

Static / templated HTML
React / SPA

Add the loader to the root HTML file (e.g. index.html, or the layout template your server renders) so it appears on every served page.

Render the <script> tag in index.html (not inside a component) so window.Patchrooms exists before app code runs.

Verify it works

Open the hosted preview (or the deployed URL) of your Replit app.
Look for the Patchrooms launcher docked to the edge of the viewport. If it’s there, the widget loaded.
Click any element to drop a comment. Open your Patchrooms dashboard — the report should stream in live.

Your first feedback

Open the hosted page, click a primary element (a button, a header, a form field), and leave a comment like:

This button label should say “Pay now”, and the spacing above it is too tight.

You can attach a screenshot, an element selection, or a voice note in the same thread. The report lands in your Patchrooms dashboard the moment you send it.

Export back to Replit Agent

From your Patchrooms dashboard, open a report and copy it as Markdown — element selector, comment, and page context included. Paste that back into Replit Agent’s chat and ask it to patch. The agent edits the source and re-deploys, and you review the new build the same way.

Troubleshooting

Symptom	Fix
No launcher appears	Confirm the `<script>` is in the rendered HTML and loads (Network tab). In a React/SPA app, the tag must be in `index.html`, not a component.
Console: `[Patchrooms] unknown project key`	The `pr_…` key in the loader URL is wrong. Copy it again from the dashboard.
The agent put the tag in one component	Move it to the root HTML template so it loads on every served page.
Reports never arrive in the dashboard	Check the loader URL contains your real `pr_…` key, and that the page is actually served (not just shown in an editor preview pane).