Building in-app UI with Knock
In addition to delivering to out-of-app channels such as email, push, SMS, and chat apps like Slack, you can also use Knock to build great in-app notifications experiences too.
You can power any kind of in-app message with Knock, whether it’s transactional messages such as in-app feeds, notification centers, or toasts, or promotional messages such as banners, modals, or tags.
Knock enables you to deliver these in-app messages to your users in your own native product UI, while the content of those messages is drafted from the Knock dashboard. Knock also provides an orchestration layer to determine who receives those messages, how often they receive them, and where in your native product UI those messages are rendered.
Knock differs from other customer messaging platforms by separating the content and presentation of in-app messages, all while providing the orchestration engine and infrastructure to deliver them.
How Knock powers in-app messages
In-app messages in Knock are generated when a workflow runs for a recipient. Those in-app messages are available via our client API, which your application uses to fetch messages and update their state (seen, read, interacted with, archived).
In-app messages encode content, which is created using the Knock template editor as part of creating a workflow. You can read more on working with in-app message templates below.
The Knock in-app API also provides filtering capabilities to only return messages with a particular status (unread, read, seen etc) or custom property (sent as the data payload in the workflow trigger). You can also sort responses from the Knock in-app API by priority, for cases where you only want to display one in-app message to a user at a time. This makes it possible to build highly customized in-app experiences within your product
Clients connect to the in-app real-time service, which receives notifications over a websocket when new messages are sent to an in-app channel. This is a managed service provided by Knock.
Why build in-app experiences on Knock?
- Real-time ready. Our in-app API comes ready with websocket support, no infrastructure setup required.
- No data modeling required. We handle all of the common cases for you: accurate badge counts, polymorphic notifications, read, seen and archive tracking, and much more.
- Build holistic experiences. Use the Knock workflow builder to create cross-channel notification experiences to power cases like "send to the in-app feed, if they don't see the feed message within 5 minutes then fallback to sending an email."
- Complete APIs that are easy to use. We take all of the heavy lifting out of building APIs to support common in-app notification experiences, like preferences and feeds.
- Drop-in components. We have components ready to help you get started with building in-app notification experiences in React.
- Fully customizable. Whether you want to build a feed, toasts, a full-page inbox experience, or notifications that match your style guide, it's easy to customize the experience by overriding styles, or components, or building your own headless UI using our lower-level primitives.
Client SDKs available
We have the following SDKs available to use to build in-app notification experiences:
- React (Web)
- JS (Non-React Web)
- React Native
- Swift (iOS / macOS)
- Kotlin (Android)
- Flutter (Android/iOS)
Under each client SDK, you'll find guides and references to help you get started.
Pre-built UI components
Our client SDKs for React, React Native, iOS, and Android ship with pre-built components to power real-time, in-app notification feeds within your application.
Additionally, our React SDK for the web also ships with prebuilt components to:
- Render
<Banner />,<Card />, and<Modal />messaging components. - Easily integrate Slack authentication and channel selection to power Slack notifications.
Using Knock in a headless way
In addition to the pre-built components that we ship, it's also possible to use Knock in a headless way by using our lower-level primitives. Doing so means you get to leverage the full power of Knock's in-app messaging infrastructure while having the flexibility to build your own UI components.
Going to production
You'll need to follow our checklist on going to production for any in-app notifications using Knock. Most importantly you'll need to secure your requests to the Knock API for each user.