Using our @knocklabs/react and @knocklabs/client libraries, you can create fully custom guide components that are backed by the Knock Guide API and real-time service.

Install the Knock React SDK.

Setup the KnockGuideProvider within your product.

You'll need to ensure the guide provider is a child component of the KnockProvider. You can find the channelId for your guide on the guide details page in the dashboard.

Setup a custom message type.

If you're not using one of our pre-built message types, you'll need to set up a custom message type. You can learn more about how to do this in our message types documentation.

Create a guide.

You can learn more about how to create a guide in our creating guides documentation.

Build a component to render your guide.

Next, you'll need to build a component to render your guide. You can use the useGuide hook to get the current guide step and render it. You'll either want to find a guide by its message type or by the guide key.

Mount your component under the KnockGuideProvider.

Once mounted in your application tree, if your user becomes eligible for the guide, then the component will be rendered and displayed to your users.

Other cases

Rendering multiple guides

If you want to fetch multiple guides of the same message type, you can use the useGuides hook for use in your component.

Typing the guide step content

If you're using a custom message type, you can type the guide step content to ensure type safety.

Advanced: working with the `GuideClient`

In certain cases, you may need to drop down to operate on the guide client, which is the state management layer automatically created when you mount a GuideProvider.

You can always access the guide client by using the useGuideContext hook:

One use case for accessing the guide client is to force a refetch of the users eligible guides, which you can do through the guideClient.fetch() method.