Feedback widget for Starlight
Add PushFeedback to a Starlight site without replacing its navigation or page metadata.
Prerequisites
- A Starlight site.
- A PushFeedback project. Copy the project ID from Projects > your project > Snippet and replace
<YOUR_PROJECT_ID>below.
Examples use @latest. Replace it with a version number to pin a release.
Installation
Floating button
Create src/components/CustomFooter.astro:
---
import Footer from '@astrojs/starlight/components/Footer.astro';
---
<Footer {...Astro.props} />
<feedback-button project="<YOUR_PROJECT_ID>" button-position="bottom-right" modal-position="sidebar-right" button-style="dark">Feedback</feedback-button>
Merge these settings into starlight() in astro.config.mjs:
import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';
export default defineConfig({
integrations: [
starlight({
title: 'My docs',
components: { Footer: './src/components/CustomFooter.astro' },
head: [
{
tag: 'link',
attrs: {
rel: 'stylesheet',
href: 'https://cdn.jsdelivr.net/npm/pushfeedback@latest/dist/pushfeedback/pushfeedback.css',
},
},
{
tag: 'script',
attrs: {
type: 'module',
src: 'https://cdn.jsdelivr.net/npm/pushfeedback@latest/dist/pushfeedback/pushfeedback.esm.js',
},
},
],
}),
],
});
Inline button
Create src/components/CustomFooter.astro:
---
import Footer from '@astrojs/starlight/components/Footer.astro';
---
<Footer {...Astro.props} />
<feedback-button project="<YOUR_PROJECT_ID>" button-position="default" modal-position="center" button-style="dark" screenshot-positioning="true">Feedback</feedback-button>
Merge these settings into starlight() in astro.config.mjs:
import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';
export default defineConfig({
integrations: [
starlight({
title: 'My docs',
components: { Footer: './src/components/CustomFooter.astro' },
head: [
{
tag: 'link',
attrs: {
rel: 'stylesheet',
href: 'https://cdn.jsdelivr.net/npm/pushfeedback@latest/dist/pushfeedback/pushfeedback.css',
},
},
{
tag: 'script',
attrs: {
type: 'module',
src: 'https://cdn.jsdelivr.net/npm/pushfeedback@latest/dist/pushfeedback/pushfeedback.esm.js',
},
},
],
}),
],
});
Embedded form
Create src/components/CustomFooter.astro:
---
import Footer from '@astrojs/starlight/components/Footer.astro';
---
<Footer {...Astro.props} />
<feedback-modal project="<YOUR_PROJECT_ID>" embedded="true"></feedback-modal>
Merge these settings into starlight() in astro.config.mjs:
import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';
export default defineConfig({
integrations: [
starlight({
title: 'My docs',
components: { Footer: './src/components/CustomFooter.astro' },
head: [
{
tag: 'link',
attrs: {
rel: 'stylesheet',
href: 'https://cdn.jsdelivr.net/npm/pushfeedback@latest/dist/pushfeedback/pushfeedback.css',
},
},
{
tag: 'script',
attrs: {
type: 'module',
src: 'https://cdn.jsdelivr.net/npm/pushfeedback@latest/dist/pushfeedback/pushfeedback.esm.js',
},
},
],
}),
],
});
Like and dislike buttons
Create src/components/CustomFooter.astro:
---
import Footer from '@astrojs/starlight/components/Footer.astro';
---
<Footer {...Astro.props} />
<p>Was this helpful?</p>
<div>
<feedback-button project="<YOUR_PROJECT_ID>" rating="1" button-position="default" modal-position="center" button-style="default" screenshot-positioning="true" hide-icon="true">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H3a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L11 2a3.13 3.13 0 0 1 4 3.88Z"/></svg>
<span class="pushfeedback-thumb-label">Helpful</span></feedback-button>
<feedback-button project="<YOUR_PROJECT_ID>" rating="0" button-position="default" modal-position="center" button-style="default" screenshot-positioning="true" hide-icon="true">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 14V2"/><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H21a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L13 22a3.13 3.13 0 0 1-4-3.88Z"/></svg>
<span class="pushfeedback-thumb-label">Not helpful</span></feedback-button>
</div>
Merge these settings into starlight() in astro.config.mjs:
import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';
export default defineConfig({
integrations: [
starlight({
title: 'My docs',
components: { Footer: './src/components/CustomFooter.astro' },
head: [
{
tag: 'link',
attrs: {
rel: 'stylesheet',
href: 'https://cdn.jsdelivr.net/npm/pushfeedback@latest/dist/pushfeedback/pushfeedback.css',
},
},
{
tag: 'script',
attrs: {
type: 'module',
src: 'https://cdn.jsdelivr.net/npm/pushfeedback@latest/dist/pushfeedback/pushfeedback.esm.js',
},
},
],
}),
],
});
Each button opens the form with its rating selected. The visitor still clicks Send to submit.
Verify the installation
Run npm run build, then npm run preview. Open a document and check that the widget and the existing footer work. Send a test message and confirm it appears in your PushFeedback project. Check allowed URLs if submission fails.