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 a JSON resource.

You can find the latest JSON in the latest demo application downloaded from OneTrust tenant. Here's how to Download latest demo app from OneTrust.

This document covers:

Configuration Steps

The application has to pass a valid JSON object in the following formats with any customized values desired.
The OneTrust SDK will read these values and render the UI for each screen accordingly.
If a value is specified in the JSON, it will override the value sent from the server (for any values that can be set in the OneTrust Tenant or via a JSON parameter.)

Review the JSON Schema at the bottom of this article for a JSON template.

Getting Started

Use the OTUXParamsBuilder to create an instance of OTUXParams. This will be passed into the OTSdkParams object that is then included in the startSDK call.

//Create OTUXParams object
OTUXParams otuxParams = OTUXParams.OTUXParamsBuilder.newInstance()
	.setUXParams(new JSONObject(<uxparamString>))
	.build();

//Add to OTSdkParams object
OTSdkParams sdkParams = OTSdkParams.SdkParamsBuilder.newInstance()
                        ...
                        .setOTUXParams(otuxParams)
                        .build();

//Pass sdkParams into the startSDK call
OTPublishersHeadlessSDK otPublishersHeadlessSDK = new OTPublishersHeadlessSDK(this);
otPublishersHeadlessSDK.startSDK(<CDN location>, <domainId>, <languageCode>, sdkParams, otCallback);

If the values of the OTUXParams object change, re-initialize with the new values to observe the changes. If the application wants to reset the parameters, simply call otuxParamsBuilder.setUXParams(new JSONObject());

Customizable Properties

Text & Fonts

Key	Description	Accepted Values
typeFaceKey	The key value for a custom font (see Using Custom Fonts below)	Any string specified (see Using Custom Fonts Below)
fontName	Specifies the built-in Android font to use for the associated element	casual cursive monospace sans-serif sans-serif-condensed sans-serif smallcaps serif serif-monospace sans-serif-thin sans-serif-black sans-serif-condensed-light sans-serif-condensed-medium sans-serif-light sans-serif-medium
fontSize	Scaled pixel (SP) value that determines the font size	Integers
fontTextStyle	Specifies the style of the associated element's text	0 = Normal 1 = Bold 2 = Italic 3 = Bold/Italic
textAlignment	Specifies the alignment of the associated element's text.	4 = Center 5= Left 6 = Right
shouldShowlinkUnderline	Global Theme - Specifies whether or not tappable links should be underlined	Boolean

Colors and Borders

Text and Background Colors

All colors are represented with standard 6-digit hex codes (eg. #RRGGBB). The # symbol is required.

Key	Description	Accepted Values
backgroundColor	Specifies the desired background color of the associated element	Standard Hex Values
textColor	Specifies the desired text color of the associated element	Standard Hex Values
placeholderTextColor	Specifies the desired text color of the placeholder text in the search bar	Standard Hex Values
linkColor	Global Theme - Specifies the desired link color globally	Standard Hex Values

Toggle Colors

Key	Description	Accepted Values
toggleThumbColorOn	Specifies the desired color of the toggle thumb when in the on position	Standard Hex Values
toggleThumbColorOff	Specifies the desired color of the toggle thumb when in the off position	Standard Hex Values
toggleTrackColor	Specifies the desired color of the toggle track	Standard Hex values

Other Colors

Key	Description	Accepted Values
backButtonColor	Specifies the desired color of the back button.	Standard Hex values
lineBreakColor	Specifies the desired color of the line breaks	Standard Hex values
clearButtonColor	Specifies the desired color of the clear button in the search bar	Standard Hex values
filterOnColor	Specifies the desired color of the filter icon when a filter is active	Standard Hex values
filterOffColor	Specifies the desired color of the filter icon when a filter is inactive	Standard Hex values
iconColor	Specifies the desired color of the filter icon	Standard Hex values

Borders

The standard width of a border is 0. Therefore, if a color or radius is specified, a border width should be added as well.

Key	Description	Accepted Values
borderColor	The color of the border of the associated element	Standard Hex values
borderWidth	The width of the border of the associated element	Integers
borderRadius	The radius of the border corners	Integers

Additional Configurations

Key	Description	Accepted Values
showLogoOnPC	Specifies whether or not the logo should be shown on the Preference Center. Will use the same logo as the banner. The default is false.	Boolean

Display CNIL as Button

With OneTrust 6.22.0, mobile app customers can now customize the Continue Without Accepting link as 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, please CNIL Mobile App Requirements on myOneTrust.

1. Initialize SDK

Navigate to RenderNativeUIActivity.java
Locate //TO initialize/override OT SDK with UI params.initOTSDKUI();
Uncomment by removing the //
The SDK will now overrive the OT SDK with the UI params when it initializes.

2. Testing the API Version

Customers only need to set the API version for testing purposes.

Navigate to SettingsActivity.java
Locate the Initializer for OT SDK params.
Drop a new line after .setProfileSyncParams(otProfileSyncParams)
Enter .setAPIversion(), then include the specific release version or latest.

OTSdkParams.SdkParamsBuilder sdkParamsBuilder = OTSdkParams.SdkParamsBuilder.newInstance()
	.setOTCountryCode(countryCode.getText().toString().trim()))
	.setOTRegionCode(regionCode.getText().toString().trim()))
	.setProfileSyncParams(otProfileSyncParams)
	.setAPIVersion("latest")

