Examples

Figma UI Kit

GitHub

Frigade

Platform

Components

Guides

Integrations

Get Started

Website

Pre-built onboarding components for your React app.

Components Overview

SDK and API to build product growth and onboarding Flows

Quickstart

Frigade combines two core concepts: **Flows** and **Components**

How Frigade Works

Build and manage product onboarding for React and Next.js

Welcome

Frigade (1.0)

Add Frigade to your React app in less than 5 minutes.

The Frigade dashboard makes it easy to manage product onboarding

Overview

Flows

Easily manage users and groups as they engage with your Flows

Users and Groups

Frigade has provides stats out of the box and supports external analytics platforms.

Analytics

Rules can be used to determine the frequency and timing across a group of Flows. For example, Rules can be used to show at most one announcement per day or to space out a series of in-app product upsells to avoid overwhelming users.

Rules

Targeting

Frigade environments allow you to manage your Flows across development and production.

Environments

Version Control

Easily manage users and organizations as they engage with your Flows

Users and Organizations

Dynamic Variables

Using HTML in Strings

Internationalization

Form Validation

i18n

Fully customize our components, or build your own Flows and components headless.

Customization

Announcement

A lightweight component to alert users of important information or actions

Banner

A friendly, scrollable checklist component

Carousel Checklist

A collapsible checklist component that can be used inline or in a popup

Collapsible Checklist

A simple getting started checklist component

Default Checklist

Embedded tips help you create dismissible product education embedded in your UI

Embedded Tip

Form

Hints are a great way to subtly call attention to specific UI or elements for users

Hint

Product Hints

NPS Survey

NPS Survey React Component

Product Tours can help guide users through a product flow or a specific feature

Tour

Product Tours

SDK Overview

Styling

Navigation

Event Handlers

Flow Hook

User Hook

Organization Hook

Marking Steps Complete

Programmatically Completing a Step

Reverse Proxy

Reverse Proxy and Custom Domains

Authorization

API Authorization

Webhooks

Flow Responses

Users

Organizations

Announcements

Guide: Product Announcements

Forms

Guide: Forms

NPS Surveys

Guide: NPS Surveys

Guide: Product Tours and Hints

Use Frigade's headless React Hooks to build a component to your exact needs

Custom Components

Guide: Building a Custom Component

Targeting New Users

Guide: Targeting New Users

Connect your favorite tools to Frigade to power analytics, communication, workflows, and more.

Amplitude Integration

Amplitude

Mixpanel Integration

Mixpanel

Posthog Integration

Posthog

Segment

Segment Integration

Heap Integration

Heap

Communicate information or drive action via pop-up announcements

Communicate information or drive action via in-line banners

A condensed checklist component that can be used inline or in a modal

Collapsible

Communicate information or drive action via in-line content cards

Card

Collect user information via inline or modal forms

Collect Net Promoter Scores from your users

Guide users through a specific product flow or feature

React SDK Overview

SDK Quickstart

React SDK Quickstart

Theming

CSS Overrides

useFlow

useUser

useGroup

useFrigade

Find solutions to common issues with the Frigade SDK.

Common issues

Common issues and solutions

JS Quickstart

Frigade JS Type Definition

Flow

Flow JS Type Definition

Step

Step JS Type Definition

Learn how to run unit and integration tests with your Frigade Flows.

Automated testing

Dynamically Completing a Step

How to set up Frigade in your React app if you're already using V1 and want to start using V2

Using V1 and V2

Running both V1 and V2 of the SDK

How to upgrade an existing V1 SDK implementation to V2.

Upgrading from V1

Upgrading from V1 to V2

Get all Flows

Get Flow

Update Flow

Create Flow Response

Create User

Get User

Delete User

Groups

Use Frigade's headless React Hooks or the JS SDK to build custom components for your use case.

In this video, we show you how to build a GitHub style embedded card.

Cards and Banners (video)

Video Guide: Cards and Banners

In this video, we show you how to build a Form with React, Frigade, and Next.js and how to send the form data to Slack.

Form with Slack (video)

Video Guide: Build a form with React and Frigade, and send the data to Slack

In this video, we show you how to build a 'New' badge with React and Frigade.

Feature Badge (video)

Video Guide: Build a 'New' Badge with React and Frigade

Learn how to use Frigade's [targeting](/v2/platform/targeting) feature to only show a Flow to new users

Components

Components Overview

Component Library

Components

Figma Component UI Kit

Announcement

Banner

Card

Checklist

Form

Survey

Tour

Custom component

Components

​Component Library

​Components

Figma Component UI Kit

Announcement

Banner

Card

Checklist

Form

Survey

Tour

Custom component

Component Library

Components