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
Modal

Modal

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

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

The modal component enables you to display important notifications, announcements, or interactive content in a focused overlay that appears above your application's main content.

ModalComponent

Getting started

#

To use the modal 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 Modal component

Import Knock's pre-built Modal component and place it under the KnockGuideProvider near the top of your application. The <Modal/> component is most effective when placed in the root layout of your application, this ensures that your modal is available to render on every page of your application.

3

Mount the component

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

#

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

  • Default. A dismissible modal with no action buttons.
  • Single action. A dismissible modal with a single action button.
  • Multi-action. A dismissible modal with two action buttons.

Handling user engagement

#

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

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

Styling your modal

#

CSS customization

#

You can style your modal using standard CSS. Here's a basic example:

Build your own modal component

#

You can build your own modal component using the useGuide hook.

#