While Frigade has a library of production-ready, unstyled Components, our useFlows() hook makes it easy to build headless and use Frigade to handle personalization, targeting, and state management for your experience.

This is especially useful if you want to build a highly custom experience with your UI and/or components. You can find some example of how to build custom Flows in our Custom Components guide.

Example use cases:

  • Building a custom onboarding progress widget for your sidebar navigation
  • Building a custom Kanban-style onboarding experience
  • Building a highly custom onboarding checklist interface
Make sure to call any Frigade hook within the context of <FrigadeProvider />

​
Custom Flows

The useFlows() hook is the main entry point for building a custom Flow. It contains a series of functions which will give you all data for a Flow, the user’s state in it, and allow you to make updates to the user’s state.

​
Flows

The below functions can be used to access and modify the state of a Flow.

getFlow(flowId: string): Flow
The individual steps/pages of the announcement
getFlowStatus(flowId: string): FlowStatus
Get the status of a Flow (COMPLETED_FLOW, STARTED_FLOW, NOT_STARTED_FLOW, SKIPPED_FLOW).
getFlowSteps(flowId: string): any[]
Convenience function to get the steps of a Flow (the steps array in config.yml).
markFlowStarted(flowId: string): void
Mark a Flow as started.
markFlowCompleted(flowId: string): void
Mark a Flow as completed.
markFlowSkipped(flowId: string): void
Mark a Flow as skipped (available in @frigade/react version 1.38.8 or newer).
markFlowNotStarted(flowId: string): void
Mark a Flow as not started (resets the user’s current state).
isLoading: boolean
Whether the Flow is loading.
isFlowAvailableToUser(flowId: string)
Whether the user has access to the Flow (e.g. if hidden through Targeting or turned off).

​
Steps

The below functions can be used to access and modify the state of Steps within a Flow.

markStepStarted(flowId: string, stepId: string): void
Mark a Step as started. This will update the user’s state in the Flow.
markStepCompleted(flowId: string, stepId: string): void
Mark a Step as completed. This will update the user’s state in the Flow.
markStepNotCompleted(flowId: string, stepId: string): void
Mark a Step as not completed. This will reset the user’s state for the given Step.
getStepStatus(flowId: string, stepId: string): StepStatus
Get the status of a Step (STARTED_STEP, COMPLETED_STEP, NOT_STARTED_STEP).
getNumberOfStepsCompleted(flowId: string): number
Get the number of steps completed in a Flow.
getNumberOfSteps(flowId: string): number
Get the total number of Steps in a Flow.
getCurrentStepIndex(flowId: string): number
Get current step index in the Flow.
Event HandlersUser Hook