In-App UI

React

UI components

Card

How to ship an inline card using our pre-built guides component.

Our @knocklabs/react library comes with a pre-built card component you can drop into your application.

The card component enables you to display contextual information, tips, or interactive content inline within your application's content flow, providing users with relevant guidance without disrupting their current task.

Getting started

#

To use the card component, you'll need:

An account on Knock
A guide channel set up in your Knock dashboard
A guide created using the "Card" message type

Installing dependencies

#

Basic usage

#

1

Setup the KnockGuideProvider

First, wrap your application with the KnockProvider and KnockGuideProvider. The KnockGuideProvider requires a channelId. You can find your guide channel ID on the integrations page in the dashboard under "Channels".

2

Add the Card component

Import Knock's pre-built Card component and place it inside the KnockGuideProvider wherever you want contextual guidance to appear. The <Card/> component is most effective when positioned inline within your content where it can provide relevant information at the right moment.

3

Mount the component

The Card component will mount automatically when a user becomes eligible for a guide created using the card message type.

Remember, for a user to be eligible, they must match the targeting rules of the guide, and they must be in a page in your application that matches the activation rules of the guide.

You can learn more about guide targeting and activation rules in the creating guides page.

Working with card variants

#

The pre-built card message type supports three variants for different use cases:

Default. A simple card with content and optional dismiss functionality.
Interactive. A card with action buttons for user interaction.
Compact. A smaller card variant for less prominent guidance.

Handling user engagement

#

The card component handles user engagement tracking automatically. Here's an overview of what user behavior maps to which engagement statuses tracked in Knock.

Seen. The card has been rendered to (seen by) the user.
Interacted. The user has interacted with (clicked) the card or its action buttons. Dismissing the card does not count as an interaction.
Archived. The card has been archived (dismissed) by the user.

Styling your card

#

Knock provides multiple levels of customization for the card component, from simple theming to complete custom implementations. Choose the approach that best fits your needs:

CSS variable theming

#

The easiest way to customize the card's appearance is by overriding CSS variables. Knock provides CSS variables prefixed with --knock-guide- that are specifically designed for theming all of Knock's pre-built guide components.

This approach enables you to quickly match your brand colors and basic styling without diving into complex CSS overrides. The --knock-guide-accent variable is particularly useful for theming buttons and interactive elements.

CSS class overrides

#

For more granular control, you can override the specific CSS classes used by the card component. All Knock guide components use classes that start with prefixes specific to the component type.

Individual subcomponents

#

For maximum flexibility while still leveraging Knock's functionality, you can use the individual subcomponents to compose your own card. This approach gives you full control over the layout and styling while maintaining the guide behavior:

This approach is ideal when you want to customize a piece of the pre-built component or change its structure.

Building your own component

#

For complete control over both functionality and appearance, you can build your own card component using the useGuide hook. This approach gives you the most flexibility but requires implementing all the card behavior yourself:

#