# Feedback widget for Starlight

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

> PushFeedback collects user feedback directly from your website. This guide covers installation in a Starlight (Astro) project.

PushFeedback collects user feedback directly from your website. This guide covers installation in a Starlight (Astro) project.

## 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.
- A Starlight site.

## Installation

### Floating button

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

1. Go to `src/components`. If `components` does not exist, create the directory.
1. Create a new file `CustomFooter.astro` under your docs project `src/components` directory with the following content:

    ```astro
    ---

    ---

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

        
            <EditLink {...Astro.props} />
            <LastUpdated {...Astro.props} />
        
        <Pagination {...Astro.props} />

        { config.credits && (
                
                    <Icon name={'starlight'} /> {Astro.locals.t('builtWithStarlight.label')}
                
            )}
    </footer>

    <style is:global>
        .right-sidebar-container{ z-index: -1;} 
    </style>

    <style>
        footer { flex-direction: column;
            gap: 1.5rem;}
        .meta { gap: 0.75rem 3rem;
            justify-content: space-between;
            flex-wrap: wrap;
            font-size: var(--sl-text-sm);
            color: var(--sl-color-gray-3);}
        .meta > :global(p:only-child) { margin-inline-start: auto;}

        .kudos { align-items: center;
            gap: 0.5em;
            margin: 1.5rem auto;
            font-size: var(--sl-text-xs);
            text-decoration: none;
            color: var(--sl-color-gray-3);}
        .kudos :global(svg) { color: var(--sl-color-orange);}
        .kudos:hover { color: var(--sl-color-white);}
    </style>
    ```
    
    This code snippet shows how to integrate the PushFeedback widget. Pay special attention to the lines:

    ```astro
    <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).

    And the global style:

    ```astro
    <style is:global>
        .right-sidebar-container{ z-index: -1;} 
    </style>
    ```

    This is required to make sure the button is placed on top of the right sidebar.
    
1. Load the dependencies in your Astro configuration file (`astro.config.mjs`):

    ```js

    export default defineConfig({ integrations: [ starlight({ head: [ { tag: 'link',
              attrs: { rel: 'stylesheet',
                href: 'https://cdn.jsdelivr.net/npm/pushfeedback/dist/pushfeedback/pushfeedback.css',},},
            { tag: 'script',
              attrs: { type: 'module',
                src: 'https://cdn.jsdelivr.net/npm/pushfeedback/dist/pushfeedback/pushfeedback.esm.js',},},],
          (...)}),],})
    ```

1. Load the custom component you've created by overriding the default footer with `CustomFooter.astro`:

    ```js

    export default defineConfig({ integrations: [ starlight({ (...)
          components: { Footer: './src/components/CustomFooter.astro',},
          (...)}),],})
    ```

1. Start your Starlight project by running `npm run dev` in your terminal. Once it compiles successfully, verify that the feedback button appears and functions correctly on your site.

### Inline button

![Example page with an inline Feedback button](./images/inline-button-preview.png)

1. Add the PushFeedback assets to the `head` option of `starlight()` in `astro.config.mjs`:

    ```js
    head: [ { tag: 'link',
        attrs: { rel: 'stylesheet',
          href: 'https://cdn.jsdelivr.net/npm/pushfeedback/dist/pushfeedback/pushfeedback.css',},},
      { tag: 'script',
        attrs: { type: 'module',
          src: 'https://cdn.jsdelivr.net/npm/pushfeedback/dist/pushfeedback/pushfeedback.esm.js',},},]
    ```

2. Put this markup in `src/components/CustomFooter.astro`, after the page content:

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

Remove the floating button from the footer when you want only this mode.

### Embedded form

![Example page with the feedback form embedded in the content](./images/embedded-form-preview.png)

1. Add the PushFeedback assets to the `head` option of `starlight()` in `astro.config.mjs`:

    ```js
    head: [ { tag: 'link',
        attrs: { rel: 'stylesheet',
          href: 'https://cdn.jsdelivr.net/npm/pushfeedback/dist/pushfeedback/pushfeedback.css',},},
      { tag: 'script',
        attrs: { type: 'module',
          src: 'https://cdn.jsdelivr.net/npm/pushfeedback/dist/pushfeedback/pushfeedback.esm.js',},},]
    ```

2. Put this markup in `src/components/CustomFooter.astro`, after the page content:

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

Remove the floating button from the footer when you want only this mode.

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

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

1. Add the PushFeedback assets to the `head` option of `starlight()` in `astro.config.mjs`:

    ```js
    head: [ { tag: 'link',
        attrs: { rel: 'stylesheet',
          href: 'https://cdn.jsdelivr.net/npm/pushfeedback/dist/pushfeedback/pushfeedback.css',},},
      { tag: 'script',
        attrs: { type: 'module',
          src: 'https://cdn.jsdelivr.net/npm/pushfeedback/dist/pushfeedback/pushfeedback.esm.js',},},]
    ```

2. Put this markup in `src/components/CustomFooter.astro`, after the page content:

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

Remove the floating button from the footer when you want only this mode.

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