Guide: Building a Custom Component
Use Frigade’s headless React Hooks to build a component to your exact needs
In this guide, we cover how to build two custom component examples from scratch using the useFlows() hook.
Custom Onboarding Checklist
This first example shows how to build a simple unstyled onboarding checklist component that tracks users’ progress and status through the the checklist.
Create a custom Flow
First, let’s create a new Custom Flow in Frigade by opening the Flows page and clicking on the Create Flow
button.
Define your config.yml
Next, open the Editor tab and paste in the following config.yml
. As this is a headless component, you can use any YAML schema that works for you. It will later be converted into JSON and be available in your code.
If you want your flow to include separate subtasks, you need to add the steps
array to your config.yml
. This will allow Frigade to track users’ state across steps and show you the conversion rate between steps.
However, if you simply want to render content, this is not necessary.
Copy the flowId
from Frigade. You will need it later.
Connect Flow to your component
Now, let’s create a React component that works with our custom Flow:
And that’s it! Make sure to replace the flowId
with your own Flow ID and to use the component inside the scope of the <FrigadeProvider />
.
Once you start interacting with the component, you will see data starting to show up in the Users tab and data in the Stats tab.