Feedback widget for Astro

Before you start

1. Sign in with GitHub and install the feedback2code GitHub App. Choose the repository that holds the code of the site.
2. Open the repository in the dashboard, go to Configure and add the domains the widget may run on.
3. Copy the snippet from Embed Widget. It contains your widget ID.

Add the widget

<html lang="en">
  <body>
    <slot />
    <script
      is:inline
      async
      src="https://www.feedback2code.dev/widget/YOUR_WIDGET_ID"
    ></script>
  </body>
</html>

Replace YOUR_WIDGET_ID with the ID from your dashboard. is:inline tells Astro to leave the tag exactly as written instead of bundling it. Without it, Astro would try to process the script.

What the agent can change

The agent works on the repository of the site: Markdown and MDX content, Astro components, layouts and styles. Typos and copy changes in content collections are a good fit.

Every change arrives as a pull request. Nothing is merged or deployed until you do it, so your usual review and deployment stay as they are.

Good to know

• Add localhost to the authorized domains to see the widget with astro dev.
• With a Content-Security-Policy, allow https://www.feedback2code.dev in script-src and frame-src.
• Put the tag into the layout that every page uses. Pages built on a different layout will not show the widget.

Test it

1. Deploy the change and open the site on an authorized domain.
2. Click the button at the bottom right and send one small, concrete request.
3. Open your dashboard. The submission starts as coding and turns to awaiting review once the pull request is open.

What a submission contains and how the plans differ is described on the page about the website feedback widget.

Other setups

• Feedback widget for Next.js
• Feedback widget for React apps
• Feedback widget for Vue and Nuxt
• Feedback widget for static HTML sites
• Feedback widget for WordPress themes
• Feedback widget for Shopify themes

Questions and answers