Examples

Figma UI Kit

GitHub

Frigade

Platform

Components

Guides

Integrations

Get Started

Website

Beautiful UI components, best practices built-in

Components Overview

Product growth and onboarding for modern software companies

Overview

Frigade Documentation

Get set up with Frigade in less than 15 minutes

Quickstart

Quickstart Guide

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.

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

How Frigade Works

Easily manage your product onboarding from the admin dashboard

Admin Overview

Flows

Easily manage users and groups as they engage with your Flows

Users and Groups

Frigade provides analytics and connects to external analytics platforms

Analytics

Launch and orchestrate new Flows without code

Collections (Rules)

Targeting

Frigade supports development and production environments

Environments

Manage the rollout of new Flow updates with built-in version control

Version Control

The Frigade dashboard makes it easy to manage product onboarding

Easily manage users and organizations as they engage with your Flows

Users and Organizations

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

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

Dynamic Variables

Using HTML in Strings

Internationalization

Form Validation

i18n

Pre-built onboarding components for your React app.

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 carousel checklist component to drive set up and activation

Carousel

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

Provider

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

Mark Steps complete both programmatically and automatically

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 a Flow

Update a Flow's configuration and metadata

Update Flow

Delete Flow

Get User Flow State

Updates the user's state in a single Flow

Update User Flow State

Create a user, add properties, and tracking events

Create or update a User

Find a User

Delete a User

Create a Group

Find a Group

Delete a Group

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

Figma Component UI Kit

Announcement

Banner

Card

Checklist

Form

Survey

Tour

Custom component