Feedback Widget

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

1. A floating trigger button sits unobtrusively in your chosen corner

2. Tap to open a smooth animated panel

3. Step 1 — pick a 0–10 score with live color-coded feedback

4. Step 2 — optional open-ended comment (can be skipped)

5. 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