Build-tested 6 October 2026

Vite + React feedback widget: install guide

Add a feedback widget to Vite + React through index.html, outside the React component lifecycle. Your existing React entry stays unchanged, and the same script supports a corner button or your own footer link.

What you need

• An invited Patchkind owner account and a project for this app. The beta is free and invite-only.
• Access to your existing Vite + React app’s source. There is no Patchkind package to install.
• Your project’s public ID from Setup → Install with AI → “Prefer to add the code yourself?” → HTML / Vite. It routes feedback and grants no owner access. Never put a secret in this snippet.

1. Copy your project’s snippet

Open the Patchkind workspace

In Setup → Install with AI → “Prefer to add the code yourself?” → HTML / Vite, copy the code. Replace every YOUR_PUBLIC_PROJECT_ID below with your own 32-character public ID. This is the same format the install screen produces.

<script src="https://relay-feedback.ccc333888.chatgpt.site/widget.js" data-project="YOUR_PUBLIC_PROJECT_ID" async></script>

The integration address remains https://relay-feedback.ccc333888.chatgpt.site. Marketing uses patchkind.com; embedded feedback stays on the tested integration host. Do not substitute the marketing domain.

2. Put it in index.html

Keep the React module entry and add the Patchkind classic script just before </body> in root index.html. Do not add type="module" to the widget. Vite processes the HTML entry during the build; the widget itself stays externally hosted.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My app</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
    <script src="https://relay-feedback.ccc333888.chatgpt.site/widget.js" data-project="YOUR_PUBLIC_PROJECT_ID" async></script>
  </body>
</html>

Development versus the production build

Use your usual Vite dev server while editing. Before shipping, run your existing build and open the output with vite preview for a local production check. Preview is a test server, not your production hosting setup. The proof below uses production output with @vitejs/plugin-react enabled.

Development and production feedback routing

Keep the script’s service origin as https://relay-feedback.ccc333888.chatgpt.site in every environment. The widget detects your app’s current origin and pathname, so a localhost report is distinguishable from a production report. It deliberately omits query strings and fragments.

If you want separate staging and production feedback, create separate Patchkind projects and use the corresponding public ID for each build. Vite supports HTML replacement such as %VITE_PATCHKIND_PROJECT_ID%; set it for every mode before building. An undefined placeholder stays literal and will not be a valid project ID. VITE_ values are public build output: never use an owner key here. The proof uses a literal public ID, not environment replacement.

Vite modes and HTML environment replacement

Keep React StrictMode; keep the script outside effects

React StrictMode repeats effect setup and cleanup in development to expose lifecycle mistakes. Loading this script in index.html avoids tying it to a component mount. Do not append another copy in useEffect to fix a missing button. Our fixture renders under StrictMode, but its production build does not exercise development-only repeated effects.

React StrictMode behavior

Optional: use your own “Report a problem” link

Keep the script installed and put this anchor in your footer or menu. The project-scoped trigger opens the same panel. If the script is unavailable, its href opens the hosted form in the current tab.

<a href="https://relay-feedback.ccc333888.chatgpt.site/f/YOUR_PUBLIC_PROJECT_ID" data-patchkind-open="YOUR_PUBLIC_PROJECT_ID">Report a problem</a>

To hide the corner button, add data-launcher="none" to the script or Next.js Script component. Keep your own link visible. We separately built this variant in each framework’s actual layout. With no script at all, the same anchor is a hosted-form fallback; it does not attach your app’s page.

3. Check that a note arrives

1. Build and open your app. Check the button or link on desktop and phone.
2. In Setup → Install with AI, expand “Send the test yourself” and copy the exact test label. Open feedback from your app, send it through the real form and complete verification.
3. Return to the same project’s Setup → Install with AI tab and press “Check for test”. You can also inspect the note and attached page in Feedback. Labelled installation checks are intentionally excluded from the Inbox’s needs-review count.
4. Publish through your app’s normal process and repeat the delivery check. A build or visible button alone does not prove live delivery.

Patchkind installation check YOUR_PUBLIC_PROJECT_ID: this test was sent from the feedback button in the app.

Vite + React troubleshooting

• Works in dev but not the build: check the emitted HTML and the project ID for that build mode, then test with vite preview before your usual deployment.
• React mounts twice in development: keep StrictMode enabled and install in index.html, not an effect. Check for a second manual widget loader.
• Using a Vite SSR framework: its server document entry replaces this client-only HTML recipe. Do not import the widget on the server; use that framework’s supported browser-script placement.

• No button: check the 32-character public ID and script request. data-disabled="true" disables the widget; data-launcher="none" deliberately hides only the corner button.
• Note missing: check the ID in both script and link, the selected project’s Feedback list, and whether the form reported success. Privacy extensions can block third-party resources; keep the hosted link as a fallback.

Browser policy checklist

Based on the widget’s requests, not tested with a CSP: allow https://relay-feedback.ccc333888.chatgpt.site in script-src, style-src and frame-src, plus element directives if explicitly set. The widget loads /widget.css too. Preserve your policy; do not disable CSP or add unsafe-inline just for this widget. Nonces, strict-dynamic and Trusted Types need their own review.

If your app uses Cross-Origin-Embedder-Policy: require-corp, verify that its cross-origin resources and frame are permitted; use the hosted link until confirmed. Permissions-Policy: display-capture can restrict screenshot capture in embedded contexts. Capture also needs browser support and consent; image upload remains an alternative. These policy combinations were not exercised in the build proof.

What we checked

Build-tested 6 October 2026: Vite 8.3.3 + React 19.2.8. We built the corner-button and hidden-launcher variants from the real layouts, then loaded production output with the real widget script and stylesheet against a local mock form. Checks cover stylesheet delivery, custom links, a second page, labelled mock submission, and no console errors or failed integration requests. This does not verify live storage, Turnstile or your security policy.

Vite + React script-placement documentation

Other framework guides

Next.js feedback widget install guide

Astro feedback widget install guide

Other frameworks: use the HTML snippet from Setup → Install with AI → “Prefer to add the code yourself?” → HTML / Vite, placed once in your framework’s shared browser entry.

After feedback: the Claude Code workflow

Installing the widget does not grant repository access or start a coding worker. GitHub connection and Claude credentials are separate owner steps. Approving a plan and starting a run stay separate.