Quickstart Guide

The first thing to do is sign up for a Frigade account at frigade.com. Then, locate your Frigade public API key in the Developer tab of the dashboard.

Install @frigade/react with your package manager.

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.

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 button at the top of any page in the dashboard. Select the Banner component.
2. On the Flow detail page, click the Deploy button. Copy the code snippet to your clipboard.
3. 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.

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. You can also see a live demo of the theming system at demo.frigade.com.

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