Preference Center for the Apple SDK

Display Preference Centers using the Airship UI, which automatically handles user preferences and syncs with the Airship backend.

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.

The Preference Center allows users to opt in and out of subscription lists configured in the Airship Dashboard. The AirshipPreferenceCenter module provides a complete, ready-to-use UI that displays over your app.

For more information about configuring Preference Centers, see the Preference Center user guide.

Displaying a Preference Center

Display a Preference Center with a single method call. The Preference Center will appear in its own window over your app with the provided Airship UI.

Display Preference Center

Airship.preferenceCenter.display("my-first-pref-center")

[UAirship.preferenceCenter display:@"my-first-pref-center"];

This displays the Preference Center as an overlay window, allowing users to manage their subscription preferences. When the user closes the Preference Center, any changes are automatically synced with Airship.

Note

To embed the Preference Center directly in your app’s navigation instead of displaying it as an overlay, see Embedding the Preference Center. You can also intercept display requests to handle navigation to your embedded Preference Center.

Applying a Custom Theme

You can customize the appearance of the Preference Center by creating a PreferenceCenterTheme instance and setting its properties. The theme applies globally to all Preference Centers displayed in your app.

Setting the Theme Programmatically (Swift)

Setting a Preference Center Theme

// Customize your Theme
var theme = PreferenceCenterTheme()
theme.viewController = PreferenceCenterTheme.ViewController(
    navigationBar: PreferenceCenterTheme.NavigationBar(
        title: "My preference center",
        backgroundColor: .orange
    )
)

theme.preferenceCenter = PreferenceCenterTheme.PreferenceCenter(
    subtitleAppearance: PreferenceCenterTheme.TextAppearance(
        font: .subheadline,
        color: .yellow
    ),
    retryButtonBackgroundColor: .green,
    retryButtonLabelAppearance: PreferenceCenterTheme.TextAppearance(
        font: .title3,
        color: .black
    )
)
theme.contactSubscription = PreferenceCenterTheme.ContactSubscription(
    titleAppearance: PreferenceCenterTheme.TextAppearance(
        font: .title,
        color: .red
    ),
    subtitleAppearance: PreferenceCenterTheme.TextAppearance(
        font: .title2,
        color: .yellow
    )
)

theme.channelSubscription = PreferenceCenterTheme.ChannelSubscription(
    titleAppearance: PreferenceCenterTheme.TextAppearance(
        font: .title,
        color: .red
    ),
    subtitleAppearance: PreferenceCenterTheme.TextAppearance(
        font: .title2,
        color: .yellow
    )
)

// Set the Theme on the Preference Center
Airship.preferenceCenter.theme = theme

Setting the Theme in SwiftUI

In SwiftUI, you can apply a theme directly to the PreferenceCenterView:

Setting a Preference Center Theme in SwiftUI

PreferenceCenterView(
    preferenceCenterID: "preferenceCenter-ID"
)
.preferenceCenterTheme(theme)

Setting the Theme from a Plist

You can also customize the theme without writing code by creating a plist file. All keys in the plist correspond to properties on the PreferenceCenterTheme class.

