# Feedback widget for Astro

> For the complete documentation index, see [llms.txt](/llms.txt)

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

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](starlight.md).
:::

## Prerequisites

Before you begin, you need:

- A PushFeedback account. If you don't have one, [sign up for free](https://app.pushfeedback.com/accounts/signup/).
- A project created in your PushFeedback dashboard. If you haven't created one yet, follow the steps in the [Quickstart](../quickstart.md#2-create-a-project) guide.
- An Astro project.

## Installation

### Floating button

![Example page with a floating Feedback button on the right edge](./images/floating-button-preview.png)

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

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

    ```html
    <!-- 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>
    ```

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

    ```html
    <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](../quickstart.md#2-create-a-project).

1. 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](./images/inline-button-preview.png)

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

    ```html
    <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:

    ```html
    <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](./images/embedded-form-preview.png)

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

    ```html
    <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:

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

### Like and dislike buttons {#advanced-setup-like-and-dislike-buttons}

![Example page with inline like and dislike buttons](./images/inline-thumbs-preview.png)

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

    ```html
    <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:

    ```html
    Was this helpful?
    
      <feedback-button project="<YOUR_PROJECT_ID>" rating="1" button-position="default" modal-position="center" button-style="default" custom-font="true">
        Helpful
        <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">
        Not helpful
        <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>
    
    ```

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](/category/customization) — Adjust the widget's layout, styles, and text.
- [Integrations](/category/integrations) — Forward feedback to Slack, email, Jira, and more.
