Docs
/
Contact supportLog inGet started
Platform
Integrations
Building in-app UI
API reference
CLI reference
Management API
Developer tools
Tutorials
In-App UI
React
UI components
Banner

Banner

How to ship an in-app notification banner using our pre-built guides component.

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

The banner component enables you to display important notifications, alerts, or announcements in a prominent position at the top of your application's content area, ensuring users see critical information without interrupting their workflow.

BannerComponent

Getting started

#

To use the banner component, you'll need:

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 Banner component

Import Knock's pre-built Banner component and place it inside the KnockGuideProvider at the top of your page or layout. The <Banner/> component is most effective when positioned prominently at the top of the content area where users will naturally notice it.

3

Mount the component

The Banner component will mount automatically when a user becomes eligible for a guide created using the banner 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 banner variants

#

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

  • Default. A banner with just text content.
  • Single action. A banner with a single action button.
  • Multi action. A banner with multiple action buttons.
BannerVariants

Handling user engagement

#

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

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

Styling your banner

#

Knock provides multiple levels of customization for the banner 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 banner'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 banner 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 banner. 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 banner component using the useGuide hook. This approach gives you the most flexibility but requires implementing all the banner behavior yourself:

#