# Cross Device Favorites

Users may mark their favorite shows / teams / categories / clips for quick access or compile their own watchlist for future viewing, and sync them across the devices they are logged into with their user account. 

:::info
This feature requires a supporting backend.
:::

## Prerequisites

1. A DSP that [implemented cross device favorites](../../integrations/cloud-events.md).

2. Plugins - Make sure the "Favorites Action" plugin is added to the relevant versions. On Roku, make sure the "Actions Buttons (Roku)" plugin is added to the relevant versions.

## Plugin Configuration 

Modify the favorites assets you want to use and build. You can use two flavors in case you use favorites in light background on cells or a dark background on images. 

![](favorites/assets.png)

:::note Important
On Web, favorites assets should be added to Theme plugin.
:::

Modify the favorites text in the Localization modal.

![](favorites/localization.png)

## Setup Your Remote Server Configuration

![](./cross-device-favs.png)

In the plugin configuration screen switch on the **Enable server sync**.

Fill out the rest of the fields according to the following instructions:

**Remote Favorites Feed** - The feed that returns the list of items the user favorited.

**Remote Event Feed** - The feed that will be used to report when an item is favorited or unfavorited. See guidelines on how to create the feed [here](https://docs.applicaster.com/integrations/cloud-events).

**User Identifier Storage Key** - The context key that holds the unique user identifier so the favorited item can be attached to the user identity in the server.

**User Token** - Legacy. This was formerly used but is now obsolete due to system updates and improvements.

**Remote URL** - Legacy.  This was formerly used but is now obsolete due to system updates and improvements.

## Passing Additional Metadata in Favorites Events

If you need to pass custom metadata (e.g. category, publisher, or content type) to your server when a user adds or removes a favorite, you can include this data in the entry feed under `extensions.local_storage_favourites_action`. 

This custom metadata will be merged into the `data` object of the reported Cloud Event. For detailed information and payload examples, see the [Cloud Events Integration Guide](../../integrations/cloud-events.md#add-to-favorites-comapplicasterfavoritesaddedv1).

## Adding the Favorites Action to the Cell 

### Mobile 

In the layout, add the favorites action to the cell. You can add it as a single action or in the actions menu modal. To do so, enable the action button and fill the identifier.

For a single action, fill the identifier: `local_storage_favourites_action`

For actions menu, fill the identifier: `open-modal-bottom-sheet-cell-action`

Read more on [Actions Menu](../building-blocks/actions-menu.md).
### TV and Web

In the layout, add an action button to the cell. 

Read more on [Buttons on TV and Web](https://docs.applicaster.com/using-zapp/buttons-on-TV/).

## Promote Your Favorites

You can create a screen with a component to promote the favorites items. 
To do so, create a component with the data source that includes the feed that returns the list of items the user favorited.

**For Web** - create a feed using the URL: `pipesv2://local_storage_favourites_action_web` and attach it to the relevant component.  

Add the [Empty State Alert](../building-blocks/empty-state-alert.md) with a call-for-action message to add favorites.