A condensed checklist component that can be used inline or in a modal
The Checklist
component is one of Frigade’s most popular tools, especially for user onboarding and activation. They’re super handy for guiding users through their journey, whether it’s at the start of their experience or when they’re setting up a new product vertical or a complex feature.
When to Use Checklists:
Advantages of Announcements::
Best Practices for Checklists:
To learn about how to customize Frigade components, see the customization documentation and examples of custom themes in action.
Optional component to wrap the child components in, e.g. as={Dialog}
will render the Flow in a modal Dialog. Defaults to Box
.
Whether to automatically mark the Flow started (i.e. in progress) when the Flow is eligible to be shown.
You will need to call flow.start()
or step.start()
from the parent component if you set this to false
. Most components should not need to override this behavior.
Defaults to true
.
Emotion CSS prop to apply to the component. See Theming documentation for more information.
Example usage:
Whether the Flow is dismissible or not
The Flow ID to render. You can find the Flow ID in the Frigade dashboard.
If true, the Flow will be mounted even if it has already been completed or dismissed. However, if the user does not match the Flow’s targeting, the Flow will not be mounted.
Register the Flow as a modal to prevent popup collisions (only one modal Flow will render at a time).
Handler for when the Flow is completed. This is event is fired immediately after the user completes the Flow.
Handler for when the Flow is dismissed (skipped). This is event is fired immediately after the user dismisses the Flow.
Handler for when primary button is clicked.
If this function returns false or a promise that resolves to false
, the step will not be automatically completed when clicked.
Handler for when secondary button is clicked.
If this function returns false or a promise that resolves to false
, the step will not be automatically completed when clicked.
Map of step types to their respective components.
Use this to build custom step components. The type
defined on the step in the Flow YAML config should match the key in this object.
For instance, if you have a step with type: 'custom'
, you should provide a component for it like so:
The corresponding YAML config would look like:
Variables to pass to the Flow. You can use variables in the Flow configuration to customize copy.
For instance, you can use title: Hello, ${name}!
in the Flow configuration and pass variables={{name: 'John'}}
to customize the copy.
Optional component to wrap the child components in, e.g. as={Dialog}
will render the Flow in a modal Dialog. Defaults to Box
.
Whether to automatically mark the Flow started (i.e. in progress) when the Flow is eligible to be shown.
You will need to call flow.start()
or step.start()
from the parent component if you set this to false
. Most components should not need to override this behavior.
Defaults to true
.
Emotion CSS prop to apply to the component. See Theming documentation for more information.
Example usage:
Whether the Flow is dismissible or not
The Flow ID to render. You can find the Flow ID in the Frigade dashboard.
If true, the Flow will be mounted even if it has already been completed or dismissed. However, if the user does not match the Flow’s targeting, the Flow will not be mounted.
Register the Flow as a modal to prevent popup collisions (only one modal Flow will render at a time).
Handler for when the Flow is completed. This is event is fired immediately after the user completes the Flow.
Handler for when the Flow is dismissed (skipped). This is event is fired immediately after the user dismisses the Flow.
Handler for when primary button is clicked.
If this function returns false or a promise that resolves to false
, the step will not be automatically completed when clicked.
Handler for when secondary button is clicked.
If this function returns false or a promise that resolves to false
, the step will not be automatically completed when clicked.
Map of step types to their respective components.
Use this to build custom step components. The type
defined on the step in the Flow YAML config should match the key in this object.
For instance, if you have a step with type: 'custom'
, you should provide a component for it like so:
The corresponding YAML config would look like:
Variables to pass to the Flow. You can use variables in the Flow configuration to customize copy.
For instance, you can use title: Hello, ${name}!
in the Flow configuration and pass variables={{name: 'John'}}
to customize the copy.
If true, all steps must be completed in order. This means that the next step will be disabled until the current step is completed. Default behavior is false
.
The steps to show in the checklist flow.
Unique identifier for the step. Do not change this once the step has been created.
The title of the step
The description of the step
Url to an image to display in the step
Url to an icon to display in the step. This is only supported by the carousel checklist component.
Url to a video to display in the step such as YouTube, Vimeo, or a direct link to an mp4 file
Config for the primary button in this step.
Primary button action. (defaults to step.complete).
Possible values: false
, flow.back
, flow.complete
, flow.forward
, flow.restart
, flow.skip
, flow.start
, step.complete
, step.skip
, step.reset
, step.start
Primary button URI target (defaults to _self).
Primary button title. If omitted, the primary button will not be shown.
Primary button URI.
Deprecated: use primaryButton.title
instead. The title of the primary button
Deprecated: use primaryButton.uri
instead. The url to open when the primary button is clicked
Deprecated: use primaryButton.target
instead. 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.
Config for the secondary button in this step.
Secondary button action. (defaults to step.complete).
Possible values: false
, flow.back
, flow.complete
, flow.forward
, flow.restart
, flow.skip
, flow.start
, step.complete
, step.skip
, step.reset
, step.start
Secondary button URI target (defaults to _self).
Secondary button title. If omitted, the secondary button will not be shown.
Secondary button URI.
Deprecated: use secondaryButton.title
instead. The title of the secondary button
Deprecated: use secondaryButton.uri
instead. The url to open when the secondary button is clicked
Deprecated: use secondaryButton.target
instead. The target of the secondary 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.
Targeting that automatically completes the step. E.g.: user.property(‘connectedBank’) == true
Targeting that automatically blocks the step from starting until it becomes true. E.g.: user.property(‘connectedBank’) == true
Targeting that automatically shows the step when it becomes true. E.g.: user.property(‘connectedBank’) == true
Override the default UI props for the corresponding component
A condensed checklist component that can be used inline or in a modal
The Checklist
component is one of Frigade’s most popular tools, especially for user onboarding and activation. They’re super handy for guiding users through their journey, whether it’s at the start of their experience or when they’re setting up a new product vertical or a complex feature.
When to Use Checklists:
Advantages of Announcements::
Best Practices for Checklists:
To learn about how to customize Frigade components, see the customization documentation and examples of custom themes in action.
Optional component to wrap the child components in, e.g. as={Dialog}
will render the Flow in a modal Dialog. Defaults to Box
.
Whether to automatically mark the Flow started (i.e. in progress) when the Flow is eligible to be shown.
You will need to call flow.start()
or step.start()
from the parent component if you set this to false
. Most components should not need to override this behavior.
Defaults to true
.
Emotion CSS prop to apply to the component. See Theming documentation for more information.
Example usage:
Whether the Flow is dismissible or not
The Flow ID to render. You can find the Flow ID in the Frigade dashboard.
If true, the Flow will be mounted even if it has already been completed or dismissed. However, if the user does not match the Flow’s targeting, the Flow will not be mounted.
Register the Flow as a modal to prevent popup collisions (only one modal Flow will render at a time).
Handler for when the Flow is completed. This is event is fired immediately after the user completes the Flow.
Handler for when the Flow is dismissed (skipped). This is event is fired immediately after the user dismisses the Flow.
Handler for when primary button is clicked.
If this function returns false or a promise that resolves to false
, the step will not be automatically completed when clicked.
Handler for when secondary button is clicked.
If this function returns false or a promise that resolves to false
, the step will not be automatically completed when clicked.
Map of step types to their respective components.
Use this to build custom step components. The type
defined on the step in the Flow YAML config should match the key in this object.
For instance, if you have a step with type: 'custom'
, you should provide a component for it like so:
The corresponding YAML config would look like:
Variables to pass to the Flow. You can use variables in the Flow configuration to customize copy.
For instance, you can use title: Hello, ${name}!
in the Flow configuration and pass variables={{name: 'John'}}
to customize the copy.
Optional component to wrap the child components in, e.g. as={Dialog}
will render the Flow in a modal Dialog. Defaults to Box
.
Whether to automatically mark the Flow started (i.e. in progress) when the Flow is eligible to be shown.
You will need to call flow.start()
or step.start()
from the parent component if you set this to false
. Most components should not need to override this behavior.
Defaults to true
.
Emotion CSS prop to apply to the component. See Theming documentation for more information.
Example usage:
Whether the Flow is dismissible or not
The Flow ID to render. You can find the Flow ID in the Frigade dashboard.
If true, the Flow will be mounted even if it has already been completed or dismissed. However, if the user does not match the Flow’s targeting, the Flow will not be mounted.
Register the Flow as a modal to prevent popup collisions (only one modal Flow will render at a time).
Handler for when the Flow is completed. This is event is fired immediately after the user completes the Flow.
Handler for when the Flow is dismissed (skipped). This is event is fired immediately after the user dismisses the Flow.
Handler for when primary button is clicked.
If this function returns false or a promise that resolves to false
, the step will not be automatically completed when clicked.
Handler for when secondary button is clicked.
If this function returns false or a promise that resolves to false
, the step will not be automatically completed when clicked.
Map of step types to their respective components.
Use this to build custom step components. The type
defined on the step in the Flow YAML config should match the key in this object.
For instance, if you have a step with type: 'custom'
, you should provide a component for it like so:
The corresponding YAML config would look like:
Variables to pass to the Flow. You can use variables in the Flow configuration to customize copy.
For instance, you can use title: Hello, ${name}!
in the Flow configuration and pass variables={{name: 'John'}}
to customize the copy.
If true, all steps must be completed in order. This means that the next step will be disabled until the current step is completed. Default behavior is false
.
The steps to show in the checklist flow.
Unique identifier for the step. Do not change this once the step has been created.
The title of the step
The description of the step
Url to an image to display in the step
Url to an icon to display in the step. This is only supported by the carousel checklist component.
Url to a video to display in the step such as YouTube, Vimeo, or a direct link to an mp4 file
Config for the primary button in this step.
Primary button action. (defaults to step.complete).
Possible values: false
, flow.back
, flow.complete
, flow.forward
, flow.restart
, flow.skip
, flow.start
, step.complete
, step.skip
, step.reset
, step.start
Primary button URI target (defaults to _self).
Primary button title. If omitted, the primary button will not be shown.
Primary button URI.
Deprecated: use primaryButton.title
instead. The title of the primary button
Deprecated: use primaryButton.uri
instead. The url to open when the primary button is clicked
Deprecated: use primaryButton.target
instead. 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.
Config for the secondary button in this step.
Secondary button action. (defaults to step.complete).
Possible values: false
, flow.back
, flow.complete
, flow.forward
, flow.restart
, flow.skip
, flow.start
, step.complete
, step.skip
, step.reset
, step.start
Secondary button URI target (defaults to _self).
Secondary button title. If omitted, the secondary button will not be shown.
Secondary button URI.
Deprecated: use secondaryButton.title
instead. The title of the secondary button
Deprecated: use secondaryButton.uri
instead. The url to open when the secondary button is clicked
Deprecated: use secondaryButton.target
instead. The target of the secondary 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.
Targeting that automatically completes the step. E.g.: user.property(‘connectedBank’) == true
Targeting that automatically blocks the step from starting until it becomes true. E.g.: user.property(‘connectedBank’) == true
Targeting that automatically shows the step when it becomes true. E.g.: user.property(‘connectedBank’) == true
Override the default UI props for the corresponding component