Quickstart Guide

The first thing to do is sign up for a Frigade account at frigade.com. Once you’re signed in, locate your Frigade public API key in the API Keys section of the dashboard.

You can install @frigade/react with npm or yarn.

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.

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

const FRIGADE_API_KEY = "api_public_abcd1234";

export const App = () => {
  const userId = "...";

  return (
    <Frigade.Provider apiKey={FRIGADE_API_KEY} userId={userId}>
      {/* ... */}
    </Frigade.Provider>
  );
};

Great! Now you’re ready to start building.

Add a Flow to your application

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

1. Click the “Create Flow” button at the top of the page and choose Banner
2. On the Flow detail page, tap Flow ID to copy it to your clipboard
3. Next, place the Banner component in your application with your Flow ID

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

export const DemoComponent = () => {
  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.

Once a Flow is created, you can update it at any time from the dashboard.

1. Navigate to the Flows page and select a Flow
2. In the Editor tab you can make changes with the basic or advanced editor
3. Make changes and click Save and Frigade will update the Flow in real-time

Check out the documentation for each component to see all the configuration options. Check out the Banner component for this quickstart demo.

Sometimes you only want to show an experience to a specific user or group of users. Frigade makes this easy with targeting.

1. Navigate to the Flows page and select a Flow
2. In the Targeting tab you can define the targeting for the Flow
3. Frigade makes sure the Flow is only shown to users that match your criteria

Check out integrations to connect other platforms and import existing user segments for targeting.

Frigade is fully customizable. You can style components to fit seamlessly within your application. Styling documentation is covered here.

When a pre-built Frigade UI component won’t cut it, you can also build custom Frigade-powered components. See our custom component guide here.