Introducing Knock in-app messaging components
Today we're excited to announce the launch of a new set of in-app messaging components for our React SDK, making it possible to power a new set of in-app experiences with Knock.
Previously, our in-app SDK was limited to powering feed and inbox experiences, and used to integrate our SlackKit components into your application. Now with today's release, you can use our new <Modal />, <Banner />, and <Card /> components to build out a new set of in-app experiences for your users, all powered by Knock's real-time messaging infrastructure, and seamlessly integrated into our workflow builder.
Our in-app components enable your content editors to create and manage in-app messages directly within Knock's workflow builder as part of a cross-channel messaging strategy. Because in-app messages are just another channel in Knock, you can create them as part of a workflow powered by events, or even when your users enter an audience. That means you can build experiences like:
- Welcome messages: show a modal when a user signs up for your product.
- Overage banners: when a user exceeds some usage threshold on their account, show a banner to let them know.
- Upsell cards: show a persistent message within your product to upsell your users on additional features once they've onboarded.
Each of our out-of-the-box components are fully customizable, with the ability to override the CSS variables or classes associated with each component. Or you can even build your own components on top of our data layer via our hooks, making it easy to integrate Knock's messaging into your existing design system or component library.
Here's a quick look at rendering one of our components to show a banner at the top of your product:
import {
Banner,
KnockProvider,
KnockInAppMessagesChannelProvider,
} from "@knocklabs/react";
const MyApplication = () => {
const { user } = useCurrentUser();
return (
<MyLayout>
<KnockProvider apiKey={process.env.KNOCK_API_KEY} userId={user.id}>
<KnockInAppMessagesChannelProvider
channelId={process.env.KNOCK_IAM_CHANNEL_ID}
>
<Banner />
<MyHeader />
<MyFooter />
</KnockInAppMessagesChannelProvider>
</KnockProvider>
</MyLayout>
);
};
Our in-app components are currently in private beta. If you'd like to be added to the beta experience, please reach out to our support team. You can read more about the components in our documentation.
Fixes and improvements
- 👀 We made some visual updates to the look and feel of the workflow builder, including a new improved panels architecture.
- 🐛 We fixed an issue with saving step metadata in the workflow builder.
- 🐛 We fixed a bug with the branch step in the workflow builder that was hiding a maximum depth reached error.
- 🐛 We fixed an issue with some modals that meant they were overflowing unexpectedly.
- 🐛 We fixed an issue with viewing commits and committing workflow changes on the commits page.
- 🐛 We fixed a bug where computed delay windows were showing the incorrect value in workflow run logs.
