How I Added Feedback Widgets to My Ghost Blog

Hauke Jung

Hauke Jung

— 3 min read

Writing blog posts is only half the job. The other half? Understanding if the content actually helps readers. For months, I had no idea whether my posts were useful or if readers were running into issues—broken links, confusing explanations, or missing context.

I needed a lightweight way to collect feedback without adding comment sections or analytics bloat. That's when I built SeggWat's embeddable widgets and integrated them into this blog.

Here's exactly how I did it.

The Problem with Traditional Feedback

Most developer blogs either have no feedback mechanism or rely on:

  • Comments — Great for discussions, but noisy and require moderation
  • Contact forms — High friction, most readers won't bother
  • Analytics — Tells you what people read, not if it helped

I wanted something simpler: a quick way for readers to say "this helped" or "I found an issue" without leaving the page.

The Solution: Two Widgets

SeggWat provides two embeddable widgets that solve different problems:

  1. Feedback Button — A floating button for detailed feedback (bug reports, suggestions, questions)
  2. Helpful Rating — A simple thumbs up/down for "Was this page helpful?"

Both are vanilla JavaScript, load asynchronously, and require zero dependencies.

Step 1: Create a SeggWat Project

First, I created a project in the SeggWat dashboard specifically for this blog. This keeps feedback organized and separate from other projects.

The dashboard gives you a unique project key—a UUID that identifies your project when feedback is submitted.

Step 2: Add the Feedback Button via Ghost Code Injection

Ghost has a built-in Code Injection feature that makes this trivial. No theme editing required.

  1. Log into Ghost admin at yourblog.com/ghost
  2. Navigate to Settings → Code injection
  3. Paste the script in Site Header:
<script defer
  src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
  data-project-key="your-project-key-here"
  data-button-color="#3eb0ef"
  data-button-position="bottom-right"
  data-enable-screenshots="true">
</script>
  1. Click Save

That's it. A feedback button now appears on every page.

Configuration Options

I customized a few things:

  • data-button-color — Matches Ghost's default accent blue (#3eb0ef)
  • data-button-position — bottom-right keeps it out of the way but accessible
  • data-enable-screenshots — Lets readers annotate screenshots when reporting bugs

Other positions available:

  • right-side — Vertical button on the right edge
  • icon-only — Compact round button (good for mobile-heavy sites)

Step 3: Add "Was This Helpful?" to Posts

For the helpful rating widget, I wanted it inline at the bottom of each post rather than floating. Ghost's theme templating makes this possible.

The data-show-comment-link="true" option shows a "Leave a comment" link after a negative rating, which opens the feedback modal for more context.

If you want the rating on every post automatically, modify your Ghost theme's post.hbs:

{{!-- At the bottom of post.hbs, before closing </article> --}}
<div class="post-helpful-rating">
  <script
    src="https://seggwat.com/static/widgets/v1/seggwat-helpful.js"
    data-project-key="your-project-key-here"
    data-question="Was this post helpful?">
  </script>
</div>

Then upload the modified theme via Settings → Design → Change theme → Upload theme.

What I Learned from the Feedback

After a few weeks of collecting feedback, patterns emerged:

  1. Broken links were common — External links rot faster than expected
  2. Code examples needed context — Readers wanted to know which versions of tools I was using
  3. Some posts were genuinely helpful — The positive feedback on certain posts guided what to write next

The per-page helpful ratings showed which posts were actually useful vs. which ones were just getting traffic.

Technical Details

Both widgets:

  • Load asynchronously with defer (no render blocking)
  • Auto-detect the page URL for context
  • Support multiple languages (English, German, Swedish)
  • Work on mobile with touch-optimized interfaces
  • Require no cookies or tracking

The screenshot annotation feature uses SnapDOM for capturing and includes tools for arrows, rectangles, text, and redaction.

API for Power Users

If you want to go further, SeggWat has a REST API for programmatic access:

# List all feedback for a project
curl -X GET "https://seggwat.com/api/v1/projects/YOUR_PROJECT_ID/feedback" \
  -H "X-API-Key: $SEGGWAT_API_KEY"

# Get rating statistics
curl -X GET "https://seggwat.com/api/v1/projects/YOUR_PROJECT_ID/ratings/stats" \
  -H "X-API-Key: $SEGGWAT_API_KEY"

I use this to pull weekly summaries into my workflow via n8n.

Conclusion

Adding feedback to a Ghost blog takes about 5 minutes with code injection. The insights are worth far more than the setup time.

If you're running a developer blog and wondering whether your content actually helps people—add a feedback mechanism. You might be surprised what you learn.

Resources:

Read more