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 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
- Getting Started
- Customizable Properties
- Colors and Borders
- Customize CNIL to show as a Button
- Custom Fonts
- Sample JSON Structure
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
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": ""
}
}
}
}
}
Updated 9 months ago