Feedback Icon

Feedback

Statamic Feedback Documentation

Complete guide for installing, configuring, and using the Statamic Feedback addon.

Table of Contents

Installation

Requirements

  • Statamic 6.0 or higher
  • A valid license from the Statamic Marketplace

Install via Composer

composer require eminos/statamic-feedback

The addon registers its routes, views, and assets automatically.

Publish Config (Optional)

php artisan vendor:publish --tag=statamic-feedback-config

Creates config/statamic-feedback.php where you can customize all behavior.

Configuration

All settings live in config/statamic-feedback.php:

return [
// Widget button position: 'right-center' or 'bottom-right'
'position' => 'right-center',
 
// Where feedback YAML files and screenshots are stored
'storage_path' => storage_path('statamic-feedback'),
 
// Show the floating widget on CP pages
'cp_widget' => true,
 
// Allow screenshot capture
'screenshots' => true,
 
// Allow pin annotations
'pins' => true,
 
// Feedback count column in collection listings
'listing' => [
'enabled' => true,
'collections' => [], // Empty = all collections
],
];
Option Default Description
position right-center Where the floating button appears. Options: right-center, bottom-right
storage_path storage/statamic-feedback Directory for YAML files and screenshots
cp_widget true Show the feedback button on CP pages
screenshots true Enable the screenshot capture feature
pins true Enable pin annotations on page elements
listing.enabled true Inject a feedback count column into collection entry listings
listing.collections [] Limit the column to specific collection handles. Empty array means all collections

Frontend Widget

Add the feedback widget to your Antlers layout (typically layout.antlers.html):

{{ feedback_widget }}

With a custom position:

{{ feedback_widget position="bottom-right" }}

Who Sees It

The tag only renders for users who are logged into the Statamic Control Panel and have the "View Feedback" permission (or are super admins). Regular site visitors see nothing at all. No iframe, no script tags, no hidden elements.

This means you can safely leave the tag in your production layout. It will not affect your frontend for public visitors.

How It Works

The widget embeds a small iframe that loads a CP page using Statamic's own UI components. The iframe communicates with the host page via postMessage for things like pin placement and resizing. This approach keeps all CP assets (Vue, Tailwind, etc.) isolated from your frontend, so nothing interferes with your site's styles or scripts.

Control Panel

Feedback Widget

A floating button appears on every CP page (when cp_widget is enabled). Click it to open the feedback panel as a slide-in Stack.

The panel has four tabs:

  • All — every feedback item, newest first
  • Unread — items you have not marked as read
  • Mentions — items where you are @mentioned
  • Mine — items you created

Each tab shows a count badge. There is also a "Mark all read" button on the Unread tab.

Scope Toggle

At the top of the panel, switch between:

  • This page — only feedback linked to the current page
  • All pages — everything across the entire site

Collection Listing Column

When listing.enabled is true, a "Feedback" column appears in your collection entry listings showing the feedback count for each entry. You can limit this to specific collections:

'listing' => [
'enabled' => true,
'collections' => ['pages', 'blog'],
],

Entry Linking

This is one of the most useful features. Feedback is automatically linked to Statamic entries, so comments follow the content regardless of where they were made.

How It Works

When someone leaves feedback on a page, the addon resolves which Statamic entry that page belongs to. It does this for both frontend URLs and CP entry editor paths:

  • Leave feedback on /about on the frontend → linked to the About entry
  • Leave feedback on /cp/collections/pages/entries/abc-123 in the CP → linked to the same entry

Open the feedback panel on either page and you see the same feedback items. This means your team can review feedback in whichever context makes sense, whether that's the frontend to see it in context or the CP while editing.

Why This Matters

Most feedback tools treat pages as isolated URLs. With Statamic Feedback, the feedback is connected to the content itself. Rename the slug, change the URL structure, the feedback stays attached to the entry.

Pin Annotations

Pins let you attach feedback to a specific element on the page.

Creating a Pin

  1. Click "Add Feedback" to open the feedback form
  2. Click the pin icon to enter pin placement mode
  3. Hover over elements, they highlight with a colored outline
  4. Click an element to place the pin
  5. The form reopens with the pin attached
  6. Press Escape to cancel

How Pins are Stored

Pins are stored as a CSS selector plus coordinates relative to the target element:

pin:
selector: "main > section:nth-of-type(2) > h2"
x: 0.45
y: 0.3

