​
Preview

A simple <FrigadeForm/> in a popup modal

​
Setup Guide

Check out our guide on how to create forms, embed custom components, and more.

​
Code

​
Simple Modal Form

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

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

const App = () => {
  return (
     <FrigadeForm
      flowId="flow_laJhda4sgJCdsCy6"
      type="modal"
     />
    );
};

​
Multipage Inline Form

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

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

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

​
config.yml props

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

data
array
The individual steps/pages of the form
data[].id
string
Unique identifier for the step. Do not change this once the step has been created.
data[].title
string
The title of the step
data[].subtitle
string
The description of the step
data[].imageUri
string
Url to an image to display in the step
data[].videoUri
string
Url to a video to display in the step such as YouTube, Vimeo, or a direct link to an mp4 file
data[].primaryButtonTitle
string
The title of the primary button
data[].primaryButtonUri
string
The url to open when the primary button is clicked
data[].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.
data[].secondaryButtonTitle
string
The title of the secondary button
data[].secondaryButtonUri
string
The url to open when the secondary button is clicked
data[].secondaryButtonUriTarget
string
Works similarly to primaryButtonUriTarget but for the secondary button
data[].completionCriteria
string
Targeting that automatically completes the step (e.g. user.properties.connectedBank == true).
data[].startCriteria
string
Targeting that automatically blocks the step from starting until it becomes true (e.g. user.properties.connectedBank == true)
data[].visibilityCriteria
string
Targeting that automatically shows the step when it becomes true (e.g. user.properties.connectedBank == true)
data[].type
string
The type of the form step. Default value is multiInput, but this can also be a custom step type.
data[].props
object
The props of the form step (used with type multiInput)
data[].props.data[]
array
The data contained on the form step, typically text input boxes, multiple choice questions, etc.
data[].props.data[].id
string
Unique identifier for the step. Do not change this once the step has been created.
data[].props.data[].title
string
The label of the field
data[].props.data[].type
string
The type of the field. Supported types are text, multipleChoice, and multipleChoiceList. If you are using custom form step types, the name here should match it.
data[].props.data[].placeholder
string
The placeholder of the field
data[].props.data[].required
boolean
Whether or not the field is required
data[].props.data[].multiline
boolean
Whether or not the field is a multiline text field (only applicable for the text type)
data[].props.data[].validation
object
The validation rules for the field. See https://docs.frigade.com/platform/form-validation for more information.

​
React component props

​
allowBackNavigation

Optional allowBackNavigation: boolean

Whether to allow the user to navigate back to previous steps. Default is false.

View definition

​
appearance

Optional appearance: Appearance

The appearance of the flow. See https://docs.frigade.com/sdk/styling

View definition

​
className

Optional className: string

View definition

​
customFormElements

Optional customFormElements: Object

Map of custom form components. Can only be used with a step of type multiInput (defined in config.yml). The key must match the type property of the input defined in config.yml

Index signature

▪ [key: string]: (params: FormInputProps) => React.ReactNode

View definition

​
customStepTypes

Optional customStepTypes: Object

Map of custom components. The key must match the type property of the step defined in config.yml

Index signature

▪ [key: string]: (params: appearance?: Appearance ; canContinue: boolean ; customFormElements?: [key: string]: (params: FormInputProps) => React.ReactNode; } ; flowId: string ; onSaveData: (data: object) => void ; prefillData?: Record<string, any> ; setCanContinue: (canContinue: boolean) => void ; stepData: StepData }) => React.ReactNode | React.ReactNode

View definition

​
customVariables

Optional customVariables: Object

Dynamic variables to use in config.yml. See https://docs.frigade.com/flows/dynamic-variables

Index signature

▪ [key: string]: string | number | boolean

View definition

​
dismissible

Optional dismissible: boolean

Whether to show a dismiss button to exit out of the form. Applicable only for modal forms.

View definition

​
endFlowOnDismiss

Optional endFlowOnDismiss: boolean

If true, the user will be excited from the flow when the form is dismissed. Default is false.

View definition

​
flowId

flowId: string

View definition

​
hideOnFlowCompletion

Optional hideOnFlowCompletion: boolean

View definition

​
modalPosition

Optional modalPosition: "center" | "top-left" | "top-right" | "bottom-left" | "bottom-right"

Indicates the position of the modal if the form type is a modal. Default is center.

View definition

​
onButtonClick

Optional onButtonClick: (step: StepData, index?: number, cta?: "primary" | "secondary" | "link", 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"
nextStep?StepData
Returns

boolean

View definition

​
onComplete

Optional onComplete: () => void

Returns

void

View definition

​
onDismiss

Optional onDismiss: () => void

Returns

void

View definition

​
onFormDataChange

Optional onFormDataChange: (allFormData: any, stepSpecificFormData: any, step: StepData, index: number) => void

Handler that is called when the form data changes.

Parameters
NameType
allFormDataany
stepSpecificFormDataany
stepStepData
indexnumber
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

​
prefillData

Optional prefillData: Record<string, any>

Data to use for prefilling forms with data. Useful when you want to prefill a form with data from another source. The format of the data maps a step id to the prefill data. Depending on the implementation of the given step type, the value of the data will follow a different structure.

For type multiInputStep, the value contains another map similar to the structure returned from onFormDataChange

View definition

​
repeatable

Optional repeatable: boolean

If true, the form can be repeated multiple times. Default is false. Useful for e.g. contact/support forms.

View definition

​
setVisible

Optional setVisible: (visible: boolean) => void

Parameters
NameType
visibleboolean
Returns

void

View definition

​
showFooter

Optional showFooter: boolean

Show or hide the form footer

View definition

​
showPagination

Optional showPagination: boolean

Show a pagination indicator at the bottom of the form. Default is false.

View definition

​
style

Optional style: CSSProperties

View definition

​
type

Optional type: FrigadeFormType

View definition

​
updateUrlOnPageChange

Optional updateUrlOnPageChange: boolean

Whether to update the url when the page changes in multi-page forms. If enabled, the current url will be updated with the current step id in the following format: <my_url>?p=<current_step_id>

This is useful when wanting to capture URL changes with third-party tracking tools.

Default is false.

View definition

​
validationHandler

Optional validationHandler: (step: StepData, index: number, nextStep?: StepData, allFormData?: any, stepSpecificFormData?: any) => Promise<string | boolean>

Async function resolved when the user submits data in a step. If the promise evaluates to a string or false, the flow will not proceed to the next step. The string will be displayed as an error message if passed. If the promise evaluates to true, the flow will proceed to the next step.

Parameters
NameType
stepStepData
indexnumber
nextStep?StepData
allFormData?any
stepSpecificFormData?any
Returns

Promise<string | boolean>

View definition

​
visible

Optional visible: boolean

View definition