Framework

Feedback widget for Gatsby sites

Use Gatsby's wrapRootElement API in gatsby-browser.js, the standard place to inject a provider that should persist across page navigations.

Get your API key free

Setup steps

  1. 1

    Install: npm install @upstep/js

  2. 2

    Create gatsby-browser.js (and gatsby-ssr.js for parity) in your project root

  3. 3

    Export wrapRootElement to render UpstepProvider + FeedbackWidget around your app

Code

jsx
// gatsby-browser.js
import { UpstepProvider, FeedbackWidget } from "@upstep/js/react";

export const wrapRootElement = ({ element }) => (
  <UpstepProvider apiKey="upstep_xxx">
    {element}
    <FeedbackWidget />
  </UpstepProvider>
);
✦

While you're here: connect an AI agent

Every Upstep project ships a built-in MCP server. Once feedback starts flowing in from Gatsby, Claude Code, Cursor, or any MCP client can list it, triage it, and file Dev-only tasks, without leaving your editor.

See how the MCP server works

Start collecting feedback in Gatsby today

Free plan. No credit card. Your API key is ready the moment you sign up.

Get started free