Today we're thrilled to introduce guides. Guides enable you to power in-product messaging, everything from paywalls and badges, to one-time announcements and banners, using your own components.
Your engineering team gets complete control over in-product messages and how they're rendered in your product. Your product and marketing teams get the ability to draft, A/B test, and manage native in-product content.
We built guides because we believe in a future for the internet where software teams can ship in-app messaging that powers adoption, growth, and retention, without having to compromise on performance, web vitals, and content layout shift.
Building modern in-product messaging
When we set out to build guides, we started with these four principles:
- Native performance. Unlike legacy tools that inject JavaScript agents and slow down your app, guides integrate directly with React, Vue, or Angular components. No performance penalties. No UI jank. Complete design system compliance.
- Composable primitives for engineers. Modern in-product messaging needs a complete toolkit—components, hooks, lower-level APIs, socket infrastructure—that engineers can use to build any in-product experience they want.
- Self-service for PMs and marketers. Product and marketing teams need the ability to draft content, target recipients, and configure message activation in a completely self-service way, without needing to worry about introducing breaking changes in the frontend.
- Built-in analytics and observability. Every guide needs to automatically track delivery and engagement metrics and deliver that data to the tools where our customers need to review it.
At Webflow we're excited to use Knock guides to power our in-app lifecycle messaging. Engineering gets complete control over rendering and performance while our lifecycle marketing team gets self-service access to in-app messaging that feeds into our own frontend components. And all of it comes out-of-the-box with the observability and analytics we already get from Knock in our transactional messaging.
A reactive, real-time API for your components
Guides is powered by a new API that lives separately from Knock workflows and broadcasts.
Under the hood, it evaluates the session's current user and determines which guides they're eligible to see from the client-side of your application.
A powerful quality of guides is that they are reactive. You can pass any data from your application into a guide at runtime, and use that data in both your content and your targeting rules.
As an example, if we have an inline component in our project header that should only display when the current project's asset count is over 25, we can easily do that, just by passing currentProject.assetCount in as data to the guides API and configuring it as a targeting rule within Knock.
What is a guide
A guide represents a piece of UI that you want to be powered by Knock within your application.
You configure your guide in the Knock dashboard, including its content, its targeting rules (who can see it), and its activation rules (where in your product they can see it).
You then use our API and client SDKs to power the data of a guide within your application. Your engineering team owns the UI layer, and your content team owns the contents of the UI shown to users. Knock seamlessly powers this on your behalf, making it effortless to build powerful, managed UI components that anyone on your team can maintain.
How to create a guide in Knock
You create guides in the Knock dashboard.
Guides have content. Content maps to the components in your product using Knock message types. Because guides use Knock’s per-user, realtime infrastructure, you can personalize your content using any of the runtime scope available to Knock, such as recipient, tenant, and data properties.
Guides have targeting rules that determine which of your users are eligible to see the guide. You set targeting rules using Knock audiences, or by building conditions using recipient, tenant, and data properties.
Guides have activation rules that determine where in your product the guide will render (for example, where page path contains /billing). These are optional as in some cases you may render a guide manually using our hooks. (More below.)
As larger organizations start to introduce many guides, you can configure custom ordering to determine which guides render to users first, as well as limits to control how many guides your users see in a given time period.
We're excited about guides potential to help our small team better utilize resources and deliver greater value to our users. Like Knock notifications today, guides will empower not only engineers but also our product managers and designers to add functionality and improve user experience.
How to render a guide in your product
You render guides in your product using components. You can use our pre-built components or bring your own.
You hook your components into Knock’s guides API using our useGuide hook. You can use this hook in one of two ways:
- Pass it a
typewhen you want to get one or many guides of a given message type. Great for use cases such as sitewide components like banners and modals, as well as stationary components that can render a stack of messages, such as a product onboarding area. - Pass it a
keywhen you want to reference a specific guide you’ve created. This is great for use cases such as paywalls or UI that always lives in the exact same place, and does not change often.
If you’re not a React shop, you can build your own components and power useGuide hook behavior by working directly with our KnockGuideClient, the state management layer behind guides.
Guides handle engagement tracking for free
Guides uses the same engagement status tracking as the in-app feed messages you power with Knock. You can mark when a guide is seen, marked as read, interacted with, and archived.
All of that data is available for debugging and analysis within the Knock dashboard. You can also use our extensions to stream it into your data warehouse or CDP.
Getting started
Guides is available in beta starting today. To get started, check out our documentation or reach out to us at [email protected].