Build-tested 6 October 2026

Astro feedback widget: install guide

Add a feedback widget to the Astro layout your pages actually use. An external classic script can open the hosted feedback form without a React island, a hydration directive or an extra package.

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 Astro 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 src/layouts/Layout.astro

Put the external script after <slot /> in your shared layout. is:inline tells Astro to leave this script as written; its code still comes from the external src. Preserve your metadata, slot and other layout content.

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

Make sure your pages use the layout

---
import Layout from '../layouts/Layout.astro';
---
<Layout>
  <h1>My site</h1>
</Layout>

An unused layout cannot load the widget. Wrap every page that should offer feedback in this layout. The proof covers two pages with normal document navigation.

Why this external script uses is:inline

Astro normally processes eligible script tags, bundles them and adds module behavior. This widget reads document.currentScript and its project attributes, so leave it as a classic external script. is:inline makes that intent explicit. It does not mean copying the widget’s contents into your HTML; do not import it or add type="module".

ClientRouter and View Transitions need a lifecycle check

Normal page navigation reloads the layout and its widget. With ClientRouter, swapping the body can remove the widget’s host while leaving document listeners alive. Astro’s data-astro-rerun can rerun an inline script, but adding it alone is not a verified integration.

If your site uses ClientRouter, keep this route on full document navigation (Astro supports data-astro-reload on links), or have your developer wire cleanup before the swap and one initialization afterwards. The widget exposes patchkind:destroy on its host for cleanup. Neither ClientRouter nor that adaptation was tested in this proof; check repeated navigation before relying on it.

Astro View Transitions script 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.

Astro troubleshooting

• No script in the rendered HTML: confirm the page imports and uses src/layouts/Layout.astro; an unused layout does nothing.
• Widget became a module: preserve is:inline, the external src, and data-project. Do not add a client hydration directive.
• Stops after a ClientRouter transition: return to full document navigation while you verify cleanup and reload behavior. Do not repeatedly inject scripts without removing their listeners.

• 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: Astro 7.3.6. 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.

Astro script-placement documentation

Other framework guides

Next.js feedback widget install guide

Vite + React 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.