---
title: "Feedback Widget — Framer component · Best of Framer"
description: "$8.00 · Framer component · by Can Girgin · Buttons. Floating NPS survey with comment capture"
canonical: "https://framer.elliotli.dev/component/feedback-widget"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Feedback Widget

# Feedback Widget

Floating NPS survey with comment capture

[View on Framer](https://framer.com/marketplace/components/feedback-widget/?via=elliot-li)

![Feedback Widget preview image 1](https://framer.elliotli.dev/og/component/feedback-widget/fd3f4d3b1f24cf8b/1600x1200.jpg)

## 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**

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
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #10062

## Details

- **Author**: Can Girgin
- **Price**: $8.00
- **Published**: 2026-05-07
- **Updated**: 2026-05-07
- **Added**: 2026-04-23
- **Categories**: Buttons

## More like this

-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow
-   [Dash Stretch Button](/component/dash-stretch-button) — Pentaclay · Free — Animated Hover Button With a Dash
-   [Nova Theme Toggle](/component/nova-theme-toggle) — Shouvik Biswas · $12 — Three-Mode Theme Toggle
-   [Nabby: Copy Button](/component/nabby-copy-button) — Francesco Gallo · Free — Plug in your button, copy anything