The selector is generated by @medv/finder, which produces stable, readable CSS selectors. The coordinates are relative to the element (0-1 range), not the page, so pins survive layout changes and work across screen sizes.

Pin Markers

Pinned items show colored markers on the page. Click a marker to open the feedback panel and scroll to that item.

Screenshots

When screenshots is enabled, users can capture a screenshot when creating feedback.

The addon uses the browser's getDisplayMedia API for pixel-perfect captures of the actual rendered page, including CSS effects that canvas-based solutions miss (backdrop-filter, complex gradients, etc.). There is a one-click browser permission prompt, which is a browser security requirement.

Screenshots are stored as image files (PNG) in the same storage directory as the feedback YAML files.

Comments & Mentions

Comments

Click the reply button on any feedback item to add a comment. When a comment is added, the read status resets for all users except the commenter, so everyone sees the new activity.

@Mentions

Type @ in the feedback text or a comment to trigger autocomplete. It searches users by name and email. Mentioned users see a toast notification the next time they load the CP.

Permissions

The addon registers four permissions under a "Feedback" group in Statamic:

Permission Description
View Feedback See feedback items and comments
Create Feedback Submit new feedback and post comments
Delete Own Feedback Delete feedback and comments you created
Manage All Feedback Delete anyone's feedback and comments

Super users always have full access. For other users, assign permissions through Users > Roles in the CP.

The widget automatically hides UI elements the user does not have permission for.

Notification Preferences

Users can control when they receive feedback notifications through Statamic's built-in Preferences system (the cog icon in the top-right of the CP).

Setting Description
When mentioned (default) Notified when @mentioned in feedback or comments
All new feedback Notified about all unread feedback
Never No notifications

The preference cascades through Statamic's default → role → user hierarchy, so you can set sensible defaults per role.

Notifications appear as toast messages when the CP loads. They are fetched once (no polling), and each notification includes a "View" button that opens the feedback panel and scrolls to the item.

Multi-site

The addon works with Statamic's multi-site feature out of the box.

When feedback is created on a localized entry, the addon resolves the origin entry ID (the default locale version). This means all localizations of the same entry share the same feedback.

For example: feedback on /sv/om-oss and /about both link to the same origin entry. The feedback panel shows the same items on both pages.

Data Structure

Feedback is stored as individual YAML files in Laravel's storage directory (default path: storage/statamic-feedback/). Each file is named {uuid}.yaml. Screenshots are stored alongside as {uuid}.png.

This follows the same flat-file philosophy as the rest of Statamic. No database tables, no migrations. You can version-control the feedback files, back them up with the rest of your storage directory, or just delete the folder to start fresh.

Example Feedback Item

id: "a1b2c3d4-1111-4aaa-bbbb-000000000001"
text: "The hero headline needs a clearer value proposition"
path: "/"
entry_id: "home"
source: "default"
screenshot_path: "a1b2c3d4-1111-4aaa-bbbb-000000000001.png"
user_id: "22f4d864-f167-4657-a49d-2d6040e14d9f"
timestamp: "2026-03-01T09:15:00+00:00"
read_by:
- "22f4d864-f167-4657-a49d-2d6040e14d9f"
- "bfc6274a-e381-4067-aad6-ba0842a9007a"
read_at:
"22f4d864-f167-4657-a49d-2d6040e14d9f": "2026-03-01T09:15:00+00:00"
"bfc6274a-e381-4067-aad6-ba0842a9007a": "2026-03-01T10:22:00+00:00"
pin:
selector: "section:nth-of-type(1) > div > h1"
x: 0.45
y: 0.5
tagged_users:
- "bfc6274a-e381-4067-aad6-ba0842a9007a"
comments:
- id: "c0m1-0001-0001-0001-000000000001"
text: "Agreed, the CTA button also needs more contrast"
user_id: "bfc6274a-e381-4067-aad6-ba0842a9007a"
timestamp: "2026-03-01T10:22:00+00:00"
tagged_users: []

Key fields:

  • entry_id — the Statamic entry this feedback is linked to (resolved automatically from the page URL or CP path)
  • source — where the feedback was created: a site handle (e.g. default, swedish) or cp
  • pin — element selector plus relative coordinates (only present if a pin was placed)
  • read_by / read_at — per-user read tracking
  • tagged_users — user IDs of @mentioned users
  • comments — nested array of replies, each with their own tagged users

Support

For support, questions, or feature requests, please visit the GitHub repository.

License

This is a commercial addon that requires a license for production use.

Purchase a license on the Statamic Marketplace →