Quickstart

This example shows how to build your first onboarding and education Flow in your app in less than 5 minutes.

​

Prerequisites

1. Set up your Frigade account (you can request one here).
2. Get your Frigade public API key in the API Keys section of the Frigade dashboard.

​

Building your first Flow

​

1. Install the Frigade SDK

Install @frigade/react with either npm or yarn

npm install @frigade/react

yarn add @frigade/react

​

2. Place Frigade in your app

For this demo, we will create a simple onboarding checklist for a SaaS product. Add the following code to your app’s entry point (e.g. App.tsx) using your public API key and optionally add a user ID to identify the user in Frigade. To programmatically change the user id or organization id a different place in the app, see the users and organizations SDK pages.

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

const App = () => {
  return (
    <FrigadeProvider publicApiKey='<MY_PUBLIC_API_KEY>'
                      userId='<OPTIONAL_USER_ID>'
                      organizationId='<OPTIONAL_ORGANIZATION_ID>'
                      >
      ...
    </FrigadeProvider>
  );
};

With the FrigadeProvider in place, you can now use the FrigadeChecklist component to render a Flow. Open the Frigade dashboard and create a new Flow. This flow will be pre-populated with a simple onboarding checklist that you can use for this demo. Copy the Flow ID from the Flow’s settings page and add it to a FrigadeChecklist component in your app where you wish to render it.

import { FrigadeChecklist } from '@frigade/react';

const App = () => {
  return (
    <FrigadeChecklist
      flowId='flow_BgrASsVAVfHw1Vgw'
      title='Getting Started'
      subtitle='Follow our quick checklist to get started'
      />
    );
};

That’s it! 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!

​

3. Browse the components library

The above checklist is just one of many production-ready components that you can use to build your Flows. To see a full list of available components, visit the Components section in your admin dashboard.

​

4. Customize your Flow

Most developers want to customize the look and feel of their Flows to match their app’s design. To style the existing Frigade components, see the Styling page. If you wish to use Frigade headless components, see the Custom Flows SDK documentation.