Rendering guides

Once you've created a guide, you'll need to render it in your product. In this document you'll learn how to render guides in your product using the guides API.

In addition to the guides API, Knock exposes a set of client SDKs that you can use to render guides in your product. These SDKs provide helpers and logic which make it easier to work with guides in your product.

• React SDK. Provides pre-built UI components, and a set of hooks for building your own custom UI components.
• React Native SDK. Provides hooks for building your own custom UI components.
• JS SDK. Provides the low-level API bindings and state management for building your own custom UI components.

We'll soon be adding support for more of our client SDKs. Please reach out to our team at support@knock.app if there's a specific SDK that's preventing you from adopting guides.

The Knock client SDKs manage fetching and accessing guides from the Knock API. They provide methods for accessing the fetched guides and their steps. You can fetch guides either by a type (corresponding to a message type key) or a key (a specific guide key) to select a guide from the fetched set of guides.

Here's how to think about when to use both of these:

• key: If you want your component to only ever render a specific instance of a guide, like when building an embedded UI, then use the key selector.
• type: If you want to render any guide that uses this message type, like when building a generic "Banner" component that could be used multiple times across many guides, but only ever shows a single banner at a time, then use the type selector.
• When multiple guides exist for a single type, by default we return the earliest created guides first then the most recently created guide last. Alternatively, you can control this behavior and manually configure the relative priority of guides by ordering guides in the Knock dashboard.