For the complete documentation index, see llms.txt
Skip to main content

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​

Floating button​

Example page with a floating Feedback button on the right edge

  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.

Inline button​

Example page with an inline Feedback button

  1. Load the widget in the <head> of src/layouts/Layout.astro:

    <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>

  2. Place the button in your Astro layout or page, after the content:

    <feedback-button project="<YOUR_PROJECT_ID>" button-position="default" modal-position="center" button-style="dark">Feedback</feedback-button>

Embedded form​

Example page with the feedback form embedded in the content

  1. Load the widget in the <head> of src/layouts/Layout.astro:

    <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>

  2. Place the form in your Astro layout or page, after the content:

    <feedback-modal project="<YOUR_PROJECT_ID>" embedded="true"></feedback-modal>

Like and dislike buttons​

Example page with inline like and dislike buttons

  1. Load the widget in the <head> of src/layouts/Layout.astro:

    <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>

  2. Place the rating controls in your Astro layout or page, after the content:

    <p>Was this helpful?</p>
    <div class="pushfeedback-thumbs-row">
      <feedback-button project="<YOUR_PROJECT_ID>" rating="1" button-position="default" modal-position="center" button-style="default" custom-font="true">
        <span class="pushfeedback-thumb-label">Helpful</span>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3" /></svg>
      </feedback-button>
      <feedback-button project="<YOUR_PROJECT_ID>" rating="0" button-position="default" modal-position="center" button-style="default" custom-font="true">
        <span class="pushfeedback-thumb-label">Not helpful</span>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17" /></svg>
      </feedback-button>
    </div>

Clicking a rating opens the form with that rating selected; it does not submit until the visitor sends it.

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.