Quickstart Guide

Get your API key

Install the React SDK

Install @frigade/react with your package manager.

npm install @frigade/react

Next, add the Frigade Provider component to your app and plug in your public API key from earlier. We recommend wrapping your entire application to ensure that the SDK is available everywhere. Below are examples for how to install the Provider in popular React frameworks.

// Add this to your main application file, e.g., App.tsx or index.tsx
import * as Frigade from "@frigade/react";

// Replace this with your Frigade public API key
const FRIGADE_API_KEY = "api_public_abcd1234";

export const App: React.FC = () => {
  return (
    <Frigade.Provider 
      apiKey={FRIGADE_API_KEY}
      // Replace this with the ID of the signed in user
      userId="my-user-id"
      userProperties={{
        email: "john@doe.com",
        name: "John Doe"
      }}
    >
      {/* ... */}
    </Frigade.Provider>
  );
};

Great! Now you’re ready to start building.

Building and styling

Create a Flow

Add a Flow to your application

For this example, let’s add a Banner to our product.

Click the Create button at the top of any page in the dashboard. Select the Banner component.
On the Flow detail page, click the Deploy button. Copy the code snippet to your clipboard.
Next, place the <Frigade.Banner /> component in your application. Make sure to do this in a subcomponent of the <Frigade.Provider /> component.

import * as Frigade from "@frigade/react";

export const MyComponent = () => {
  return <Frigade.Banner flowId="flow_abcd1234" />;
};

View the Flow

Tada! You should now see a shiny Frigade Banner where you placed it.

See users in the Flow

Once you interact with the Flow in your application, you should see your user appear in the users tab of the Flow detail page. You can reset a user’s progress in the Flow from here, which is especially useful for testing.

Updating Flows

User targeting

Styling Flows

Custom components

Nice work!

You’ve set up your first Frigade Flow. Our docs cover additional functionality like analytics, no-code deployments, and environments.

If you have questions or want to discuss your particular project, feel free to reach out to us at support@frigade.com or book a demo.

Get your API key

Install the React SDK

Install @frigade/react with your package manager.

npm install @frigade/react

// Add this to your main application file, e.g., App.tsx or index.tsx
import * as Frigade from "@frigade/react";

// Replace this with your Frigade public API key
const FRIGADE_API_KEY = "api_public_abcd1234";

export const App: React.FC = () => {
  return (
    <Frigade.Provider 
      apiKey={FRIGADE_API_KEY}
      // Replace this with the ID of the signed in user
      userId="my-user-id"
      userProperties={{
        email: "john@doe.com",
        name: "John Doe"
      }}
    >
      {/* ... */}
    </Frigade.Provider>
  );
};

Great! Now you’re ready to start building.

Building and styling

Create a Flow

Add a Flow to your application

For this example, let’s add a Banner to our product.

Click the Create button at the top of any page in the dashboard. Select the Banner component.
On the Flow detail page, click the Deploy button. Copy the code snippet to your clipboard.
Next, place the <Frigade.Banner /> component in your application. Make sure to do this in a subcomponent of the <Frigade.Provider /> component.

import * as Frigade from "@frigade/react";

export const MyComponent = () => {
  return <Frigade.Banner flowId="flow_abcd1234" />;
};

View the Flow

Tada! You should now see a shiny Frigade Banner where you placed it.

See users in the Flow

Updating Flows

User targeting

Styling Flows

Custom components

Nice work!

You’ve set up your first Frigade Flow. Our docs cover additional functionality like analytics, no-code deployments, and environments.

If you have questions or want to discuss your particular project, feel free to reach out to us at support@frigade.com or book a demo.

Integrations