Skip to content

component

Feedback Widget

By Can Girgin

Details

Summary

Floating NPS survey with comment capture

Description

Add a premium Net Promoter Score feedback flow to any Framer site in seconds. The widget floats discreetly in a corner as a small button and expands into a polished 3-step panel when clicked — capturing your score, the reason behind it, and leaving visitors with a warm thank-you. How it works A floating trigger button sits unobtrusively in your chosen corner Tap to open a smooth animated panel Step 1 — pick a 0–10 score with live color-coded feedback Step 2 — optional open-ended comment (can be skipped) Step 3 — branded thank-you screen Key Features 🎯 Standard NPS 0–10 scoring with smart tier colors (red → amber → green) 💬 Optional comment step — keep it or skip with one toggle 💾 localStorage persistence — users never see it twice 📍 4 position options: Bottom Right / Left, Top Right / Left 🎨 4 theme presets: Dark, Light, Warm, Ocean 🖼️ 6 built-in icons + Custom Upload (PNG / SVG / JPG) 📏 Icon size slider (12–40 px) ✏️ Every text label customizable from the property panel 🔤 7 independent font controls (header, question, body, labels, score, buttons, trigger) 🎨 17 individual color overrides — every color wins over the theme 🪟 Optional frosted-glass backdrop blur 🎬 Smooth spring animations — score labels react live to selection 📱 Responsive at any size 🎛️ Canvas Preview — preview any step, any score, and sample comment while designing 🔗 onSubmit event handler — wire up to Zapier, webhooks, or your backend Everything you can customize Trigger: position, size, border radius, icon (preset or your own upload), icon size, show/hide label Panel: width, radius, backdrop blur, button & input radius 17 colors — panel, border, trigger, text, body, accent, inputs, score tiers 7 fonts — full Framer Font controls (family, weight, size) on every text element Every visible string — trigger label, header, questions, subtext, range labels, tier messages (0–2 / 3–4 / 5–6 / 7–8 / 9–10), all button labels, thank-you title & body Perfect for SaaS product pages & dashboards Landing pages & launches Portfolio & agency sites App onboarding flows Post-purchase thank-you pages Technical Single .tsx file — drop in and done No external dependencies beyond react, framer, framer-motion Canvas-safe: no animations freeze your edit view Widget ID control — scope localStorage per page or flow

Introduction

Floating NPS survey with comment capture

Rank history

Daily rank per list, from the first snapshot — lower is better.

125015001750183148/148/228/309/79/15
  • All · #8314