Deck

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.

By Matt TeixeiraUpdated

Run it in Deck
Time to Run
30 min
Uses
Integrations,Projects,MCP Server
You Get
Feedback Widget Install Checklist
Run It
In Deck or with your agent

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.

How to Add an In-App Feedback Widget with Deck

Run it yourself in Deck, or hand it to your AI agent. Same steps, same result.

  1. 01

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

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

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

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

    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.

Feedback Widget Install Checklist

feedback-widget-install-checklist.md
## 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
Plain text. Pastes into Docs, Notion, or your agent.25 lines

Frequently Asked Questions

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.

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.

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.

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

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.

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.