Colors are represented by strings, either a valid color hexadecimal (e.g., #FF0000) or a named color. Named color strings must correspond to a named color defined in a color asset within the main bundle.

Note

If your app is written in Objective-C, you must use the plist file to customize your theme, as PreferenceCenterTheme is a Swift struct.

Save the plist as AirshipPreferenceCenterTheme.plist in your app bundle, then load it:

Set theme globally from plist

try Airship.preferenceCenter.setThemeFromPlist("AirshipPreferenceCenterTheme")

NSError *error = nil;
[UAirship.preferenceCenter setThemeFromPlist:@"AirshipPreferenceCenterTheme" error:&error];
if (error) {
    NSLog(@"Failed to set theme: %@", error);
}

Example Theme Plist

AirshipPreferenceCenterTheme.plist

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
    <dict>
        <key>viewController</key>
        <dict>
            <key>navigationBar</key>
            <dict>       
                <key>title</key>
                <string>Preference Center</string>
                <key>titleFont</key>
                <dict>
                    <key>fontName</key>
                    <string>Helvetica</string>
                    <key>fontSize</key>
                    <string>15</string>
                </dict>
                <key>titleColor</key>
                <string>#0000FF</string>
            </dict>
        </dict>
        <key>preferenceCenter</key>
        <dict>
            <key>subtitleAppearance</key>
            <dict>
            </dict>
        </dict>
        <key>commonSection</key>
        <dict>
            <key>titleAppearance</key>
            <dict>
                <key>color</key>
                <string>#de0000</string>
                <key>font</key>
                <dict>
                    <key>fontName</key>
                    <string>Helvetica</string>
                    <key>fontSize</key>
                    <string>32</string>
                </dict>
            </dict>
            <key>subtitleAppearance</key>
            <dict>
                <key>color</key>
                <string>#da833b</string>
                <key>font</key>
                <dict>
                    <key>fontName</key>
                    <string>Helvetica</string>
                    <key>fontSize</key>
                    <string>25</string>
                </dict>
            </dict>
        </dict>
        <key>labeledSectionBreak</key>
        <dict>
            <key>titleAppearance</key>
            <dict>
            </dict>
        </dict>
        <key>channelSubscription</key>
        <dict>
            <key>titleAppearance</key>
            <dict>
                <key>color</key>
                <string>#034710</string>
                <key>font</key>
                <dict>
                    <key>fontName</key>
                    <string>Helvetica</string>
                    <key>fontSize</key>
                    <string>20</string>
                </dict>
            </dict>
            <key>subtitleAppearance</key>
            <dict>
                <key>color</key>
                <string>#8fe388</string>
                <key>font</key>
                <dict>
                    <key>fontName</key>
                    <string>Helvetica</string>
                    <key>fontSize</key>
                    <string>15</string>
                </dict>
            </dict>
        </dict>
        <key>contactSubscription</key>
        <dict>
            <key>titleAppearance</key>
            <dict>
                <key>color</key>
                <string>#034710</string>
                <key>font</key>
                <dict>
                    <key>fontName</key>
                    <string>Helvetica</string>
                    <key>fontSize</key>
                    <string>20</string>
                </dict>
            </dict>
            <key>subtitleAppearance</key>
            <dict>
                <key>color</key>
                <string>#8fe388</string>
                <key>font</key>
                <dict>
                    <key>fontName</key>
                    <string>Helvetica</string>
                    <key>fontSize</key>
                    <string>15</string>
                </dict>
            </dict>
        </dict>
        <key>contactSubscriptionGroup</key>
        <dict>
            <key>titleAppearance</key>
            <dict>
                <key>color</key>
                <string>#034710</string>
                <key>font</key>
                <dict>
                    <key>fontName</key>
                    <string>Helvetica</string>
                    <key>fontSize</key>
                    <string>20</string>
                </dict>
            </dict>
            <key>subtitleAppearance</key>
            <dict>
                <key>color</key>
                <string>#8fe388</string>
                <key>font</key>
                <dict>
                    <key>fontName</key>
                    <string>Helvetica</string>
                    <key>fontSize</key>
                    <string>15</string>
                </dict>
            </dict>
            <key>chip</key>
            <dict>
                <key>checkColor</key>
                <string>#3bd2d6</string>
                <key>borderColor</key>
                <string>#0a0fc9</string>
                <key>labelAppearance</key>
                <dict>
                    <key>color</key>
                    <string>#7c6bea</string>
                    <key>font</key>
                    <dict>
                        <key>fontName</key>
                        <string>Helvetica</string>
                        <key>fontSize</key>
                        <string>15</string>
                    </dict>
                </dict>
            </dict>
        </dict>
        <key>alert</key>
        <dict>
            <key>titleAppearance</key>
            <dict>
                <key>color</key>
                <string>#0a0fc9</string>
                <key>font</key>
                <dict>
                    <key>fontName</key>
                    <string>Helvetica</string>
                    <key>fontSize</key>
                    <string>15</string>
                </dict>
            </dict>
            <key>subtitleAppearance</key>
            <dict>
                <key>color</key>
                <string>#d1b4d4</string>
            </dict>
            <key>buttonLabelAppearance</key>
            <dict>
                <key>color</key>
                <string>#78c8c0</string>
                <key>font</key>
                <dict>
                    <key>fontName</key>
                    <string>Helvetica</string>
                    <key>fontSize</key>
                    <string>25</string>
                </dict>
            </dict>
            <key>buttonBackgroundColor</key>
            <string>#da833b</string>
        </dict>
    </dict>
</plist>

Feedback

Was this page helpful?