3. Customize `closeButton`

Open the OTPublishersNativeApp folder.
Navigate to OTPublishersNativeModule > src > main > assets > ot_ui_params.json
Locate bannerTheme > buttons > closeButton
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. To implement:

Add your custom .ttf font to the Font Resource folder (/res/font)
Register the font in a configuration
Include the configuration when loading a OneTrust interface
Include the typeface key in the typeFaceKey parameters in the JSON

public OTConfiguration getOTConfiguration(@NonNull Context context) {
	Typeface otGenericTypeFace = ResourcesCompat.getFont(context, R.font.aguafina_script);
	OTConfiguration.OTConfigurationBuilder otConfigurationBuilder = OTConfiguration.OTConfigurationBuilder.newInstance();

if (otGenericTypeFace != null) {
otConfigurationBuilder = otConfigurationBuilder.addOTTypeFace(“ot-font”, otGenericTypeFace);
} //in this case ot-font is our typeFaceKey that will be included in the JSON
return otConfigurationBuilder.build();
}

Add the typeface key to your JSON:

...
	typeFaceKey:"ot-font",
...

When loading the Preference Center, Banner, or calling SetupUI, include the configuration:

OTConfiguration config = getOTConfiguration(getContext());
new OTPublishersHeadlessSDK(this).showPreferenceCenterUI(RenderNativeUIActivity.this, config);

JSON Structure

