Developer Documentation

Learn how to integrate SuperFeedback into any website

Simple Integration

Just one script tag - no build process or dependencies required

Works Everywhere

Compatible with any website - static, React, Next.js, Vue, etc.

Access Control

Separate user and admin codes for granular permissions

Smart Targeting

Comments stay attached to elements even when page changes

Using Cursor?Let AI read feedback and fix code automatically
Install MCP in

Quick Start

1

Create a Project

Sign in to SuperFeedback and create a new project for your website. You'll receive two access codes: a user code and an admin code.

2

Add the Embed Script

Copy the embed code and paste it into your HTML before the closing </body> tag:

htmlBasic Installation
3

Start Collecting Feedback

Refresh your page. You'll see a floating "Feedback" button. Click it to enter feedback mode and start leaving comments!

Installation Methods

Add the script tag before the closing body tag:

htmlindex.html



  My Website

Access Codes

Each project has two types of access codes with different permission levels:

User Code

For clients and team members to leave feedback

  • View all comments
  • Add new comments
  • Change comment status
  • Delete comments

Admin Code

For project owners to manage feedback

  • View all comments
  • Add new comments
  • Change comment status
  • Resolve & archive comments
Security Note: Keep your admin code private! Only share the user code with clients and collaborators who need to leave feedback.

Admin Mode

When using an admin access code, you get additional capabilities:

Status Management

Click on any comment pin to see a dropdown that lets you change status between Open, Resolved, and Archived.

Visual Indicators

Admin mode shows a purple "Admin" badge on the feedback button and toolbar to clearly indicate elevated permissions.

Enhanced Pin Controls

Pins show glowing borders and expanded tooltips with status controls when in admin mode.

htmlAdmin Mode

Element Targeting

SuperFeedback uses intelligent element targeting to keep comments anchored to the right elements even when your page changes:

Multiple Selectors

Each comment stores CSS path, nth-child path, XPath, and text content for maximum reliability.

Fallback Strategies

If the primary selector fails, the system tries alternative strategies in order of reliability.

Section Detection

Comments know which semantic section (header, main, footer) they belong to for better context.

Scroll Position

As a last resort, comments fall back to their original viewport position when elements can't be found.

Tip: Add stable id or data-testid attributes to important elements for the most reliable targeting.

Comment Pins

Visual indicators show where comments are located on the page:

1

Open

Yellow pins - feedback needs attention

2

Resolved

Green pins - feedback has been addressed

3

Archived

Grey pins - feedback is no longer relevant

Styling

SuperFeedback uses CSS variables for consistent styling. The embed script injects these automatically, but they're scoped to avoid conflicts with your site's styles.

cssCSS Variables (Reference)
:root {
  /* Core colors */
  --sf-black: #000000;
  --sf-white: #fafafa;
  --sf-grey-900: #111111;
  --sf-grey-800: #1a1a1a;
  --sf-grey-700: #262626;
  
  /* Status colors */
  --sf-accent-success: #22c55e;  /* Resolved */
  --sf-accent-warning: #fbbf24;  /* Open */
  --sf-accent-danger: #ef4444;   /* Error states */
  
  /* Shadows & Radius */
  --sf-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  --sf-radius-md: 8px;
  --sf-radius-full: 9999px;
}
All SuperFeedback elements use the sf- prefix and high z-index values to avoid style conflicts with your website.

Cursor MCP Integration

Let Cursor's AI automatically read feedback, locate code, make fixes, and mark items as resolved.

Install MCP in

Opens Cursor and installs the SuperFeedback MCP

After installing, add your project codes:
  1. Open Cursor Settings → MCP
  2. Find super-feedback in the list
  3. Replace your-admin-code-here with your actual Admin Code
  4. Restart Cursor to apply changes
Find your codes in your SuperFeedback project settings. Use Admin Code for full functionality (resolving feedback).
or configure manually
MCP Configuration Template
{
  "super-feedback": {
    "command": "npx",
    "args": [
      "-y",
      "super-feedback-mcp@latest"
    ],
    "env": {
      "SUPER_FEEDBACK_ADMIN_CODE": "your-admin-code-here"
    }
  }
}

Available Tools

get_feedback_summary

View all feedback with counts - see what needs attention

get_comment_details

Full context for any comment - selectors, xpath, bounding box, replies

mark_feedback_resolved

Mark feedback as done after the AI fixes it

How It Works

1

Get all feedback

get_feedback_summary
2

Get element selectors

get_comment_details
3

Find & fix code

AI edits files
4

Mark as done

mark_feedback_resolved

Embed Generator

Use this tool to generate ready-to-use embed code for your project:

Embed Code Generator

Generate ready-to-use embed code for your project

User mode allows adding comments but cannot change their status

Need Help?

Need help? Check out our GitHub repository for issues, feature requests, or support.