The 2-line integration, in every stack we support

We say Upstep drops into an app in two lines of code. That's a claim you can check, so here it is for every stack we support, unedited.

React

tsx

import { UpstepProvider, FeedbackWidget }
  from "@upstep/js/react";

export default function App({ children }) {
  return (
    <UpstepProvider apiKey="upstep_xxx">
      {children}
      <FeedbackWidget />
    </UpstepProvider>
  );
}

The provider gives every component in the tree access to your project; the widget is the button and panel your users actually see. Next.js, Remix, Gatsby, and Vite all use the same two components.

Plain JavaScript, no framework

import Upstep from "@upstep/js";

// Mounts the feedback button automatically
Upstep.init({ apiKey: "upstep_xxx" });

No build step at all

html

<script
  type="module"
  src="https://unpkg.com/@upstep/js/dist/index.js"
  data-api-key="upstep_xxx"
></script>

This one's for WordPress, Webflow, Shopify, or any site where you can drop in a script tag but don't control a build pipeline. Same widget, same board on the other end.

React Native

tsx

import { FeedbackProvider, FeedbackButton, FeedbackSheet }
  from "@upstep/react-native";

export default function App() {
  return (
    <FeedbackProvider apiKey="upstep_xxx">
      {/* your app */}
      <FeedbackButton />
      <FeedbackSheet />
    </FeedbackProvider>
  );
}

Same idea, native components. A button that opens a sheet instead of a panel, but it reports to the same project and the same board as your web app.

One API key, one board

That's the part that matters more than the line count: web, mobile, and no-build-step sites all report to the same project with the same API key. Feedback from your iOS app and your marketing site's contact form lands on one board, sorted by votes, not three separate ones you have to check.