Quickstart Guide
Get set up with Frigade in less than 15 minutes
Sign up and install
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.
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
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.
Once a Flow is created, you can update it at any time from the dashboard.
- Navigate to the Flows page and select a Flow
- In the Editor tab you can make changes with the basic or advanced editor
- 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.
- Navigate to the Flows page and select a Flow
- In the Targeting tab you can define the targeting for the Flow
- 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.
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.