Feedback widget for Astro

PushFeedback collects user feedback directly from your website. This guide covers installation in an Astro project.

important

If you're using Starlight, the documentation framework built on Astro, refer to Feedback widget for Starlight.

Prerequisites

Before you begin, you need:

• A PushFeedback account. If you don't have one, sign up for free.
• A project created in your PushFeedback dashboard. If you haven't created one yet, follow the steps in the Quickstart guide.
• An Astro project.

Installation

1. Open your Astro project in your preferred code editor.

2. Locate the src/layouts/Layout.astro file (or any layout file that wraps your pages) and insert the following code within the head section:

   <!-- Initialize the PushFeedback widget -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pushfeedback/dist/pushfeedback/pushfeedback.css">
   <script type="module" src="https://cdn.jsdelivr.net/npm/pushfeedback/dist/pushfeedback/pushfeedback.esm.js"></script>

3. Just before the closing body tag of your layout file, add the following snippet:

   <feedback-button project="<YOUR_PROJECT_ID>" button-position="bottom-right" modal-position="bottom-right" button-style="dark">Feedback</feedback-button>

   Replace <YOUR_PROJECT_ID> with your project's ID from the PushFeedback dashboard.

4. Open the website in a web browser to verify the feedback button appears and works correctly.

Next steps

Choose what to do next:

• Customization — Adjust the widget's layout, styles, and text.
• Integrations — Forward feedback to Slack, email, Jira, and more.