Skip to main content
Asklet
Sign in Start free

How to add a feedback widget to Starlight

Starlight. Show Asklet at the end of every Starlight page with one Footer override.

Start free All integrations

Your snippet looks like this HTML

<iframe
  src="https://asklet.io/embed/s/YOUR-SITE-ID"
  title="Feedback" width="100%" height="480"
  loading="lazy" referrerpolicy="unsafe-url" style="border:0"></iframe>

Steps

  1. Copy your snippet

    In Asklet, open your website and click Copy website snippet at the top.

  2. Create a footer override

    Create src/components/Footer.astro. It renders the iframe, then Starlight's own footer, so the edit link and the previous and next links stay (example below).

  3. Register it in astro.config.mjs

    Inside starlight({ ... }), add components: { Footer: './src/components/Footer.astro' }.

  4. Check it on your live site

    Open a docs page on a domain you listed in Asklet and answer the survey. Your answer shows up in the website's results, like any reader's.

Your snippet looks like this

<iframe src="https://asklet.io/embed/s/<your-site>" title="Article feedback" width="100%" height="480" loading="lazy" referrerpolicy="unsafe-url" style="border:0"></iframe>
  • Keep referrerpolicy="unsafe-url" on the iframe - Asklet uses it to know which page the reader is on, so the right survey appears.
  • The survey sits right after the page content, above the edit link and the previous and next links. Move the iframe below <Default> to put it under them.
  • Pages with template: splash, such as the home page of the Starlight starter, skip the survey. Remove the check to ask there too.

The footer override

Use the src from your own snippet. The <slot /> inside <Default> is how Starlight renders a built-in component from your override.

---
// src/components/Footer.astro
import Default from '@astrojs/starlight/components/Footer.astro';

const isSplash = Astro.locals.starlightRoute.entry.data.template === 'splash';
---

{!isSplash && (
  <iframe
    src="https://asklet.io/embed/s/<your-site>"
    title="Article feedback"
    width="100%"
    height="480"
    loading="lazy"
    referrerpolicy="unsafe-url"
    style="border: 0"
  ></iframe>
)}
<Default><slot /></Default>

The config

Keep your other Starlight options as they are.

// 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/Footer.astro'
      }
    })
  ]
});

Different questions for each section

The website's default survey covers every page. Add path patterns where you want other questions:

  • /guides/** for tutorials and how-tos
  • /reference/** for the reference pages

Common questions

Is there a Starlight plugin? No, and none is needed. Starlight lets you override its Footer component, and the override holds one iframe, so there is nothing to install or keep updated.

Will it slow down my docs? No. The iframe loads lazily, only when a reader scrolls near it, and it adds no script to your pages.

Other platforms

All integrations

Get your first answers today.

Set-up takes a few minutes, and the free plan covers one website or app.

Start free Watch the 3-minute walkthrough
en