Preference Center

Implement a preference center on your website.

Web SDK Preference Center Example

A preference center consists of a few elements:

  • The PreferenceCenterManager, which provides an interface forfetching preference center definitions.
  • The PreferenceCenter which is a data structure that defines a preference center in a format that is convenient for rendering in your toolkit of choice.
  • The Channel, which can be opted in or out of subscription lists
  • The SubscriptionListManager, an interface for managing a channel’s subscription list membership.

When implementing a preference center, you will fetch the preference center’s definition, render it in your chosen toolkit, and listen for the end user’s interactions with the various subscription list items to manage the channel’s opting in or out of a list.

Preference centers are referred to by id, and you may have multiple preference centers within your app.

 Note

How you implement a preference center will depend heavily on your UI toolkit of choice; this example purposefully ignores those details.

Example preference center implementation
const sdk = await UA

const id = "my_preference_center" // refers to the ID you created in the Airship Dashboard
// retrieve the preference center by id
const preferenceCenterDefinition = await sdk.preferenceCenters.get(id)

// render your preference center component; here we assume some class
// `PreferenceUi` which takes a definition and returns an event
// emitter which emits membership changes based on end-user interactions, but
// this will be up to your implementation.
const preferenceUi = new PreferenceUi(preferenceCenterDefinition)

preferenceUi.addEventListener("list_change", async (e) => {
  const {
    operation, // assume string "subscribe" or "unsubscribe"
    listId, // the id of the list
  } = e.detail

  // now that you have received an event, use the Airship SDK to alter the
  // channels list membership
  const editor = await sdk.channel.subscriptions.edit()

  // subscribe or unsubscribe, depending on the operation
  if (operation === "subscribe") {
    editor.subscribe(listId)
  } else if (operation === "unsubscribe") {
    editor.unsubscribe(listId)
  }

  // apply the changes
  await editor.apply()
})