DEV Community

Hauke J.
Hauke J.

Posted on

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

#astro #sass #webdev #productivity

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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:

  1. Triage — New feedback lands in a Kanban board. Drag from New → Active → Resolved.
  2. Screenshots — Users' annotated screenshots show exactly what they see. No more "can you send a screenshot?"
  3. Analytics — Track feedback trends, satisfaction scores, team response times.
  4. Ideas Portal — Promote feature requests to a public portal where users can vote.
  5. 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

Wrapping Up

One script tag. Real feedback with context.

Check out the full Astro example on GitHub for a working integration with dynamic controls.

→ Start your 14-day free trial

Built with Rust. Hosted in the EU. No cookies. Learn more about SeggWat.

Top comments (0)