Overview

As most UI configurations are primarily made from the OneTrust tenant, this section is optional. If your app has a use case where it needs to make additional configurations (e.g. font family) otherwise not available to be configured in the tenant or if it needs to control the UI configurations locally, you can use this custom configuration functionality.

UI elements are configured through a plist supplied by OneTrust. See the Sample App for a demo.

Import the Custom UI Property List

1. Download the Sample App from your tenant. Steps here.
2. After unzipping the file:
   1. Access the OTPublishersHeadlessSDK-XCFramework
   2. Select your corresponding file (if tvOS, select OTPublishersHeadlessSDKtvOS. If iOS, select the other one)
   3. Select OTPublishersHeadlessSDK.xcframework > ios-arm64
   4. OTPublishersHeadlessSDK.framework > OTSDK-UIConfig-iOS.plist

tvOS will follow the same steps but with tvos file labels.

3. Copy the plist file into your app. Select 'Copy items if needed' to ensure the plist is added to the application folder hierarchy.
4. Edit the UI elements in the plist as necessary.

👍

Do not add any rows or change the keys itself in the plist. Only change the values of existing properties.

Styles set in the plist will be given priority over server values when rendering the UI if the custom config property is set.

Configure the SDK

1. As part of the UIConfigurator protocol, set shouldUseCustomUIConfig() to true.
2. As part of the UIConfigurator protocol, conform to customUIConfigFilePath().
   1. While conforming to this method, provide the path to the plist.

//iOS and tvOS

//Conform to this in order to customize the UI locally
OTPublishersHeadlessSDK.shared.uiConfigurator = self

extension AppDelegate: UIConfigurator {
    func shouldUseCustomUIConfig() -> Bool {
      return true
    }
    
    func customUIConfigFilePath() -> String? {
      //path to plist file
      let customPath = Bundle.main.path(forResource: "OTSDK-UIConfig-iOS", ofType: "plist")
      return customPath
    }
}

Customizing the UI

This section describes the UI elements that can be configured.

Table of contents:

1. Customizing the Navigation Bar
2. Customizing the Banner View
3. Customizing the Preference Center View
4. Customizing the Purpose Details View
5. Customizing the Vendor List View [for IAB TCF Customers]
6. Customizing the Vendor Details View [for IAB TCF Customers]
7. Customizing the SDK List View
8. Customize CNIL Button
9. Custom Fonts

Customizing Page Headers (Navigation Bar)

All page header related customizations are listed underpageHeader in the plist. This is a common theme that will be applied to all the SDK view navigation bars.

The following are the customizations available:

📘

Note

• When a custom fontName is provided, at least one of the fontSize or fontTextStyle should also be provided in order for it to reflect.
• In order for dynamic font sizes to be supported, the application will have to provide a valid value for fontTextStyle if customizing the fonts.

Customizing the Banner UI

All banner view related customizations are listed under bannerTheme in the plist.

The following are the customizations available for the Banner View:

Here's a list of possible UI styles to be changed under each applicable element above:

📘

Note

• When a custom fontName is provided, at least one of the fontSize or fontTextStyle should also be provided in order for it to reflect.
• In order for dynamic font sizes to be supported, the application will have to provide a valid value for fontTextStyle if customizing the fonts.

Customizing the Preference Center UI

All preference center view related customizations are listed under preferenceCenterTheme in the plist.

The following customizations are available for the Preference Center View:

Here's a list of possible UI styles to be changed under each applicable element above:

📘

Note

• When a custom fontName is provided, at least one of the fontSize or fontTextStyle should also be provided in order for it to reflect.
• In order for dynamic font sizes to be supported, the application will have to provide a valid value for fontTextStyle if customizing the fonts.

Customizing the Purposes Details UI

The consumer application has to edit the OTSDK-UIConfig.plist file in order to customize the UI. All the purpose details view related customization would be present under the purposeDetailsTheme dictionary in the plist.

The following color options are customizations available for the Purposes Details View:

• backgroundColor (String) - A hex string representing the background color of the purposes details view
  • (ex: #FFFFFF)
• lineBreakColor (String) - A hex string representing the separator lines color
  • (ex: #FFFFFF)
• toggleColor (String) - A hex string representing the switch color when toggled On
  • (ex: #FFFFFF)

The following UI Elements are the customizations available for the Purposes Details View:

Customizing the Vendor List UI

The consumer application has to edit the OTSDK-UIConfig.plist file in order to customize the UI. All the vendor list view related customization would be present under the vendorListTheme dictionary in the plist.

The following color options are customizations available for the Vendor List View:

• backgroundColor (String) - A hex string representing the background color of the vendor list
  • (ex: #FFFFFF)
• lineBreakColor (String) - A hex string representing the separator lines color
  • (ex: #FFFFFF)
• toggleColor (String) - A hex string representing the switch color when toggled ON
  • (ex: #FFFFFF)
• filterOnColor (String) - A hex string representing the filter icon color when filter is applied
  • (ex: #FFFFFF)
• filterOffColor (String) - A hex string representing the switch color when no filter is applied
  • (ex: #FFFFFF)
• filterSelectionColor (String) - A hex string representing the tint color of the check mark in the vendor filter list
  • (ex: #FFFFFF)

The following UI Elements are the customizations available for the Vendor List View:

Customizing the Vendor Details UI

The consumer application has to edit the OTSDK-UIConfig.plist file in order to customize the UI. All the vendor details view related customization would be present under the vendorDetailsTheme dictionary in the plist.

The following color options are customizations available for the Vendor Details View:

• backgroundColor (String) - A hex string representing the background color of the vendor details view
  • (ex: #FFFFFF)
• toggleColor (String) - A hex string representing the switch color when toggled ON
  • (ex: #FFFFFF)

The following UI Elements are the customizations available for the Vendor Details View:

Customizing the SDK List UI

The consumer application has to edit the OTSDK-UIConfig.plist file in order to customize the UI. All the SDK list view related customization would be present under the sdkListTheme dictionary in the plist.

The following color options are customizations available for the SDK List View:

• backgroundColor (String) - A hex string representing the background color of the SDK list
  • (ex: #FFFFFF)
• lineBreakColor (String) - A hex string representing the separator lines color
  • (ex: #FFFFFF)
• filterOnColor (String) - A hex string representing the filter icon color when filter is applied
  • (ex: #FFFFFF)
• filterOffColor (String) - A hex string representing the switch color when no filter is applied
  • (ex: #FFFFFF)

The following UI Elements are the customizations available for the SDK List View:

Customizing 'Display CNIL as Button'

With OneTrust 6.22.0, mobile app customers can now customize the Continue Without Accepting link as a button to promote a consistent experience when presented with a close option. For more information on the app-side configuration of mobile templates to display as text or link, see CNIL Mobile App Requirements on the myOneTrust Knowledge Base.

UIConfigurator - Return True

1. Open the AppDelegate.swift file.
2. Locate the shouldUseCustomUIConfig() -> Bool function.
3. Update the value as return true. It will be set to return false by default.

extension AppDelegate: UIConfigurator {

    func shouldUseCustomUIConfig() -> Bool {
        return true
    }

Customize closeButton

1. Open the OTSDK-UIConfig-iOS.plist file.
2. Locate Root > bannerTheme > buttons > closeButton.
3. The parameters for closeButton will be blank by default. Provide your customizations for the Continue Without Accepting button.

Custom Fonts

The Native SDK can support a Font Name override to support custom fonts.

1. Add custom fonts to Xcode: Apple documentation
2. Reference the fonts in the SDK plist. Ensure you specify a font size in the plist for the custom font to take effect.