Related resources

Examples

Figma UI Kit

GitHub

Frigade

Platform

Components

Guides

Integrations

Get Started

Website

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

Cards and Banners

Guide: Cards and Banners

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 Flows without code

Collections

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.

Components Overview

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

Beautiful UI components, best practices built-in

Communicate information or drive action via pop-up announcements

Communicate information or drive action via in-line banners

Communicate information or drive action via in-line content cards

Card

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

Collect user information via inline or modal forms

Collect Net Promoter Scores from your users

Progress Badge

Hints are a great way to subtly call attention to specific parts of your UI

Guide users through a specific product flow or feature

React SDK Overview

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 Flow Steps complete both programmatically and automatically

Dynamically Completing a Step

Link a guest session's state to a user when they register or log in

Merging a Guest with User

Merging a guest session with a authenticated user

Upgrading from V1

V1 SDK Guide

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

Flow Component

useFlow Hook

JavaScript SDK

Using Custom Components in Collections

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

Guide: Building Slack-Integrated Forms

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

New Feature Badge

Guide: Build a 'New' Badge

Product Tours & Hints

Guide: Product Tours & Hints

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

Component Guides

Additional Guides

Guide: Cards and Banners

Component Guides

Additional Guides

​Related resources

Related resources