1. Home
  2. /Developer
  3. /SDK Integrations
  4. /Capacitor
  5. /Preference Center
  6. /Embed the Preference Center

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:

// 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.

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

Example Implementation

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 to manage user subscriptions.