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

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