How to Add a Feedback Widget to Your Astro Site in 5 Minutes

TL;DR: Drop a single <script> tag into your Astro layout. No npm install, no adapter config, no island architecture gymnastics. Works with static output, SSR, and hybrid rendering.

The Problem

You shipped your Astro site. Lighthouse score is pristine. But you have no idea what your users actually think.

Contact forms collect dust. Email links get ignored. And the one bug report you did get said "it's broken" with no context — no browser, no viewport, no screenshot.

You need a feedback channel that's right there when users hit a problem.

What You're Adding

SeggWat is an embeddable feedback widget that gives your users:

A floating feedback button (bug reports, feature requests, general feedback)
Built-in screenshot annotation (arrows, rectangles, blackout sensitive areas)
Optional star ratings, helpful ratings, and contact forms

All feedback lands in a dashboard with Kanban triage, analytics, and a public ideas portal.

No cookies. No tracking scripts. GDPR compliant by default, EU-hosted.

Prerequisites

An Astro project (v2+, any rendering mode)
A SeggWat account (14-day free trial)
Your project key from the SeggWat dashboard

Step 1: Add the Script to Your Base Layout

Astro's layout components are the perfect place for global scripts. Open your base layout (usually src/layouts/Layout.astro or src/layouts/BaseLayout.astro) and add the widget script before the closing </body> tag:

---
// src/layouts/Layout.astro
interface Props {
  title: string;
}

const { title } = Astro.props;
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{title}</title>
  </head>
  <body>
    <slot />

    <!-- SeggWat Feedback Widget -->
    <script
      is:inline
      defer
      src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
      data-project-key="YOUR_PROJECT_KEY"
      data-enable-screenshots="true"
    ></script>
  </body>
</html>

Replace YOUR_PROJECT_KEY with the key from your SeggWat dashboard → Project Settings → Widgets.

That's it. Build, deploy, done.

Step 2: Customize the Widget

SeggWat uses data- attributes for configuration — no JavaScript API calls needed for basic setup. Here are the most useful options:

<script
  is:inline
  defer
  src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
  data-project-key="YOUR_PROJECT_KEY"
  data-enable-screenshots="true"
  data-button-color="#6366f1"
  data-button-position="bottom-right"
  data-version={import.meta.env.PUBLIC_APP_VERSION ?? "dev"}
></script>

Attribute	Default	Options
`data-button-color`	`#2563eb`	Any hex color
`data-button-position`	`bottom-right`	`bottom-right`, `right-side`, `icon-only`
`data-enable-screenshots`	`false`	`true`, `false`
`data-version`	—	Any string (e.g., `"1.2.0"`)
`data-language`	Auto-detect	`en`, `de`, `sv`
`data-show-powered-by`	`true`	`true`, `false`

Version Tracking Tip

Notice the data-version attribute above? It pulls from an environment variable. Set PUBLIC_APP_VERSION in your .env file:

PUBLIC_APP_VERSION=0.3.1

Every feedback submission gets tagged with the version, so you know exactly which release triggered a bug report.

Step 3: Add Per-Page Widgets (Optional)

Want a "Was this helpful?" widget on your docs pages? Add the helpful rating widget to specific layouts or pages:

---
// src/layouts/DocsLayout.astro
import Layout from './Layout.astro';

const { title } = Astro.props;
---

<Layout title={title}>
  <article>
    <slot />
  </article>

  <div class="feedback-section">
    <p>Was this page helpful?</p>
    <div id="helpful-widget"></div>
  </div>

  <script
    is:inline
    defer
    src="https://seggwat.com/static/widgets/v1/seggwat-helpful.js"
    data-project-key="YOUR_PROJECT_KEY"
    data-container="#helpful-widget"
  ></script>
</Layout>

This renders an inline thumbs-up/thumbs-down widget right below your content. No floating button — it sits in the page flow.

Step 4: Track Logged-In Users (Optional)

If your Astro site has authentication (via middleware, cookies, or an auth adapter), you can associate feedback with specific users:

<script
  is:inline
  defer
  src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
  data-project-key="YOUR_PROJECT_KEY"
  data-enable-screenshots="true"
></script>

<script>
  // After widget loads, identify the user
  document.addEventListener('DOMContentLoaded', () => {
    if (window.SeggwatFeedback) {
      window.SeggwatFeedback.setUser('user-123');
    }
  });
</script>

Now feedback submissions are tied to that user ID in your dashboard.

Works With Every Astro Rendering Mode

Mode	Works?	Notes
Static (`output: 'static'`)	✅	Script loads client-side, no adapter needed
SSR (`output: 'server'`)	✅	Same — widget is purely client-side
Hybrid (`output: 'hybrid'`)	✅	Same behavior

The widget is a client-side script — it doesn't depend on how the HTML was generated.

Works With Starlight Too

Building docs with Starlight? Override the layout to inject the widget:

---
// src/components/StarlightFeedback.astro
---

<script
  is:inline
  defer
  src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
  data-project-key="YOUR_PROJECT_KEY"
  data-enable-screenshots="true"
  data-button-position="bottom-left"
></script>

Then add it to your Starlight config's custom components. Now your docs site has a feedback button, and users can screenshot exactly which section confused them.

What Happens Next

Once deployed, feedback starts flowing into your SeggWat dashboard:

Triage — New feedback lands in a Kanban board. Drag from New → Active → Resolved.
Screenshots — Users' annotated screenshots show exactly what they see. No more "can you send a screenshot?"
Analytics — Track feedback trends, satisfaction scores, team response times.
Ideas Portal — Promote feature requests to a public portal where users can vote.
GitHub Integration — Create GitHub issues from ideas, with automatic status sync.

Quick Comparison

Feature	SeggWat	Contact form	Google Form	Hotjar
In-page feedback	✅	❌	❌	✅
Screenshot annotation	✅	❌	❌	❌
No cookies	✅	✅	❌	❌
Setup time	60 seconds	Varies	5+ min	10+ min
GDPR (EU-hosted)	✅	Depends	❌	❌
Starts at	$6/mo	Free	Free	$32/mo