Building preference UIs in 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:
- Read the set of preferences from Knock for the authenticated user and use that to drive the UI.
- 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.