Quickstart

First, sign up up your Frigade account for free here. Once you’re signed in, grab your Frigade public API key in the API Keys section of the dashboard.

Install @frigade/react with either npm or yarn

npm install @frigade/react@1.x

For this demo, we will create a simple onboarding checklist for a SaaS product. Add the FrigadeProvider to your app’s entry point (e.g. App.tsx).

import { FrigadeProvider } from "@frigade/react";

const App = () => {
  return (
    <FrigadeProvider
      publicApiKey="<MY_PUBLIC_API_KEY>"
      userId="<OPTIONAL_USER_ID>"
      organizationId="<OPTIONAL_ORGANIZATION_ID>"
    >
      // Your app
    </FrigadeProvider>
  );
};

Now you can use the FrigadeChecklist component to render a Flow. Open the Frigade Flows tab in the dashboard and create a new Checklist Flow.

This Flow will be pre-populated with a simple onboarding checklist YAML file that you can use for this demo. Copy the flowId from your new Flow and add it to a FrigadeChecklist component in your app where you wish to render it.

<FrigadeChecklist
  flowId="<FLOW_ID>"
  title="Getting Started"
  subtitle="Follow our quick checklist to get started"
/>

If you run your React app, you should now see a fully functioning onboarding checklist. Congratulations, you have just built your first Flow in Frigade!

The default <FrigadeChecklist/> component