Didomi - Developers documentation
  • Introduction
  • SDKs
    • Introduction
    • Web SDK
      • Getting started
      • Tags and vendors management
        • Tags management
          • Events & Variables
            • Deprecated
            • Custom events
          • Tag managers
            • Adobe Launch/DTM
            • Eulerian
            • Google Tag Manager
              • Configure the Didomi / GTM integration
              • Didomi's GTM template
            • Tealium
            • Other tag managers
        • Custom Didomi <script> tags
        • Third-party integrations
          • Google Ad Manager / AdSense
            • GDPR via Non-Personalized Ads
              • Share consent and load/refresh ads
              • Share consent without loading or refreshing ads
            • US states laws
          • Google Consent Mode V2
          • Kameleoon
          • Piano Analytics (AT Internet)
          • Prebid
            • GDPR via IAB TCF
            • US states laws
          • Salesforce DMP (Krux)
        • IAB frameworks
        • Programmatic API
      • Configuration
        • Bots (SEO & Performance tools)
        • Configuration by URL
        • Cookies and storage
        • Custom domains for events
        • Notice
          • Behavior
          • Interactions
          • Look and feel
        • Preferences
        • Theme
      • AB tests
      • Custom domain
        • Domain delegation
        • Reverse proxy
      • Share consents between domains
      • Share consents across devices
      • Pass user choices in query string
      • Serve Didomi assets from your domain
      • Reference
        • API
          • Deprecated
        • Events
      • Performance
      • Versions
    • Mobile and TV SDKs
      • Android and Android TV
        • Setup
        • Logging
        • Reference
          • API
            • Deprecated
          • Events
        • Versions
      • iOS and tvOS
        • Setup
        • Logging
        • App Tracking Transparency (iOS 14.5+)
        • Reference
          • API
            • Deprecated
          • Events
        • Versions
      • Unity
        • Setup
        • Reference
        • Versions
        • Troubleshooting
      • React Native
        • Setup
        • Reference
          • Deprecated
        • Versions
      • Flutter
        • Setup
        • Reference
        • Versions
      • Consent notice
        • Getting started
        • Customize the notice
        • Customize the preferences popup
        • Customize the theme & UI
        • Load notice by ID
      • Third-party SDKs
      • Share consents across devices
      • Share consent with WebViews
      • Google Consent Mode v2
      • FAQ
    • AMP SDK
      • Blocking Behaviors
        • Load immediately on page load
        • Load only after consent (positive or negative)
        • Load only after positive consent
      • Consent status for vendors
    • Help & Support
  • API
    • Introduction
      • Authentication
      • Errors
      • Pagination
      • Filters
      • Caching
      • Rate limiting
      • Quotas
      • Translations
    • Data Manager
      • Regulations
      • Configuration Tree
      • Purposes
        • Purposes & Vendors Numerical IDs
      • Preferences Library
      • User Rights
    • Widgets
      • Consent notices
        • Notices
        • Configurations
        • Multi-Regulation Configurations
          • Migration of Existing Notices and API Updates
        • Deployments
        • Tutorials
          • Create and publish a consent notice
          • Create and publish a multi-regulation consent notice
      • Privacy widgets
        • Create a widget
        • Retrieve widgets
        • Edit a widget
          • Content & Design
            • Themes & Shapes
            • Components
              • auth
              • dsar_form
              • footer
              • header
              • preference
              • preference_value
              • save
              • section
              • sections
            • Options
          • Purposes & preferences
          • Settings
        • Deploy a Widget
          • Use your own subdomain
          • Use your own domain
          • Implement an embeddable widget on your website
        • Authentication
          • Manage authentication providers
          • Authenticate your end-user
        • Archive a widget
        • Headless widgets
          • Public Methods
          • Custom elements
          • Custom events
          • Event listeners
        • Tutorial
          • Launch a Preference Center from a mobile app
    • Compliance Reports
      • Properties
      • Reports
      • CSV format reference
      • Websites
    • Consents and Preferences
      • Events
        • Generate IAB TCF consent string
      • Links
      • Proofs
      • Tokens
      • Secrets
      • Users
      • Tutorial
        • Collect and operate data
    • Privacy Requests
      • Requests
      • Notes
      • Links
      • Emails
  • Integrations
    • Introduction
      • Quotas
    • Generic integrations
      • Batch export
        • Destinations
          • AWS S3 Bucket (owned by Didomi)
          • GCP Storage Bucket
        • Exported data
          • Notices consents
        • Logs
      • Webhooks
      • Batch import
      • Analytics export
        • Destinations
          • AWS S3 Bucket (owned by Didomi)
          • GCP Storage Bucket
    • Third-party apps
      • CMP integrations
        • Didomi-mParticle integration for your CMP
        • Deploy Didomi’s SDK for your Adobe Commerce website
      • Preference Management Platform integrations
        • Actito
        • Adobe Campaign Classic
        • Adobe Experience Cloud
        • Adobe Marketo Engage
        • Adobe Source Connector
        • Braze
        • Dotdigital
        • Hubspot
        • Mailchimp
        • Microsoft Dynamics 365
        • Salesforce Marketing Cloud
        • Salesforce Sales & Service Cloud
        • Selligent
        • Brevo (ex Sendinblue)
    • Tutorials
      • Configure a HTTP webhook
      • Configure a batch export
      • Configure an analytics export
    • Emailing
      • Configurations
        • Actito Email
        • Actito SMS
        • Adobe Campaign Classic
        • Adobe Campaign Standard
      • Emails
        • Templates
        • Manage your templates