{
  "UIConfig": {
    "globalTheme": {
      "shouldShowlinkUnderline": true,
      "linkColor": ""
    },
    "pageHeader": {
      "fontName": "",
      "fontSize": "",
      "fontTextStyle": 0,
      "textColor": ""
    },
    "bannerTheme": {
      "backgroundColor": "",
      "summary": {
        "title": {
          "typeFaceKey": "",
          "fontName": "",
          "fontSize": "",
          "fontTextStyle": 0,
          "textAlignment": 4,
          "textColor": ""
        },
        "description": {
          "typeFaceKey": "",
          "fontName": "",
          "fontSize": "",
          "fontTextStyle": 0,
          "textAlignment": 4,
          "textColor": ""
        }
      },
      "buttons": {
        "closeButtonColor": "",
        "closeButton": {
          "backgroundColor": "",
          "fontName": "",
          "fontSize": "",
          "fontTextStyle": 0,
          "textColor": "",
          "borderColor": "",
          "borderWidth": "",
          "borderRadius": ""
        },
        "acceptAll": {
          "backgroundColor": "",
          "fontName": "",
          "fontSize": "",
          "fontTextStyle": 0,
          "textColor": "",
          "borderColor": "",
          "borderWidth": "",
          "borderRadius": ""
        },
        "rejectAll": {
          "backgroundColor": "",
          "typeFaceKey": "",
          "fontName": "",
          "fontSize": "",
          "fontTextStyle": 0,
          "textColor": "",
          "borderColor": "",
          "borderWidth": "",
          "borderRadius": ""
        },
        "showPreferences": {
          "backgroundColor": "",
          "fontName": "",
          "fontSize": "",
          "fontTextStyle": 0,
          "textColor": "",
          "borderColor": "",
          "borderWidth": "",
          "borderRadius": ""
        }
      },
      "links": {
        "policyLink": {
          "typeFaceKey": "",
          "fontName": "",
          "fontSize": "",
          "fontTextStyle": 0,
          "textColor": ""
        },
        "vendorList": {
          "typeFaceKey": "",
          "fontName": "",
          "fontSize": "",
          "fontTextStyle": 0,
          "textAlignment": 4,
          "textColor": ""
        }
      }
    },
    "preferenceCenterTheme": {
      "backgroundColor": "",
      "lineBreakColor": "",
      "toggleThumbColorOn": "",
      "toggleThumbColorOff": "",
      "toggleTrackColor": "",
      "rightChevronColor": "",
      "showLogoOnPC": true,
      "summary": {
        "title": {
          "typeFaceKey": "",
          "fontName": "",
          "fontSize": "",
          "fontTextStyle": 0,
          "textColor": ""
        },
        "description": {
          "typeFaceKey": "",
          "fontName": "",
          "fontSize": "",
          "fontTextStyle": 0,
          "textAlignment": 5,
          "textColor": ""
        }
      },
      "purposesTitle": {
        "typeFaceKey": "",
        "fontName": "",
        "fontSize": "",
        "fontTextStyle": 0,
        "textColor": ""
      },
      "purposesAlwaysActiveStatus": {
        "typeFaceKey": "",
        "fontName": "",
        "fontSize": "",
        "fontTextStyle": 0,
        "textColor": ""
      },
      "buttons": {
        "closeButtonColor": "",
        "closeButton": {
          "backgroundColor": "",
          "fontName": "",
          "fontSize": "",
          "fontTextStyle": 0,
          "textColor": "",
          "borderColor": "",
          "borderWidth": "",
          "borderRadius": ""
        },
        "backButtonColor": "",
        "acceptAll": {
          "backgroundColor": "",
          "typeFaceKey": "",
          "fontName": "",
          "fontSize": "",
          "fontTextStyle": 0,
          "textColor": "",
          "borderColor": "",
          "borderWidth": "",
          "borderRadius": ""
        },
        "rejectAll": {
          "backgroundColor": "",
          "typeFaceKey": "",
          "fontName": "",
          "fontSize": "",
          "fontTextStyle": 0,
          "textColor": "",
          "borderColor": "",
          "borderWidth": "",
          "borderRadius": ""
        },
        "confirmMyChoice": {
          "backgroundColor": "",
          "typeFaceKey": "",
          "fontName": "",
          "fontSize": "",
          "fontTextStyle": 0,
          "textColor": "",
          "borderColor": "",
          "borderWidth": "",
          "borderRadius": ""
        }
      },
      "links": {
        "policyLink": {
          "typeFaceKey": "",
          "fontName": "",
          "fontSize": "",
          "fontTextStyle": 0,
          "textColor": ""
        },
        "vendorList": {
          "typeFaceKey": "",
          "fontName": "",
          "fontSize": "",
          "fontTextStyle": 0,
          "textColor": ""
        }
      }
    },
    "purposeDetailsTheme": {
      "backgroundColor": "",
      "lineBreakColor": "",
      "toggleThumbColorOn": "",
      "toggleThumbColorOff": "",
      "toggleTrackColor": "",
      "backButtonColor": "",
      "groupSummary": {
        "title": {
          "typeFaceKey": "",
          "fontName": "",
          "fontSize": "",
          "fontTextStyle": 0,
          "textColor": ""
        },
        "description": {
          "typeFaceKey": "",
          "fontName": "",
          "fontSize": "",
          "fontTextStyle": 0,
          "textColor": "",
          "textAlignment": 5
        }
      },
      "consentTitle": {
        "typeFaceKey": "",
        "fontName": "",
        "fontSize": "",
        "fontTextStyle": 0,
        "textColor": ""
      },
      "legitInterestTitle": {
        "typeFaceKey": "",
        "fontName": "",
        "fontSize": "",
        "fontTextStyle": 0,
        "textColor": ""
      },
      "purposesAlwaysActiveStatus": {
        "typeFaceKey": "",
        "fontName": "",
        "fontSize": "",
        "fontTextStyle": 0,
        "textColor": ""
      },
      "links": {
        "sdkList": {
          "typeFaceKey": "",
          "fontName": "",
          "fontSize": "",
          "fontTextStyle": 0,
          "textColor": ""
        },
        "vendorList": {
          "typeFaceKey": "",
          "fontName": "",
          "fontSize": "",
          "fontTextStyle": 0,
          "textColor": ""
        },
        "fullLegalText": {
          "typeFaceKey": "",
          "fontName": "",
          "fontSize": "",
          "fontTextStyle": 0,
          "textColor": ""
        }
      }
    },
    "vendorListTheme": {
      "backgroundColor": "",
      "lineBreakColor": "",
      "toggleThumbColorOn": "",
      "toggleThumbColorOff": "",
      "toggleTrackColor": "",
      "filterOnColor": "",
      "filterOffColor": "",
      "filterSelectionColor": "",
      "rightChevronColor": "",
      "searchBar": {
        "textColor": "",
        "placeholderTextColor": "",
        "backgroundColor": "",
        "iconColor": "",
        "borderColor": "",
        "clearButtonColor": "",
        "borderWidth": "",
        "borderRadius": ""
      },
      "filterNavText": {
        "typeFaceKey": "",
        "fontName": "",
        "fontSize": "",
        "fontTextStyle": 0,
        "textColor": ""
      },
      "title": {
        "typeFaceKey": "",
        "fontName": "",
        "fontSize": "",
        "fontTextStyle": 0,
        "textColor": ""
      },
      "allowAllToggleText": {
        "typeFaceKey": "",
        "fontName": "",
        "fontSize": "",
        "fontTextStyle": 0,
        "textColor": ""
      },
      "filterItemTitle": {
        "typeFaceKey": "",
        "fontName": "",
        "fontSize": "",
        "fontTextStyle": 0,
        "textColor": ""
      },
      "buttons": {
        "backButtonColor": "",
        "confirmMyChoices": {
          "backgroundColor": "",
          "typeFaceKey": "",
          "fontName": "",
          "fontSize": "",
          "fontTextStyle": 0,
          "textColor": "",
          "borderColor": "",
          "borderWidth": "",
          "borderRadius": ""
        },
        "applyFilter": {
          "backgroundColor": "",
          "typeFaceKey": "",
          "fontName": "",
          "fontSize": "",
          "fontTextStyle": 0,
          "textColor": "",
          "borderColor": "",
          "borderWidth": "",
          "borderRadius": ""
        }
      }
    },
    "vendorDetailsTheme": {
      "backgroundColor": "",
      "toggleThumbColorOn": "",
      "toggleThumbColorOff": "",
      "toggleTrackColor": "",
      "backButtonColor": "",
      "title": {
        "typeFaceKey": "",
        "fontName": "",
        "fontSize": "",
        "fontTextStyle": 0,
        "textColor": ""
      },
      "detailsSummary": {
        "title": {
          "typeFaceKey": "",
          "fontName": "",
          "fontSize": "",
          "fontTextStyle": 0,
          "textColor": ""
        },
        "description": {
          "typeFaceKey": "",
          "fontName": "",
          "fontSize": "",
          "fontTextStyle": 0,
          "textColor": ""
        }
      },
      "consentTitle": {
        "typeFaceKey": "",
        "fontName": "",
        "fontSize": "",
        "fontTextStyle": 0,
        "textColor": ""
      },
      "legitInterestTitle": {
        "typeFaceKey": "",
        "fontName": "",
        "fontSize": "",
        "fontTextStyle": 0,
        "textColor": ""
      },
      "links": {
        "privacyNotice": {
          "typeFaceKey": "",
          "fontName": "",
          "fontSize": "",
          "fontTextStyle": 0,
          "textColor": ""
        }
      }
    },
    "sdkListTheme": {
      "backgroundColor": "",
      "lineBreakColor": "",
      "filterOnColor": "",
      "filterOffColor": "",
      "searchBar": {
        "textColor": "",
        "placeholderTextColor": "",
        "backgroundColor": "",
        "iconColor": "",
        "borderColor": "",
        "clearButtonColor": "",
        "borderWidth": "",
        "borderRadius": ""
      },
      "summary": {
        "title": {
          "typeFaceKey": "",
          "fontName": "",
          "fontSize": "",
          "fontTextStyle": 0,
          "textColor": ""
        },
        "description": {
          "typeFaceKey": "",
          "fontName": "",
          "fontSize": "",
          "fontTextStyle": 0,
          "textColor": ""
        }
      },
      "filterList": {
        "selectionColor": "",
        "navItem": {
          "typeFaceKey": "",
          "fontName": "",
          "fontSize": "",
          "fontTextStyle": 0,
          "textColor": ""
        },
        "sdkItem": {
          "typeFaceKey": "",
          "fontName": "",
          "fontSize": "",
          "fontTextStyle": 0,
          "textColor": ""
        },
        "buttons": {
          "backButtonColor": "",
          "applyFilter": {
            "backgroundColor": "",
            "typeFaceKey": "",
            "fontName": "",
            "fontSize": "",
            "fontTextStyle": 0,
            "textColor": "",
            "borderColor": "",
            "borderWidth": "",
            "borderRadius": ""
          }
        }
      }
    },
    "permissionConsentTheme": {
      "backgroundColor": "",
      "consentSummaryTheme": {
        "title": {
          "typeFaceKey": "",
          "fontName": "",
          "fontSize": "",
          "fontTextStyle": 0,
          "textAlignment": 0,
          "textColor": ""
        },
        "description": {
          "typeFaceKey": "",
          "fontName": "",
          "fontSize": "",
          "fontTextStyle": 0,
          "textAlignment": 0,
          "textColor": ""
        }
      },
      "buttons": {
        "giveConsent": {
          "backgroundColor": "",
          "typeFaceKey": "",
          "fontName": "",
          "fontSize": "",
          "fontTextStyle": 0,
          "textColor": "",
          "borderColor": "",
          "borderWidth": "",
          "borderRadius": ""
        },
        "cancelConsent": {
          "backgroundColor": "",
          "typeFaceKey": "",
          "fontName": "",
          "fontSize": "",
          "fontTextStyle": 0,
          "textColor": "",
          "borderColor": "",
          "borderWidth": "",
          "borderRadius": ""
        }
      }
    }
  }
}

OneTrust Internal Users: DO NOT MAKE ANY DIRECT CHANGES!

Customize User Interfaces

Overview

📘
Note

Configuration Steps

Getting Started

Customizable Properties

Text & Fonts

Colors and Borders

Text and Background Colors

Toggle Colors

Other Colors

Borders

Additional Configurations

Display CNIL as Button

1. Initialize SDK

2. Testing the API Version

3. Customize `closeButton`

Using Custom Fonts

JSON Structure

OneTrust Internal Users: DO NOT MAKE ANY DIRECT CHANGES!

Overview

📘Note

Configuration Steps

Getting Started

Customizable Properties

Text & Fonts

Colors and Borders

Text and Background Colors

Toggle Colors

Other Colors

Borders

Additional Configurations

Display CNIL as Button

1. Initialize SDK

2. Testing the API Version

3. Customize closeButton

Using Custom Fonts

JSON Structure

📘
Note

3. Customize `closeButton`