> ## Documentation Index
> Fetch the complete documentation index at: https://developer.onetrust.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Customize User Interfaces

# Overview

> 📘 Note
>
> This section is **optional** as most UI configurations are primarily made through the OneTrust tenant. If your app has a use case where it needs make additional configurations (e.g. font family) otherwise not available in the tenant OR if it needs to control the UI configurations locally, you can use these custom configurations.

As of version 6.10.0, the Native SDK supports Custom UI Parameters, which are maintained in-application through an info.plist resource.

You can find the latest info.plist in the latest demo application downloaded from OneTrust tenant. Here's how to [Download latest demo app from OneTrust](https://developer.onetrust.com/onetrust/docs/download-the-sdk-ios-tvos-legacy).

This document covers:

* [Prerequisites for Customizing the UI ](https://developer.onetrust.com/onetrust/docs/customize-user-interfaces-ios-tvos-legacy#prerequisites-for-customizing-the-ui-in-native-sdk-views)
* [Approaches to modify the plist](https://developer.onetrust.com/onetrust/docs/customize-user-interfaces-ios-tvos-legacy#approaches-to-modifying-the-otsdk-uiconfigplist-file)
* [Customizing the Navigation Bar](https://developer.onetrust.com/onetrust/docs/customize-user-interfaces-ios-tvos-legacy#ui-customization-for-page-header-navigation-bar-in-all-sdk-views)
* [Customizing the Banner View ](https://developer.onetrust.com/onetrust/docs/customize-user-interfaces-ios-tvos-legacy#banner-view)
* [Customizing the Preference Center View](https://developer.onetrust.com/onetrust/docs/customize-user-interfaces-ios-tvos-legacy#preference-center-view)
* [Customizing the Purpose Details View](https://developer.onetrust.com/onetrust/docs/customize-user-interfaces-ios-tvos-legacy#purposes-details-view)
* [Customizing the Vendor List View \[for IAB TCF Customers\]](https://developer.onetrust.com/onetrust/docs/customize-user-interfaces-ios-tvos-legacy#vendor-list-view)
* [Customizing the Vendor Details View \[for IAB TCF Customers\]](https://developer.onetrust.com/onetrust/docs/customize-user-interfaces-ios-tvos-legacy#vendor-details-view)
* [Customizing the SDK List View](https://developer.onetrust.com/onetrust/docs/customize-user-interfaces-ios-tvos-legacy#sdk-list-view)
* [Customize CNIL Button ](https://developer.onetrust.com/onetrust/docs/customize-user-interfaces-ios-tvos-legacy#display-cnil-as-button)

## Prerequisites for customizing the UI in Native SDK views:

In order for the application to customize the UI (look and feel of SDK views),  the following would be required:

* OneTrust SDK on 6.10 or above.
* The consumer application will have to conform to the `uiConfigurator` delegate in `OTPublishersHeadlessSDK`.
* Upon conforming to `uiConfigurator`:
  * The application would have to return `true` for the method `shouldUseCustomUIConfig()`.
  * The application can also conform to the method `customUIConfigFilePath()` and provide a custom location of the `OTSDK-UIConfig.plist`.
    > Note: Make sure that the plist is **copied** from the OT SDK framework to keep the format of the plist the same as the framework.
* The application can override the values (empty by default) adjacent to the keys though.
* Recommended to **NOT** add any rows or change the keys in the plist.
* If the application is using this approach to customize the UI, the customized items in plist will be given priority (i.e., the customized items will override the server configured values for those items).

## Approaches to Modifying the OTSDK-UIConfig.plist file:

### Approach 1 (Recommended)

1. Set the return value as `true` for the `shouldUseCustomUIConfig()` method in `UIConfigurator` protocol (refer to Sample App provided by OneTrust for example).
2. Locate the *OTSDK-UIConfig.plist* file from the `OTPublishersHeadlessSDK.framework` or `OTPublishersHeadlessSDK.xcframework`.
   > Note:\
   > The `OTSDK-UIConfig.plist` will be present in the first level of `OTPublishersHeadlessSDK.framework`. The `OTSDK-UIConfig.plist` will be present in the each architecture folder under `OTPublishersHeadlessSDK.xcframework`. You can pick it from any of the folders.
3. Copy this *OTSDK-UIConfig.plist* to the application project (refer to Sample App provided by OneTrust for example).
   > Note: Make sure that when we drag and drop the plist from the framework to the application project, we select Copy items if needed. This will copy the plist to the application folder hierarchy.
4. Now conform to the `customUIConfigFilePath()` method which is part of the `UIConfigurator` protocol (`OTPublishersHeadlessSDK.shared.uiConfigurator`).
   > Notes: While conforming to this method, provide the path to the plist in the application bundle (refer to Sample App provided by OneTrust for example).
5. We can now edit this copied plist and the UI will automatically update.

```swift
func application(_ application: UIApplication,
                     didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        
        // Conform to this in order to customize the UI.
        OTPublishersHeadlessSDK.shared.uiConfigurator = self
}

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

<br />

### Approach 2

1. Set the return value as true for the `shouldUseCustomUICOnfig()` method in `UIConfigurator` protocol (refer to Sample App provided by OneTrust, for example).
2. Locate the *OTSDK-UIConfig.plist* file from the `OTPublishersHeadlessSDK.framework` or `OTPublishersHeadlessSDK.xcframework`.
   > Note: The *OTSDK-UIConfig.plist* will be present in the first level of `OTPublishersHeadlessSDK.framework`. The *OTSDK-UIConfig.plist* will be present in the each architecture folder under `OTPublishersHeadlessSDK.xcframework`.
3. Users can now edit the appropriate plist and the UI will automatically update.

## Important Notes

* Approach 1 will provide a centralized place for the plist even if the application wants to switch between `.framework` and `.xcframework`. This will avoid updating the plist file in multiple places (`.framework` as well as `.xcframework`).
* In the future,  whenever there are changes to the plist, it will be easier to figure out and resolve the changeset if Approach 1 chosen.
* By default all the values in the *OTSDK-UIConfig.plist* in the OT SDK framework will be empty.
* In order to customize an element, we will need to enter a valid value for the associated key we want to customize.
* 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 size to be supported, the application will have to provide a valid value for `fontTextStyle` if customizing the fonts.
* Button color for Mobile templates can updated in the SDK using UX Params. For more information, see [JSON Structure](#JSON-Structure).

The following are the different `fontTextStyle` options supported:

* `largeTitle`
* `title1`
* `title2`
* `title3`
* `headline`
* `subheadline`
* `body`
* `callout`
* `footnote`
* `caption1`
* `caption2`

## UI Customization for Page Header (Navigation Bar) in all SDK Views:

The consumer application has to edit the *OTSDK-UIConfig.plist* file located in the SDK bundle in order to customize the UI. All the page header related customization would be present under the `pageHeader` dictionary. This is a common theme that will be applied to all the OT SDK views' navigation bars.

The following are the customizations available:

* **backgroundColor  (String)** - A hex string representing the background color of the page header/navigation bar.
  * (ex: #FFFFFF)
* **tintColor  (String)** - A hex string representing the tint color of the page header/navigation bar.
  * (ex: #FFFFFF)
* **fontName (String)** - The name of the custom font.
  * (ex: HelveticaNeue).
* **fontSize (Int)** - The size of the font.
  * (ex: 17)
* **fontTextStyle (String)** - The preferred text style of the font.
  * (ex: Headline, callout, sub headline etc.)
* **textAlignment (String)** - The alignment of the text.
  * (Options - Center, Left, Right)
* **textColor (String)** - A hex string representing the color of the text.
  * (ex: #000000)

## Banner View

The consumer application has to edit the *OTSDK-UIConfig.plist* file in order to customize the UI. All the banner view related customization would be present under the `bannerTheme` dictionary.

The following color options are available for the Banner View:

* **backgroundColor  (String)** - A hex string representing the background color of the banner view
  * (ex: #FFFFFF)

The following are the customizations available for the Banner View:

[block:parameters]
{
  "data": {
    "h-0": "UI Element",
    "h-1": "Key Name",
    "h-2": "Applied To",
    "h-3": "Default Value",
    "0-0": "Summary",
    "0-1": "`title`<br></br>`description`",
    "0-2": "Banner Title; IAB Title<br></br>Banner Description; IAB Descriptions",
    "0-3": "fontName (String)<br></br>fontSize (Int)<br></br>fontTextStyle (String)<br></br>textAlignment (String)<br></br>textColor (String)",
    "1-0": "Buttons",
    "1-1": "`closeButtonColor`<br></br>`acceptAll`<br></br>`rejectAll`<br></br>`showPreferences`",
    "1-2": "Close button<br></br>Accept All button<br></br>Reject All button<br></br>Show Preferences button",
    "1-3": "backgroundColor (String)<br></br>fontName (String)<br></br>fontSize (Int)<br></br>fontTextStyle (String)<br></br>textColor (String)<br></br>borderColor (String)<br></br>borderRadius (Int)<br></br>borderWidth (Int)",
    "2-0": "Links",
    "2-1": "`policyLink`<br></br>`vendorList`",
    "2-2": "More Information link<br></br>Vendor List link",
    "2-3": "fontName (String)<br></br>fontSize (Int)<br></br>fontTextStyle (String)<br></br>textAlignment (String)<br></br>textColor (String)"
  },
  "cols": 4,
  "rows": 3,
  "align": [
    "left",
    "left",
    "left",
    "left"
  ]
}
[/block]

## Preference Center View

The consumer application has to edit the *OTSDK-UIConfig.plist* file in order to customize the UI. All the preference center related customization would be present under the `preferenceCenterTheme` dictionary in the plist.

The following color options are available for the Preference Center View:

* **backgroundColor  (String)** - A hex string representing the background color of the Preference Center.
  * (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 Preference Center View:

[block:parameters]
{
  "data": {
    "h-0": "UI Element",
    "h-1": "Key Name",
    "h-2": "Applied To",
    "h-3": "Default Value",
    "0-0": "Summary",
    "0-1": "`title`<br></br>`description`",
    "0-2": "Preference Center Title<br></br>Preference Center Description",
    "0-3": "fontName (String)<br></br>fontSize (Int)<br></br>fontTextStyle (String)<br></br>textAlignment (String)<br></br>textColor (String)",
    "1-0": "Purpose Title",
    "1-1": "`purposeTitle`",
    "1-2": "Purposes/Categories Titles",
    "1-3": "fontName (String)<br></br>fontSize (Int)<br></br>fontTextStyle (String)<br></br>textAlignment (String)<br></br>textColor (String)",
    "2-0": "Purposes Always Active Status",
    "2-1": "`purposesAlwaysActiveStatus`",
    "2-2": "Always Active Status text",
    "2-3": "fontName (String)<br></br>fontSize (Int)<br></br>fontTextStyle (String)<br></br>textAlignment (String)<br></br>textColor (String)",
    "3-0": "Buttons",
    "3-1": "`acceptAll`<br></br>`rejectAll`<br></br>`confirmMyChoice`",
    "3-2": "Accept All button<br></br>Reject All button<br></br>Show Preferences button",
    "3-3": "backgroundColor (String)<br></br>fontName (String)<br></br>fontSize (Int)<br></br>fontTextStyle (String)<br></br>textColor (String)<br></br>borderColor (String)<br></br>borderRadius (Int)<br></br>borderWidth (Int)",
    "4-0": "Links",
    "4-1": "`policyLink`<br></br>`vendorList`",
    "4-2": "More Information link<br></br>Vendor List link",
    "4-3": "fontName (String)<br></br>fontSize (Int)<br></br>fontTextStyle (String)<br></br>textAlignment (String)<br></br>textColor (String)",
    "5-0": "Show Logo on PC",
    "5-1": "`showLogoOnPC`",
    "5-2": "PC",
    "5-3": "false"
  },
  "cols": 4,
  "rows": 6,
  "align": [
    "left",
    "left",
    "left",
    "left"
  ]
}
[/block]

## Purposes Details View

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:

[block:parameters]
{
  "data": {
    "h-0": "UI Element",
    "h-1": "Key Name",
    "h-2": "Applied To",
    "h-3": "Default Value",
    "0-0": "Group Summary",
    "0-1": "`title`<br></br>`description`",
    "0-2": "Purpose Details Title<br></br>Purpose Details Description",
    "0-3": "fontName (String)<br></br>fontSize (Int)<br></br>fontTextStyle (String)<br></br>textAlignment (String)<br></br>textColor (String)",
    "1-0": "Consent Title",
    "1-1": "`consentTitle`",
    "1-2": "Consent Title",
    "1-3": "fontName (String)<br></br>fontSize (Int)<br></br>fontTextStyle (String)<br></br>textAlignment (String)<br></br>textColor (String)",
    "2-0": "Legitimate Interest",
    "2-1": "`legitInterestTitle`",
    "2-2": "Legit Interest Title",
    "2-3": "fontName (String)<br></br>fontSize (Int)<br></br>fontTextStyle (String)<br></br>textAlignment (String)<br></br>textColor (String)",
    "3-0": "Purposes Always Active Status",
    "3-1": "`alwaysActiveStatus`",
    "3-2": "Always Active Status text",
    "3-3": "fontName (String)<br></br>fontSize (Int)<br></br>fontTextStyle (String)<br></br>textAlignment (String)<br></br>textColor (String)",
    "4-0": "Links",
    "4-1": "`sdkList`<br></br>`vendorList`<br></br>`fullLegalText`",
    "4-2": "SDK Lists link<br></br>Vendor Lists link<br></br>Full Legal Text link",
    "4-3": "fontName (String)<br></br>fontSize (Int)<br></br>fontTextStyle (String)<br></br>textAlignment (String)<br></br>textColor (String)"
  },
  "cols": 4,
  "rows": 5,
  "align": [
    "left",
    "left",
    "left",
    "left"
  ]
}
[/block]

## Vendor List View

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:

[block:parameters]
{
  "data": {
    "h-0": "UI Element",
    "h-1": "Key Name",
    "h-2": "Applied To",
    "h-3": "Default Value",
    "0-0": "Vendor List Navigation",
    "0-1": "`filterNavText`",
    "0-2": "Vendor Filter Navigation Bar text(s)",
    "0-3": "fontName (String)<br></br>fontSize (Int)<br></br>fontTextStyle (String)<br></br>textAlignment (String)<br></br>textColor (String)",
    "1-0": "Vendor Item",
    "1-1": "`title`",
    "1-2": "Vendor Item",
    "1-3": "fontName (String)<br></br>fontSize (Int)<br></br>fontTextStyle (String)<br></br>textAlignment (String)<br></br>textColor (String)",
    "2-0": "Filter Item",
    "2-1": "`filterItemTitle`",
    "2-2": "Filter Item",
    "2-3": "fontName (String)<br></br>fontSize (Int)<br></br>fontTextStyle (String)<br></br>textAlignment (String)<br></br>textColor (String)",
    "3-0": "Buttons",
    "3-1": "`confirmMyChoices`<br></br>`applyFilter`",
    "3-2": "Confirm My Choices button<br></br>Apply Filter button",
    "3-3": "backgroundColor (String)<br></br>fontName (String)<br></br>fontSize (Int)<br></br>fontTextStyle (String)<br></br>textColor (String)<br></br>borderColor (String)<br></br>borderRadius (Int)<br></br>borderWidth (Int)",
    "4-0": "Search Bar",
    "4-1": "`searchBar`",
    "4-2": "Vendor List Search Bar",
    "4-3": "textColor(String)<br></br>placeholderTextColor(String)<br></br>backgroundColor(String)<br></br>iconColor(String)<br></br>borderColor(String)<br></br>borderWidth(Int)<br></br>borderRadius(Int)"
  },
  "cols": 4,
  "rows": 5,
  "align": [
    "left",
    "left",
    "left",
    "left"
  ]
}
[/block]

## Vendor Details View

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:

[block:parameters]
{
  "data": {
    "h-0": "UI Element",
    "h-1": "Key Name",
    "h-2": "Applied To",
    "h-3": "Default Value",
    "0-0": "Title",
    "0-1": "`title`",
    "0-2": "Vendor Details Title",
    "0-3": "fontName (String)<br></br>fontSize (Int)<br></br>fontTextStyle (String)<br></br>textAlignment (String)<br></br>textColor (String)",
    "1-0": "Details Summary",
    "1-1": "`title`<br></br>description",
    "1-2": "Vendor Details Description Title<br></br>Vendor Details Description",
    "1-3": "fontName (String)<br></br>fontSize (Int)<br></br>fontTextStyle (String)<br></br>textAlignment (String)<br></br>textColor (String)",
    "2-0": "Consent Title",
    "2-1": "`consentTitle`",
    "2-2": "Consent Title",
    "2-3": "fontName (String)<br></br>fontSize (Int)<br></br>fontTextStyle (String)<br></br>textAlignment (String)<br></br>textColor (String)",
    "3-0": "Legitimate Interest",
    "3-1": "`legitInterestTitle`",
    "3-2": "Legit Interest Title",
    "3-3": "fontName (String)<br></br>fontSize (Int)<br></br>fontTextStyle (String)<br></br>textAlignment (String)<br></br>textColor (String)",
    "4-0": "Links",
    "4-1": "`privacyNotice`",
    "4-2": "Privacy Notice link",
    "4-3": "fontName (String)<br></br>fontSize (Int)<br></br>fontTextStyle (String)<br></br>textAlignment (String)<br></br>textColor (String)"
  },
  "cols": 4,
  "rows": 5,
  "align": [
    "left",
    "left",
    "left",
    "left"
  ]
}
[/block]

## SDK List View

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:

[block:parameters]
{
  "data": {
    "h-0": "UI Element",
    "h-1": "Key Name",
    "h-2": "Applied To",
    "h-3": "Default Value",
    "0-0": "Summary",
    "0-1": "`title`<br></br>`description`",
    "0-2": "SDK Item Title<br></br>SDK Item Description",
    "0-3": "fontName (String)<br></br>fontSize (Int)<br></br>fontTextStyle (String)<br></br>textAlignment (String)<br></br>textColor (String)",
    "1-0": "Check Mark Filter Selection",
    "1-1": "`filterSeletionColor`",
    "1-2": "Check Mark tint color",
    "1-3": "selectionColor (String)",
    "2-0": "SDK Filter List Navigation Bar",
    "2-1": "`filterNavText`",
    "2-2": "SDK Filter List Navigation Bar text(s)",
    "2-3": "fontName (String)<br></br>fontSize (Int)<br></br>fontTextStyle (String)<br></br>textAlignment (String)<br></br>textColor (String)",
    "3-0": "SDK Filter Item",
    "3-1": "`sdkItem`",
    "3-2": "Filter Item",
    "3-3": "fontName (String)<br></br>fontSize (Int)<br></br>fontTextStyle (String)<br></br>textAlignment (String)<br></br>textColor (String)",
    "4-0": "Buttons",
    "4-1": "`applyFilter`",
    "4-2": "Apply Filter button",
    "4-3": "backgroundColor (String)<br></br>fontName (String)<br></br>fontSize (Int)<br></br>fontTextStyle (String)<br></br>textColor (String)<br></br>borderColor (String)<br></br>borderRadius (Int)<br></br>borderWidth (Int)",
    "5-0": "Search Bar",
    "5-1": "`searchBar`",
    "5-2": "SDK List Search Bar",
    "5-3": "textColor(String)<br></br>placeholderTextColor(String)<br></br>backgroundColor(String)<br></br>iconColor(String)<br></br>borderColor(String)<br></br>borderWidth(Int)<br></br>borderRadius(Int)"
  },
  "cols": 4,
  "rows": 6,
  "align": [
    "left",
    "left",
    "left",
    "left"
  ]
}
[/block]

## 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](https://my.onetrust.com/s/article/UUID-2d89a44d-8f8e-0b4f-0fbc-4a0890d6cf71) 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.

| Key Name        | Type   |
| --------------- | ------ |
| backgroundColor | String |
| fontName        | String |
| fontSize        | Number |
| fontTextStyle   | String |
| textColor       | String |
| borderColor     | String |
| borderWidth     | Number |
| borderRadius    | Number |

## Using Custom Fonts

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

1. Add custom fonts to Xcode: [Apple documentation](https://developer.apple.com/documentation/uikit/text_display_and_fonts/adding_a_custom_font_to_your_app)
2. Reference the fonts in the SDK plist. Ensure you specify a font size in the plist for the custom font to take effect.