​
Preview

A <FrigadeChecklist/> with the default (basic) style

​
Code

// Paste the following provider and React component into your application

import { FrigadeChecklist } from '@frigade/react';

const App = () => {
  return (
    <FrigadeChecklist
      flowId='flow_laJhda4sgJCdsCy6'
      type="inline"
     />
  );
};

​
config.yml props

The following props are available in config.yml in the steps array:

​
steps
array
The steps to show in the checklist flow.
​
steps[].id
string
Unique identifier for the step. Do not change this once the step has been created.
​
steps[].title
string
The title of the step
​
steps[].subtitle
string
The description of the step
​
steps[].imageUri
string
Url to an image to display in the step
​
steps[].videoUri
string
Url to a video to display in the step such as YouTube, Vimeo, or a direct link to an mp4 file
​
steps[].primaryButtonTitle
string
The title of the primary button
​
steps[].primaryButtonUri
string
The url to open when the primary button is clicked
​
steps[].primaryButtonUriTarget
string
The target of the primary button url (default: _blank; use _self to open in the same window). Setting it to # will open the existing page and dismiss any Frigade modals.
​
steps[].secondaryButtonTitle
string
The title of the secondary button
​
steps[].secondaryButtonUri
string
The url to open when the secondary button is clicked
​
steps[].secondaryButtonUriTarget
string
Works similarly to primaryButtonUriTarget but for the secondary button
​
steps[].completionCriteria
string
Targeting that automatically completes the step (e.g. user.properties.connectedBank == true).
​
steps[].startCriteria
string
Targeting that automatically blocks the step from starting until it becomes true (e.g. user.properties.connectedBank == true)
​
steps[].visibilityCriteria
string
Targeting that automatically shows the step when it becomes true (e.g. user.properties.connectedBank == true)
​
steps[].props
object
Additional properties that can be used depending on the component type
​
steps[].props.autoplayVideo
boolean
Whether to autoplay the video specified in the videoUri. Note that autoplaying videos with audio is not allowed by most browsers.
​
steps[].stepName
string
A short name for the step
​
steps[].skippable
boolean
Whether or not the step can be skipped. This will mark the step as completed when clicking the secondary CTA.
​
steps[].autoMarkCompleted
boolean
Whether or not to automatically mark the step as completed when the user clicks the primary button

​
React component props

​
appearance

Optional appearance: Appearance The appearance of the flow. See https://docs.frigade.com/sdk/styling View definition

​
autoExpandFirstIncompleteStep

Optional autoExpandFirstIncompleteStep: boolean View definition

​
autoExpandNextStep

Optional autoExpandNextStep: boolean View definition

​
checklistStyle

Optional checklistStyle: "default" | "condensed" | "with-guide" | "carousel" View definition

​
className

Optional className: string View definition

​
customStepTypes

Optional customStepTypes: Record&lt;string, ReactNode | (stepData: StepData, appearance: Appearance) => ReactNode> Map of custom step types that the checklist supports. To use a custom steps in your checklist, see Component Customization View definition

​
customVariables

Optional customVariables: Object See https://docs.frigade.com/flows/dynamic-variables Index signature ▪ [key: string]: string | number | boolean View definition

​
flowId

flowId: string View definition

​
hideOnFlowCompletion

Optional hideOnFlowCompletion: boolean View definition

​
onButtonClick

Optional onButtonClick: (step: StepData, index?: number, cta?: "primary" | "secondary" | "link" | "back" | "collapse" | "expand", nextStep?: StepData) => boolean Handler for when a primary or secondary CTA is clicked (regardless if step is completed or not). Return true if your app performs an action (e.g. open other modal or page transition).
Parameters
NameType
stepStepData
index?number
cta?"primary" | "secondary" | "link" | "back" | "collapse" | "expand"
nextStep?StepData
Returns
boolean View definition

​
onComplete

Optional onComplete: () => void
Returns
void View definition

​
onDismiss

Optional onDismiss: () => void
Returns
void View definition

​
onStepCompletion

Optional onStepCompletion: (step: StepData, index: number, nextStep?: StepData, allFormData?: any, stepSpecificFormData?: any) => boolean Handler for when a step is completed.
Parameters
NameTypeDescription
stepStepData
indexnumber
nextStep?StepData
allFormData?anyAll form data collected so far (only applicable to FrigadeForms)
stepSpecificFormData?anyForm data collected for the finished step (only applicable to FrigadeForms)
Returns
boolean View definition

​
setVisible

Optional setVisible: (visible: boolean) => void
Parameters
NameType
visibleboolean
Returns
void View definition

​
style

Optional style: CSSProperties View definition

​
subtitle

Optional subtitle: string View definition

​
title

Optional title: string View definition

​
type

Optional type: "inline" | "modal" View definition

​
visible

Optional visible: boolean View definition