Powered by GitBook
On this page
  • Colors
  • Buttons
  • Notice text
  • Preferences text
  • Custom Font Family
  • Add a font for Android
  • Add a font for iOS
  • Custom json from the console
  • Fullscreen mode
  • Sticky Buttons
  • Custom notice
  1. SDKs
  2. Mobile and TV SDKs
  3. Consent notice

Customize the theme & UI

Our mobile SDKs allow changing the theme color that is used for borders and buttons, the links color and the background color. 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.

The Android TV / tvOS themes are not customizable at the moment. TV devices will ignore these parameters.

Colors

You can modify the theme colors in your didomi_config.json file.

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

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

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

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

The theme backgroundColor attribute controls the color of all the screens from the SDK.

{
  "theme": {
    "backgroundColor": "#000000"
  }
}

The text and some graphical elements colors will be computed from the background color in order to ensure sufficient color contrast. The default background color is white (#FFFFFF).

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.

Only integer values are currently supported for the width and radius.

Older Android SDK versions had an issue where border and corner radius sizes were used as raw pixels instead of density-independent pixels (dp). In order to stay backward-compatible with existing configurations, the fix is under a feature flag: set sizesInDp to true to use it.

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

Notice text

You can customize the text colors, sizes and alignments for the notice title and description.

The default text alignment is start. The default text color is computed from the background color (black or white). The default text size for Notice's title is 24px. The default text size for Notice's description is 16px.

You can customize the notice globally, apply the same changes to the notice title and description:

"theme": {
    "notice": {
        "alignment": "justify", // start|end|center|justify
        "textColor": "#0000cc", // hexadecimal color
        "textSize": 16, // Size in px
    }
}

You can customize the notice title and description independently, apply the different changes to the notice title and description:

"theme": {
    "notice": {
        "descriptionAlignment": "justify", // start|end|center|justify
        "descriptionTextColor": "#0000cc", // hexadecimal color
        "descriptionTextSize": 16, // Size in px
        
        "titleAlignment": "center", // start|end|center|justify
        "titleTextColor": "#ff0000", // hexadecimal color
        "titleTextSize": 24 // Size in pt (iOS) or sp (Android)
    }
}

You can mix global and specific parameters. Per example, the specific parameter descriptionAlignment will override the global parameter alignment.

Preferences text

You can customize the text colors, text sizes and alignments for the preferences title and description.

The customization of the preferences' title applies only to the vendor sub-title (Select partners in english).

The customization of the preferences's description applies to the purposes and vendors descriptions.

The default text alignment is start. The default text color is computed from the background color (black or white). The default text size for Preferences' title is 18px. The default text size for Preferences' description is 16px.

You can customize the notice globally, apply the same changes to the notice title and description:

"theme": {
    "preferences": {
        "alignment": "justify", // start|end|center|justify
        "textColor": "#0000cc", // hexadecimal color
        "textSize": 16, // Size in px
    }
}

You can customize the notice title and description independently, apply the different changes to the preferences title and description:

"theme": {
    "preferences": {
        "descriptionAlignment": "justify", // start|end|center|justify
        "descriptionTextColor": "#0000cc", // hexadecimal color
        "descriptionTextSize": 16, // Size in px
        
        "titleAlignment": "center", // start|end|center|justify
        "titleTextColor": "#ff0000", // hexadecimal color
        "titleTextSize": 18 // Size in pt (iOS) or sp (Android)
    }
}

Custom Font Family

We provide the capacity to customize the font family for the notice and the preferences titles and descriptions. In order to do so, you will need to add the font to your application then provide its name with a custom json parameter

Add a font for Android

Note that Android does provide some fonts depending on the API version. In order to make the font available to all supported API versions, you must add the font manually. Android will need only the "regular" font file to handle the font weight and / or style (<b>, <i>).

Android resources files must not contains any uppercase characters or spaces, on order to manage custom fonts for Android and iOS from a single configuration file, you need to follow this name convention for the resource file: replace space chars by underscore chars and put the file name in lower case.

Examples: Font family name: Trebuchet MS -> Resource file name: trebuchet_ms Font family name: Arial -> Resource file name: arial

Add a font for iOS

Note that iOS is already providing many fonts ready to use from your application. If you want to use a system provided font, you can skip this part. iOS will need one font file for each variant (regular bold, bold+italic, italic). The variants are only required if you need to add html tags to change the font weight and / or style (<b>, <i>).

Since iOS is using the font family name, the font file name doesn't matter.

Custom json from the console

You need to set the font family name for the title and/or description for the notice screen and the preferences screens.

You can apply a font family to all UI buttons (title, descriptions and buttons) displayed in the notice and preferences using theme.notice.fontFamily and theme.preferences.fontFamily:

"theme": {
        ...
        "notice": {
            ...
            "fontFamily": "Trebuchet MS" // Custom font family for notice title, descriptions and buttons
        },
        "preferences": {
            ...
            "fontFamily": "Trebuchet MS" // Custom font family for preferences title, descriptions and buttons
        }
    }

You can use the titleFontFamily and descriptionFontFamily properties to set a font family for the notice and preferences as shown below. These changes will have no effect on buttons:

"theme": {
        ...
        "notice": {
            ...
            "descriptionFontFamily": "Trebuchet MS", // Custom font family for notice description
            ...
            "titleFontFamily": "Trebuchet MS" // Custom font family for notice title
        },
        "preferences": {
            ...
            "descriptionFontFamily": "Trebuchet MS", // Custom font family for preferences descriptions
            ...
            "titleFontFamily": "Trebuchet MS" // Custom font family for preferences title
        }
    }

You can mix global and specific parameters. Per example, the specific parameter descriptionFontFamily will override the global parameter fontFamily.

You can mix global and specific parameters. Per example, the specific parameter descriptionAlignment will override the global parameter alignment.

Fullscreen mode

You can set the notice and preferences screens to fit the device screen. This option will make the notice and the preferences screen to completely cover your application (only the system status bar will be visible). This mode will override the notice position parameter (bottom / popup).

"theme": {
    "fullscreen": true,
    ...
}

Sticky Buttons

You can enable the Agree and Disagree (button or link / cross) sticky buttons. When sticky buttons are enabled, they will always be visible, even if the notice text is too long to be displayed entirely in the notice. In this case the texts will be scrollable independently.

This feature will force the Fullscreen mode (and will override the notice position parameter).

The Agree and Disagree buttons will be disabled at startup. The user will have to scroll down to the bottom of the content description in order to enable those buttons.

"theme": {
    ...
    "notice": {
        "stickyButtons": true,
        ...
    }
}

Custom notice

PreviousCustomize the preferences popupNextLoad notice by ID

Last updated 1 year ago

See

See

Examples: Font family name: Trebuchet MS -> Same as the Font Family Name from or from the iOS system. Font family name: Arial -> Same as the Font Family Name from or from the iOS system.

If you want to further customize the notice in your app, you can use your own custom notice to replace the standard Didomi SDK notices (banner or popup). Contact to learn more and discuss feasibility.

Android documentation
Apple Documentation
Font Book
Font Book
support@didomi.io