# Add an In-App Feedback Widget That Sends Feedback to Deck

Create a Deck feedback widget, install the @deck-io/feedback SDK, and send in-app feedback into Deck next to your support, interview, and survey data.

- URL: https://getdeck.io/playbooks/install-feedback-widget
- Author: Matt Teixeira
- Published: 2026-11-01
- Updated: 2026-11-01
- Stage: Set up

## How Do You Add an In-App Feedback Widget?

Create a widget for the surface you want feedback on, create a browser-safe publishable key, and install the feedback SDK in your app. In Deck, the widget lives in Manage → Deck Collect. Each submission shows there right away, and written feedback becomes insights and themes alongside your other customer feedback.

## Why In-Product Feedback Gets Lost

Customers react to a feature in the moment, inside your product. By the time a survey goes out, the detail is gone. A homemade feedback form ends up in a database table or a Slack channel nobody reads, never next to the rest of your customer evidence.

## How Deck Collect Brings In-App Feedback Next to Your Evidence

A Deck feedback widget sends in-product feedback straight into Deck as its own source. Written responses become insights and themes next to support, interviews, and surveys. Link the widget to a Project and new responses land on that Project's Feedback tab. The SDK uses a browser-safe publishable key, so no secret ships in your app.

Deck features used:

- [Integrations](https://getdeck.io/product/integrations)
- [Projects](https://getdeck.io/product/projects)
- [MCP Server](https://getdeck.io/product/mcp-server)

## How to Add an In-App Feedback Widget with Deck

### 1. Decide Where Feedback Should Appear

Pick the pages, surfaces, or user actions you want feedback on. Choose thumbs, free text, or both. Then choose the SDK's built-in dialog, or your own UI with headless submit.

### 2. Create the Widget

Open Manage → Deck Collect and click Create widget. Name it after the surface, such as “Settings panel”, and copy the widget ID (wgt_…). Link it to a Project if you want future responses on that Project's Feedback tab.

### 3. Create a Publishable Key

Open Settings → Deck Collect SDK and create a publishable key. Copy the full pk_… value right away, because Deck shows it only once. Store it in NEXT_PUBLIC_DECK_PUBLISHABLE_KEY, or DECK_PUBLISHABLE_KEY for server-only code.

### 4. Install the SDK

Add @deck-io/feedback and wrap your app in DeckProvider with the key from the environment and a stable user ID. Mount FeedbackDialog, ThumbsFeedback, or the headless submit with your widget ID. Deck also shows a copy-paste install snippet in Settings → Deck Collect SDK.

### 5. Send One Test Submission

Run your product and send one piece of feedback through the widget. The raw response shows under Manage → Deck Collect → [your widget] right away. Written feedback becomes insights on Deck's weekday batch schedule.

## Install the Feedback Widget with Your Coding Agent

You need:

- Deck MCP connected to your agent
- An agent with access to your codebase

Your agent starts with the `list_widgets` tool.

Paste this prompt into your agent:

```text
Use Deck MCP. Fetch and follow https://docs.getdeck.io/docs/agents/workflows/install-feedback-widget.md
```

Full agent workflow: https://docs.getdeck.io/docs/agents/workflows/install-feedback-widget.md

## Feedback Widget Install Checklist

### Feedback Widget Install Checklist

```text
WIDGET PLAN
Surface: [page or action, e.g. Settings panel]
Format: thumbs / free text / both
UI: built-in dialog / own UI with headless submit
Project to link: [Project name or none]

IN DECK
[ ] Widget created in Manage → Deck Collect. ID: wgt_[…]
[ ] Publishable key created in Settings → Deck Collect SDK and stored in the app environment

ENVIRONMENT
NEXT_PUBLIC_DECK_PUBLISHABLE_KEY: browser and React code (Vite: VITE_DECK_PUBLISHABLE_KEY)
DECK_PUBLISHABLE_KEY: server-only code

IN THE CODE
[ ] @deck-io/feedback installed
[ ] DeckProvider near the root, key read from the environment
[ ] user.id is a stable product user ID
[ ] FeedbackDialog, ThumbsFeedback, or headless submit mounted with widgetId
[ ] context holds IDs and enums only, no personal data
[ ] No key committed to the repo, and never a dk_ key

TEST
[ ] One test submission shows under Manage → Deck Collect → [widget]
[ ] Written feedback checked after the next weekday batch
```

## Frequently Asked Questions

### What do we need before we start?

Feedback Widgets must be turned on for your Deck organization before you can create widgets or keys. The client package needs React 18 or later. For server code without React, use @deck-io/feedback/server on Node 20 or later.

### Is the publishable key safe in the browser?

Yes. A pk_… key only sends widget feedback and cannot call the Deck Public API. Never use a secret dk_… key with the SDK. If a key is abused, revoke it in Settings → Deck Collect SDK.

### When does feedback show up as insights?

The raw response is stored right away. Written feedback is synthesized in batches every 6 hours, Monday to Friday (UTC), and uses synthesis credits. Rating-only responses stay raw and are not sent to AI.

### What happens when I link the widget to a Project?

Future written responses show on that Project's Feedback tab and can become Project Evidence. Changing the link later does not move past responses.

### What does the SDK capture about our users?

The user ID and details you pass, plus any context you add. Keep context to IDs and enums, not personal data. By default the SDK keeps only the page origin and path, without query strings or hash fragments.

### Can my coding agent install it?

Yes. With Deck MCP connected to a coding agent such as Claude Code, Cursor, or Codex, paste the prompt on this page. The agent creates the widget, reads its install prompt, and adds the SDK. It asks before it creates the widget or changes code, and it never asks you to paste a key into the chat.

## Related Playbooks

- [Build Features from Customer Evidence, Not Guesswork](https://getdeck.io/playbooks/build-from-evidence.md): Turn a Deck Project into a shipped change where every requirement links to the customer insights behind it. Build it yourself or with your coding agent.
- [Measure Release Impact with Before-and-After Customer Feedback](https://getdeck.io/playbooks/release-impact-check.md): Check if a release worked by comparing customer feedback on the themes it targeted in equal windows before and after launch, with quotes and a clear verdict.
- [Find the Customer Feedback Your Team Is Missing](https://getdeck.io/playbooks/cross-tool-signal-sweep.md): Compare Slack, support, CRM, and call notes with what Deck already has. Find the customer feedback it is missing and get one fix for each gap.