In-app messaging UI in React
Using our React SDK, it's possible to create in-app messaging experiences either using our pre-built components, or by building your own custom components on top of custom in-app message types.
Note: this guide assumes that already have a Knock account with a configured in-app channel. If you haven't yet signed up for Knock, you can do so here.
Using our pre-built components
The React library (@knocklabs/react) provides pre-built components that map to our out-of-the-box message types for banner, card, and modal.
You can use these components by dropping them into your application where ever you’d like them to display.
Setup the KnockProvider and KnockInAppMessagesChannelProvider
The KnockProvider is a React context provider that makes the Knock client SDK available to your application. The KnockInAppMessagesChannelProvider is a React context provider that makes the Knock in-app messages client in to your application.
Mount one or more pre-built components
Mount one or more of the pre-built components (<Banner />, <Card />, <Modal />) under the KnockInAppMessagesChannelProvider in your application tree.
Building custom components
In addition to the pre-built components, you can also write custom messaging components on top of our hooks and data layer. This makes it possible for you to create custom message types, and build custom messaging UI experiences, all powered by Knock's infrastructure.
Create a custom message type (optional)
If you'd like to create a custom message type, you can do so by following the guide on creating custom message types.
Otherwise, you can create a custom component on top of the out-of-the-box message types that Knock provides.
Setup the KnockProvider and KnockInAppMessagesChannelProvider
The KnockProvider is a React context provider that makes the Knock client SDK available to your application. The KnockInAppMessagesChannelProvider is a React context provider that makes the Knock in-app messages client in to your application.
Create a custom messaging component
Create a custom messaging component that uses the useInAppMessage or useInAppMessages hook to render one or more in-app messages.
Mount your component
Mount your component under the KnockInAppMessagesChannelProvider in your application tree. You can mount your component anywhere in the tree, but it must be a descendant of the KnockInAppMessagesChannelProvider.