Customize the theme & UI

Our mobile SDKs allow changing the theme color that is used for borders and buttons. We do not allow changing fonts or other colors and we try to match the native platform UIs.

Further customization of the consent notice can be done by displaying your own custom consent notice instead of the standard SDK notice.

Color

You can modify the theme color in your didomi_config.json file:

{
"theme": {
"color": "#000000"
}
}

The theme color is used for borders of notices and popups and for highlighted buttons.

The linkColor attribute controls the color of all the links in the banner/popup.

{
"theme": {
"linkColor": "#000000"
}
}

Buttons

We use two different types of buttons:

  • Regular buttons (regularButtons): our basic button used throughout the consent workflow (Learn More, Disagree, etc.). Those buttons are grey by default.

  • Highlighted buttons (highlightButtons): used when we want to emphasize an action. Those buttons use the theme color by default.

{
"theme": {
"buttons": {
"regularButtons": { // Learn more/disagree/disagree to all buttons.
"backgroundColor": "#eeeeee",
"textColor": "#999999",
"borderColor": "#222222",
"borderWidth": "1",
"borderRadius": "3"
},
"highlightButtons": { // Agree/save/agree to all buttons.
"backgroundColor": "#c2272d",
"textColor": "#ffffff",
"borderColor": "#c2272d",
"borderWidth": "1",
"borderRadius": "3"
}
}
}
}

Custom notice

You can use your own custom notice to replace the standard Didomi SDK notices (banner or popup). Follow these three steps to do so.

Disable the standard notice

Disable the standard notice in your didomi_config.json file by setting the notice.enable property to false:

{
"app": {
...
},
"notice": {
"enable": false
}
}

When the notice is disabled, the SDK will never display its own standard notice so you must implement your own instead or no consent will be collected.

Build your own custom notice

Build your own custom notice (a fragment on Android) with your design and content. A notice usually contains a disclaimer (what personal data you are collecting and for what usage) and the following action buttons:

  • Learn more: opens the Preferences popup (call the showPreferences() function of the SDK)

  • Agree & Close: stores the user consent to all vendors and purposes and closes the notice (call the setUserAgreeToAll() and hideNotice() functions of the SDK)

  • Disagree & Close (optional): stores the fact that the user has denied consent to all vendors and purposes and closes the notice (call the setUserDisagreeToAll() and hideNotice() functions of the SDK)

Keep in mind that for closing your own notice, you still need to call the hideNotice method from our SDK.

Examples:

Java
Swift
Objective-C
Java
/**
* Called when the "Learn more" button is clicked
*/
private void learnMoreClickListener() {
Didomi.getInstance().showPreferences();
}
/**
* Called when the "Agree & Close" button is clicked
*/
private void agreeAndCloseClickListener() {
Didomi.getInstance().setUserAgreeToAll();
Didomi.getInstance().hideNotice();
}
/**
* Called when the "Disagree & Close" button is clicked
*/
private void disagreeAndCloseClickListener() {
Didomi.getInstance().setUserDisagreeToAll();
Didomi.getInstance().hideNotice();
}
Swift
/**
* Called when the "Learn more" button is clicked
*/
func learnMoreClickListener() {
Didomi.shared.showPreferences()
}
/**
* Called when the "Agree & Close" button is clicked
*/
func agreeAndCloseClickListener() {
Didomi.shared.setUserAgreeToAll()
Didomi.shared.hideNotice()
}
/**
* Called when the "Disagree & Close" button is clicked
*/
func disagreeAndCloseClickListener() {
Didomi.shared.setUserDisagreeToAll()
Didomi.shared.hideNotice()
}
Objective-C
/**
* Called when the "Learn more" button is clicked
*/
- (void)learnMoreClickListener {
Didomi *didomi = [Didomi shared];
[didomi showPreferences];
}
/**
* Called when the "Agree & Close" button is clicked
*/
- (void)agreeAndCloseClickListener {
Didomi *didomi = [Didomi shared];
[didomi setUserAgreeToAll];
[didomi hideNotice];
}
/**
* Called when the "Disagree & Close" button is clicked
*/
- (void)disagreeAndCloseClickListener {
Didomi *didomi = [Didomi shared];
[didomi setUserDisagreeToAll];
[didomi hideNotice];
}

Show your custom notice

You need to show your custom notice when needed. You have two options to do so.

Option 1 - Show notice event

The first option is to show your notice when the show notice event is triggered by the SDK. In that case, the SDK is fully responsible for the consent logic and you simply need to handle showing/hiding your notice and its own logic:

Java
Swift
Java
import io.didomi.sdk.events.EventListener;
import io.didomi.sdk.events.HideNoticeEvent;
import io.didomi.sdk.events.ShowNoticeEvent;
Didomi.getInstance().addEventListener(new EventListener() {
@Override
public void showNotice(ShowNoticeEvent event) {
// Show your notice
}
@Override
public void hideNotice(HideNoticeEvent event) {
// Hide your notice
}
});
Swift
let didomiEventListener = EventListener()
didomiEventListener.onHideNotice = { event in
// Hide your consent notice
}
didomiEventListener.onShowNotice = { event in
// Show your consent notice
}
Didomi.shared.addEventListener(listener: didomiEventListener)

Option 2 - Check if the notice needs to be displayed

The second option is to check if the notice needs to be displayed because we do not have all the consent information that we require. Use the isUserConsentStatusPartial (Android reference and iOS reference) method for that. You can check and display the notice any time you want AFTER the SDK has been initialized (use the onReady function for that). This is more flexible but requires you to do a little bit more synchronization between the SDK and you code:

Java
Swift
Java
Didomi.getInstance().onReady(() -> {
if (Didomi.getInstance().isUserConsentStatusPartial()) {
// Display your notice
}
});
Swift
Didomi.shared.onReady{
if (Didomi.shared.isUserConsentStatusPartial()) {
// Display your notice
}
}

Translatable texts for custom notices

If you want to add translatable texts to your own custom notice you can specify the texts property in your didomi_config.json file:

didomi_config.json
{
"app": {
...
},
...
"texts": {
"custom_notice.content.title": {
"en": "Custom title in English",
"fr": "Titre personnalisée en Français"
}
}
}

Note that you should provide translations for all the languages that your app supports. We provide translations for all our standard messages.