Feedback Widget

Installation

pnpm add @emit-vision/feedback-widget

npm install @emit-vision/feedback-widget

yarn add @emit-vision/feedback-widget

Quick start (vanilla JS)

Call initFeedbackWidget() with your API key and it will inject a feedback button into your page. Users click the button, fill out a form with an optional rating, and submit feedback.

import { initFeedbackWidget } from "@emit-vision/feedback-widget";

initFeedbackWidget({
  apiKey: "evk_your_ingest_key",
  endpoint: "https://api.emit.vision", // optional; defaults to emit.vision
  position: "bottom-right", // optional; "bottom-right" | "bottom-left"
  label: "Feedback", // optional; button aria-label and tooltip text
  environment: "production", // optional
  release: "[email protected]", // optional
});

The widget returns a handle with a destroy() method if you need to clean up later.

Options reference

• apiKey (string, required) — Your Emit Vision ingest key (starts with evk_). Safe to include in browser bundles.
• endpoint (string) — The Emit Vision API endpoint. Defaults to https://api.emit.vision. Only needed if you are self-hosting.
• position ("bottom-right" | "bottom-left") — Widget placement on the page. Defaults to bottom-right.
• label (string) — Button text and aria-label. Defaults to Feedback.
• environment (string) — Optional label for the environment (e.g. production, staging) so you can filter feedback by context.
• release (string) — Optional version or git SHA. Helps you correlate feedback with specific releases.

React / Next.js

Install the React wrapper alongside the base package:

pnpm add @emit-vision/feedback-widget-react

npm install @emit-vision/feedback-widget-react

Use the <FeedbackWidget /> component in a "use client" context:

"use client";

import { FeedbackWidget } from "@emit-vision/feedback-widget-react";

export default function App() {
  return (
    <div>
      <h1>My App</h1>
      <FeedbackWidget
        apiKey="evk_your_ingest_key"
        environment="production"
        release="[email protected]"
        position="bottom-right"
      />
    </div>
  );
}

Important: Prop changes after the component mounts are ignored. The widget is imperative — to change options (e.g., switch API key or position), unmount and remount the component.

What gets captured

When a user submits feedback, a $feedback event is sent to your Emit Vision project with the following shape:

{
  "type": "event",
  "name": "$feedback",
  "properties": {
    "message": "Great product, would love dark mode!",
    "rating": 4,
    "url": "https://app.example.com/settings"
  },
  "environment": "production",
  "release": "[email protected]",
  "sdk": {
    "name": "emit-vision-feedback-widget",
    "version": "0.1.0"
  }
}

The message field is always captured. The rating and url fields are included only if the user set them (optional).

Viewing feedback

All feedback is routed to the Feedback inbox in your dashboard. Navigate to the project and look for the Feedback tab to view, filter, and respond to user messages.