Feedback widget for Starlight

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.
A project created in your PushFeedback dashboard. If you haven't created one yet, follow the steps in the Quickstart guide.
A Starlight site.

Installation

Floating button

Go to src/components. If components does not exist, create the directory.

Create a new file CustomFooter.astro under your docs project src/components directory with the following content:

---
import type { Props } from '@astrojs/starlight/props';

import EditLink from 'virtual:starlight/components/EditLink';
import LastUpdated from 'virtual:starlight/components/LastUpdated';
import Pagination from 'virtual:starlight/components/Pagination';
import config from 'virtual:starlight/user-config';
---

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

    <div class="meta sl-flex">
        <EditLink {...Astro.props} />
        <LastUpdated {...Astro.props} />
    </div>
    <Pagination {...Astro.props} />

    {
        config.credits && (
            <a class="kudos sl-flex" href="https://starlight.astro.build">
                <Icon name={'starlight'} /> {Astro.locals.t('builtWithStarlight.label')}
            </a>
        )
    }
</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:

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

And the global style:

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

Load the dependencies in your Astro configuration file (astro.config.mjs):

import starlight from '@astrojs/starlight'
import { defineConfig } from 'astro/config'

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',
          },
        },
      ],
      (...)
    }),
  ],
})

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

import starlight from '@astrojs/starlight'
import { defineConfig } from 'astro/config'

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

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

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

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',
    },
  },
]

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

<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

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

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',
    },
  },
]

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

<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

Example page with inline like and dislike buttons

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

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',
    },
  },
]

Put this markup in src/components/CustomFooter.astro, after the page 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>

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

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.

Prerequisites​

Installation​

Floating button​

Inline button​

Embedded form​

Like and dislike buttons​

Next steps​

Prerequisites

Installation

Floating button

Inline button

Embedded form

Like and dislike buttons

Next steps