Developer Documentation
Learn how to integrate Super Feedback 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
Quick Start
Create a Project
Sign in to Super Feedback and create a new project for your website. You'll receive two access codes: a user code and an admin code.
Add the Embed Script
Copy the embed code and paste it into your HTML before the closing </body> tag:
<script
src="https://trysuperfeedback.com/embed.js"
data-access-code="YOUR_ACCESS_CODE">
</script>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:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<!-- Your content -->
<!-- Add Super Feedback -->
<script
src="https://trysuperfeedback.com/embed.js"
data-access-code="YOUR_ACCESS_CODE">
</script>
</body>
</html>Access Codes
Each project has two types of access codes with different permission levels:
User Code
For clients and team members to leave feedback
Admin Code
For project owners to manage 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.
<!-- Using admin code for elevated permissions -->
<script
src="https://trysuperfeedback.com/embed.js"
data-access-code="YOUR_ADMIN_CODE">
</script>Element Targeting
Super Feedback 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.
id or data-testid attributes to important elements for the most reliable targeting.Styling
Super Feedback uses CSS variables for consistent styling. The embed script injects these automatically, but they're scoped to avoid conflicts with your site's styles.
: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;
}sf- prefix and high z-index values to avoid style conflicts with your website.Embed Generator
Use this tool to generate ready-to-use embed code for your project:
Need Help?
Super Feedback is open source. Check out the GitHub repository for issues, feature requests, or to contribute.
Comment Pins
Visual indicators show where comments are located on the page:
Open
Yellow pins - feedback needs attention
Resolved
Green pins - feedback has been addressed
Archived
Grey pins - feedback is no longer relevant