Web SDK (React)

Purpose

Run the same Rheo flow construct in a host web app (quizzes, funnels, onboarding). There is no separate “web flow” type — authors use one canvas; pin warnings call out mobile-only or web-only steps.

Install

After @getrheo/react is published, install it in the host app:

pnpm add @getrheo/react

This repository's example app depends on the workspace package until that release. Peer dependencies: react and react-dom ≥ 18.

How to

1. Wrap your app with RheoProvider and mount Flow with a channel public id.
2. In App settings → Convert settings → Integrations, open the Web SDK card and add the site origin (scheme, host, and port). The Next.js example at apps/example-web (pnpm dev:local:app:web) needs http://localhost:5173 added by you. Dashboard CORS is separate. A browser request from an origin this app did not list is rejected.
3. For payments, add a Stripe Integration Node with a Payment Link on buy.stripe.com or another https://*.stripe.com host (see Stripe Payment Links). Paste the app's webhook URL and signing secret into Stripe. No Stripe adapter on RheoProvider. A return restores the session. iap_purchase is written only after Stripe confirms the Checkout Session.
4. Optionally customize attribution (first-touch UTM capture is on by default and is not recaptured from the return URL).

import { RheoProvider, Flow } from '@getrheo/react';

export const App = () => (
  <RheoProvider
    config={{
      publishableKey: import.meta.env.VITE_RHEO_PUBLISHABLE_KEY,
      apiBaseUrl: import.meta.env.VITE_RHEO_API_BASE_URL,
    }}
  >
    <Flow channelId="ch_…" />
  </RheoProvider>
);

Soft-degrades on web

Attribution

With attribution.enabled not set to false, the SDK writes canonical keys (acquisition.*, link.ext.*, attribution.isOrganic) from the page query string and document.referrer. Pass attribution.providers for host collectors.

Related

• Stripe Payment Links
• SDK overview
• ADR 0008