Building preference UIs in React

How to build a complete notification preference center, powered by Knock and React.

In this guide we'll look at building a simple preference center UI for our users in Knock using the preference APIs available in Knock to do so.

Quick links

Getting started

To use this example, you'll need an account on Knock and you'll need to have identified a user. You'll also need:

  • A public API key for the Knock environment (set as KNOCK_PUBLIC_API_KEY)

Installing dependencies

Modeling our preferences

In this example we'll use a PreferenceSet that contains multiple workflows, each with it's own channel type settings. We'll expose this to our users as a "cross-hatch" so that they can set a preference per workflow, for each channel type.

Creating our preference center

The next step here is to create our preference center. What we'll do here is:

  1. Read the set of preferences from Knock for the authenticated user and use that to drive the UI.
  2. Whenever a preference is changed, we'll update the preferences in Knock with the new value.

The nice thing about this approach is we don't need to store any notification preferences in our application, and we can use Knock as the source of truth for the notification preferences a user currently has set.

Wrapping up

The example above serves as a simple starting point for building in-app preference center UIs. You can also take a look at our example application for another, more complex preference center example.