Skip to main content

Feedback widget for Astro

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

info

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

Feedback widget for docs screenshot

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.