Skip to main content

3 Ways to Use the Preference Selector Feature

Ask your users what do they want: The Preference Selector allows users to choose preferences from a predefined list, enabling you to deliver personalized experiences and content that align with the user’s choices. After asking your users what they prefer, you can present them with a tailored UI based on their choices. It can be a new navigation, different home screen and many more.

Why Personalization Matters

Personalization enhances the user experience, adds value, and drives engagement—leading to more loyal users and higher views. You can personalize content in two ways:

  • Implicitly: By tailoring experiences based on past behavior, location, or language without requiring user input.
  • Explicitly: By simply asking users what they prefer. The choice is yours: present content seamlessly based on location or language, or involve users directly to discover their preferences.

Our platform supports both approaches, including tools like the Preference Selector. In this article you can learn how to implement the Preference Selector in Four different ways out of many other possibilities.

News Apps​

User Flow​

A user enters the settings screen to personalize the home screen. After making selections, the home screen updates and displays with a new tab, ‘Your News’, in the navigation bar. This tab promotes a screen with relevant content based on the user's choices. (Mobile only)

Tools​

Preference Selector, Smart Component, Dynamic Tabs (Pipes 2 feed), Context Keys.

How to Implement​

1. Create a Screen with the Topics Selector Component.

  • Define a list of topics to present to the users (e.g., World News, Sports, Business).
  • Create a feed for the selector component using the "localStorageSet" action to save the user’s preferences on the device. Read the guidelines here.
  • Create a general screen with a List component.
  • Design the list's cell style using selected states to visually indicate the user’s choices.
  • Connect the feed you created in Step 2 to the component.

2. Create the "Your News" Screen.

  • Create a general screen.
  • Add a Smart Component to the screen. This enables you to display a custom UI that adjusts dynamically based on the user’s preferences. Example: For each selected topic, display a group consisting of a hero section and three items in a list. The number of groups displayed will depend on the user’s choices. Read how to do it here.

3. Create the Tabs Navigation.

  • Create a Pipes 2 feed for the tabs that returns content based on context keys. Read how to create the feed here.
  • Ensure that you have a default feed for users who haven’t selected topics.

4. Promote the Preference Selector Screen.

  • Create a Settings screen as a general screen.
  • Add a List Component that promotes the Preference Selector screen for easy access.

Sport Apps​

User Flow​

A user opens the app for the first time and selects their preferred sports. The home screen updates immediately, placing the selected sports at the top for easy navigation. (Mobile only)

Tools​

Preference Selector, Smart Component, First Time User Experience, Pipes 2 feed, Context Keys.

How to Implement:​

1. Create a Screen with the Sports Selector Component.

  • Define a list of sports to present to users (e.g., Basketball, Football, Tennis).
  • Create a feed for the selector component using the ‘localStorageSet’ action to save the user’s preferences on the device. Read the guidelines here.
  • Create a general screen with a Grid Component. Design the grid's cell style using selected states to visually indicate the user’s choices.
  • Connect the feed you created in Step 2 to the component.

2. Create the Home Screen.

  • Create a general screen.
  • Add a Smart Component to the screen. This enables you to present a custom UI that adapts to the content based on the user’s preferences. Read how to do it here.

3. Promote the Preference Screen via First Time User Experience (FTUE).

  • Create a First Time User Experience screen using this guide.
  • Add the Preference Screen to the FTUE flow to encourage users to personalize their app according to their preferences.

Media Apps​

User Flow​

A user opens the app and sees a promotion encouraging them to personalize the home screen based on preferences. After clicking the promotion, a login screen appears. Once logged in, the preference selector is displayed, allowing the user to choose relevant genres. After closing the selector, the home screen updates to show tailored content in the first rail. Later, when the user logs in on a TV device, they see the same personalized home screen.

Tools​

Preference Selector, Smart Component, Pipes 2 feed, Context Keys.

How to Implement​

1. Create a Screen with the Genres Selector Component.

  • Define a list of genres to present to users (e.g., Comedy, Thrillers, Horror).
  • Create a feed for the selector component using the ‘sendCloudEvent’ action to save user preferences to the cloud. Read the guidelines here.
  • Create a general screen with a Grid Component.
  • Design the grid's cell style using selected states to visually indicate the user’s choices.
  • Link the feed you created to the component.
  • Add a Login Screen as a hook before the Preference Selector screen.

2. Create the Home Screen.

  • Create a general screen.
  • Add a Smart Component to display personalized content based on user’s choices. Read how to do it here.

3. Promote the Preference Selector.

  • On the home screen, create a List Component that promotes the Preference Selector screen and encourages users to personalize their app based on their preferences.