Introducing Guides 1.0

Today we're thrilled to release Knock Guides 1.0.

With Guides, you use your own components to power in-app messages that drive activation and upsells.

Legacy in-app messaging vendors use external JavaScript libraries that bloat performance and degrade your design. Our component-first infrastructure keeps your app fast and your messaging on-brand.

Customers like Webflow and Assembly are already using Guides to trigger announcements, nudges, paywalls, and more.

How Guides work

Guides are managed from the Knock dashboard. Once you hook a component into Knock, it's available for product managers and marketers to draft and preview content for that component, as well as target the audience for the guide and where it should render in your application.

You can also manage guide prioritization and throttling, to ensure users see the highest priority guides first and aren't flooded with messages when they log in to your product.

Knock Guides use the same powerful observability and analytics engine as the rest of Knock. Every guide records per-user events so you understand when users see, interact with, and archive your guides.

All of that data is available for debugging and analysis within the Knock dashboard, and will automatically flow through any extensions you’ve set up with Knock, such as our data warehouse or CDP syncs.

The benefits of our component-first approach

Legacy in-app messaging solutions like Intercom, Pendo, and AppCues inject JavaScript snippets into your app and render messaging on top of your product.

With Knock Guides, we use a component-first architecture to render in-app messages to your users. Our approach has three big advantages.

1. Composable primitives to build what you want. The guides toolkit includes tools at every layer of the stack—React components, React hooks, lower-level JavaScript APIs, socket infrastructure—so your engineers can build the in-product experience they want. You can invoke our useGuide hook to render a single guide in a component, or invoke our useGuides hook to show multiple guides within a single component (as Webflow did below).
2. No performance tax. We spoke to customers that were seeing 20-30% hits on their core web vitals when loading external JavaScript libraries from vendors like Pendo. With our approach, your in-app messaging code runs through the same build process as the rest of your app: no external scripts to load, no performance tax.
3. Actual inline components. Legacy in-app vendors advertise inline/embedded messages, but with a script-based architecture you experience content layout shift, UI jank, and CSS conflicts. With Knock Guides, you have complete control over your render lifecycle and can ship true embedded messaging.

We were using Intercom’s features to draw attention to new features, but it was expensive and too ‘in your face’ for our use case. We already used Knock for email, so we evaluated Guides vs. building in-house and went with guides so we can create React components and still let our non-technical team members add assets and push them live.

Francisco DelgadoFounder at Assembly

How Webflow uses Knock Guides in production

The team at Webflow faced a challenge when implementing in-app messaging experiences. Despite trying multiple in-app messaging tools, none provided the flexibility they needed.

We had a half-dozen different approaches to showing in-app notifications to users, and none of them quite matched what we needed to do. [Knock] Guides offered a good solution for what we needed.

Joe M.Staff Software Engineer at Webflow

Since Knock Guides offers flexible, code-based implementation, the team at Webflow was able to create a custom abstraction to collect custom analytics and map component variants to their Knock counterparts. The Webflow team now uses Knock Guides to power banners, modals, and cards to promote their annual conference and keep users informed of new feature releases.

Here's an example of their 'Since You've Been Gone' feature release modal. When a user has a single unread changelog item, the component renders in a single-card layout that emphasizes the content.

But when a user has multiple unread changelog items, the component renders a multi-card layout so you see everything that's shipped since you were last in the product.

To power this experience, they publish each changelog to their users as a Knock guide.

But compared to legacy in-app vendors whose developer experience consists of a <script> tag and a few CSS overrides, the code powering this experience isn't just additive. It feels like a natural continuation of Webflow's mature frontend codebase.

Using custom abstractions, they pass analytics and telemetry to rendered guides that get included on Knock message interaction events and synced to their data warehouse. These abstractions create a unified interface for internal developers, so they can more easily add messaging that feels native to their product.

export const SYBGModalSlot = createKnockGuideMulti({
  analytics: {
    surface: IPN_SURFACE.DASHBOARD,
    slot: IPN_SLOT.CENTER,
    position: "1/1",
    category: IPN_CATEGORY.MARKETING,
    feature: IPN_FEATURE.SYBG,
    ipn_type: IPN_TYPE.MODAL,
  },
  guideMessageType: GUIDE_MESSAGE_TYPE.SINCE_YOUVE_BEEN_GONE,
  components: {
    MultipleItems: SYBGMultiModalIpn,
    SingleItem: SYBGSingleModalIpn,
  },
});

Instead of being limited to a few default message types, Knock's React hooks allow their components to respond dynamically to a user's eligible messages.

In their component, they call the useGuides hook to fetch any changelog cards the user has missed since their last session and then use that count to determine which layout to render.

export function createKnockGuideMulti({
  analytics,
  guideMessageType,
  components,
}) {
  const { guides } = useGuides({ guideMessageType });
 
  if (!guides?.length) {
    return null;
  }
 
  // If single item
  if (guides.length === 1 && components.SingleItem) {
    const { SingleItem } = components;
    return (
      <KnockGuideMultiItemWrapper analytics={analytics}>
        <SingleItem guide={guides[0]} />
      </KnockGuideMultiItemWrapper>
    );
  }
 
  // If multiple items
  const { MultipleItems } = components;
  return (
    <KnockGuideMultiItemWrapper analytics={analytics}>
      <MultipleItems guides={guides} />
    </KnockGuideMultiItemWrapper>
  );
}

The depth of component customization and deep integration with their existing codebase aren't outcomes the Webflow team would be able to achieve with any in-app messaging vendor besides Knock.

Get started with Knock Guides

Guides are available for all Knock customers starting today. You can get started by reading our documentation.

Whether you just want to power in-app messaging or orchestrate all of your product messaging across email, push, SMS and chat, Knock can help. You can sign up for a free account or chat with our team.