# Preference Center

Implement Preference Center to let users control their subscription preferences.

<!-- PAGE: Get started with Preference Center on Capacitor, PATH: https://www.airship.com/docs/developer/sdk-integration/capacitor/preference-center/getting-started/ -->

# Get started with Preference Center on Capacitor

> Preference Center allows users to opt in and out of subscription lists configured via the Airship dashboard.
> **Important:** Airship Preference Centers are widgets that can be embedded in a page in an app or website. Please verify with your legal team that your full Preference Center page, including any web page for email Preference Centers, is compliant with local privacy regulations.

Preference Center provides a pre-built UI for users to manage their subscription preferences. Learn more in the [Preference Center user guide](https://www.airship.com/docs/guides/messaging/features/preference-centers/).

## Display a Preference Center

Display a Preference Center with a single method call:

```js
await Airship.preferenceCenter.display("preference-center-id")
```


To build a custom Preference Center UI, see [Embedding the Preference Center](https://www.airship.com/docs/developer/sdk-integration/capacitor/preference-center/embedding/).



<!-- /PAGE: Get started with Preference Center on Capacitor -->

<!-- PAGE: Embed the Preference Center, PATH: https://www.airship.com/docs/developer/sdk-integration/capacitor/preference-center/embedding/ -->

# Embed the Preference Center

> Create custom Preference Center UIs by fetching the config and building your own subscription management interface.
This guide covers creating custom Preference Center UIs for Capacitor applications. Unlike the default Preference Center, you'll build your own UI from scratch using the Preference Center configuration and subscription list APIs.

## Override Default Display Behavior

To use a custom Preference Center instead of the default UI, disable auto-launch for the specific Preference Center ID and handle display events:

```js
// Disable the OOTB UI for this Preference Center
await Airship.preferenceCenter.setAutoLaunchDefaultPreferenceCenter(
  "preference-center-id",
  false
);

// Add a listener to handle display events
Airship.preferenceCenter.onDisplay(event => {
  const preferenceCenterId = event.preferenceCenterId;
  // Navigate to your custom preference center UI
  navigateToCustomPreferenceCenter(preferenceCenterId);
});
```


## Fetching Preference Center Config

The Preference Center config contains all the information needed to build your UI, including subscription lists, sections, and display settings.

```js
const config = await Airship.preferenceCenter.getConfig("preference-center-id");
```


> **Note:** The config might not be available immediately on first app start. Implement exponential backoff if automatically retrying, or provide a UI for users to manually retry.


## Building Your Custom UI

You'll need to:

1. **Fetch the config** to get the list of subscription lists and their current state
2. **Build your UI** using the config data (sections, subscription lists, display settings)
3. **Update subscription lists** when users make changes using the [Subscription List APIs](https://www.airship.com/docs/developer/sdk-integration/capacitor/audience/subscription-lists/)

### Example Implementation

```js
async function loadPreferenceCenter(preferenceCenterId) {
  try {
    const config = await Airship.preferenceCenter.getConfig(preferenceCenterId);
    
    // Build your UI with the config
    const container = document.getElementById('preference-center');
    
    // Display title
    const title = document.createElement('h1');
    title.textContent = config.display.name;
    container.appendChild(title);
    
    // Display sections
    config.sections.forEach((section) => {
      const sectionDiv = document.createElement('div');
      
      const sectionTitle = document.createElement('h2');
      sectionTitle.textContent = section.display.name;
      sectionDiv.appendChild(sectionTitle);
      
      // Display items (subscription lists)
      section.items.forEach((item) => {
        const itemDiv = document.createElement('div');
        
        const label = document.createElement('label');
        label.textContent = item.display.name;
        
        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.checked = await isSubscribed(item.subscriptionId);
        checkbox.addEventListener('change', async (e) => {
          if (e.target.checked) {
            await Airship.contact.subscriptionLists.subscribe(item.subscriptionId);
          } else {
            await Airship.contact.subscriptionLists.unsubscribe(item.subscriptionId);
          }
        });
        
        itemDiv.appendChild(checkbox);
        itemDiv.appendChild(label);
        sectionDiv.appendChild(itemDiv);
      });
      
      container.appendChild(sectionDiv);
    });
  } catch (error) {
    console.error('Failed to load Preference Center:', error);
  }
}
```


> **Important:** Preference Center configuration is currently limited to subscription lists only. Use the [Subscription List APIs](https://www.airship.com/docs/developer/sdk-integration/capacitor/audience/subscription-lists/) to manage user subscriptions.




<!-- /PAGE: Embed the Preference Center -->