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

Make sure to call any Frigade hook within the context of <FrigadeProvider>

This is especially useful if you want to build a highly custom experience with your UI and/or components.

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

​
Building a custom flow

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.

  • getFlow(flowId: string): Flow - Gets all the data from config.yml as JSON.

  • getFlowSteps(flowId: string): any[] - Convenience function to get the steps of a flow (the data array in config.yml).

  • markFlowStarted(flowId: string): void - Mark a flow as started.

  • markFlowCompleted(flowId: string): void - Mark a flow as completed.

  • markFlowNotStarted(flowId: string): void - Mark a flow as not started (resets the user’s current state).

  • 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). Note that this function will return null until the state has been loaded from the Frigade API.

  • getFlowStatus(flowId: string): FlowStatus - Get the status of a step (COMPLETED_FLOW, STARTED_FLOW, NOT_STARTED_FLOW).

  • 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.

  • isLoading: boolean - Whether the flow is loading.