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
    • 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
  • Languages
  • Language direction
  • Theme
  • Position
  • "Disagree and close" button
  • Style of the "Disagree and close" button
  • "Continue without agreeing" link
  • Cross button
  • Configuring legitimate interest legal basis status
  • Close button
  • Text alignment
  • Logo alignment
  • Buttons
  • Order
  • Margins
  • Texts
  1. SDKs
  2. Web SDK
  3. Configuration
  4. Notice

Look and feel

PreviousInteractionsNextPreferences

Last updated 5 months ago

Languages

Our SDK supports multiple languages out-of-the-box with translations for all our standard messages. See below if your website uses other languages. English is the default language: if a visitor does not use a supported language, the banner and popups will be displayed in English.

You do not need to do anything to use Didomi's languages. However, you can choose to enable only certain languages and set up a different default language. Set the languages.enabled property to your list of supported languages and languages.default property as the default language in case the customer language is not supported:

<script type="text/javascript">
window.didomiConfig = {
  languages: {
    enabled: ['en', 'es', 'fr'], // List of languages that visitors can use (must be a subset of the languages that we support)
    default: 'fr' // Default language to use if the visitor uses a language that is not enabled
  }
};
</script>

By default, enabled is the list of supported languages by Didomi and default is en. You can support different languages by changing the English texts and setting English as the only enabled language.

We currently support .

Language direction

The Didomi SDK adapts to the text direction of your website by default, inheriting the dir attribute from its parent elements, typically the <html> or <body> tag. This ensures compatibility with the overall layout of your site.

To understand more about the HTML dir attribute please refer to

n

If you need the Didomi notice to have a different text direction from the rest of your website, you can override it with custom CSS.

The Didomi notice is rendered in a div element with ID didomi-host that contains:

  • a lang attribute to identify the language on the notice

  • a data-lang-dir attribute with the suggested direction to use for the language applied

Example of HTML generated by the Didomi SDK for a notice in Arabic:

<div id="didomi-host" lang="ar" data-lang-dir="rtl">...</div>

With these attributes you can apply CSS rules like:

/* Target a single language */
#didomi-host[lang="ar"] {
  direction: rtl;
}

/* Target all languages that are suggested as RTL */
#didomi-host[data-lang-dir="rtl"] {
  direction: rtl;
}

Theme

The SDK supports theming by providing a color that will be used across the interfaces (consent notice, popups, etc.) to make sure that our UIs match your brand colors.

The color that you provide should be the main color of your website, the one that appears most frequently.

<script type="text/javascript">
window.didomiConfig = {
  app: {
    apiKey: '<Your API key>'
  },
  theme: {
    color: '#3F51B5'
  }
};
</script>

Position

The notice can be displayed as a popup, a regular banner (top or bottom), a smaller banner or as a floating panel and can be positioned at different locations on the screen.

The position configuration parameter lets you define the position of the notice. The possible values are:

Values

Description

popup

Display the notice as a full-screen popup. Also set your website logo and name to make sure the popup is personnalized.

panel-top-left panel-top-right panel-bottom-left panel-bottom-right

Display the notice as a small panel in one of the corners of the screen. panel-bottom-right is the default value.

top bottom

Display a banner notice at the top or the bottom of the screen

top-left top-right bottom-left bottom-right

Display a floating panel in a corner of the screen

Examples:

<script type="text/javascript">
window.didomiConfig = {
  app: {
    apiKey: '<Your API key>'
  },
  notice: {
    position: 'bottom'
  }
};
</script>
<script type="text/javascript">
window.didomiConfig = {
  app: {
    apiKey: '<Your API key>'
  },
  notice: {
    position: 'panel-bottom-right'
  }
};
</script>
<script type="text/javascript">
window.didomiConfig = {
  app: {
    apiKey: '<Your API key>'
  },
  notice: {
    position: 'popup'
  }
};
</script>
<script type="text/javascript">
window.didomiConfig = {
  app: {
    apiKey: '<Your API key>'
  },
  notice: {
    position: 'top-left'
  }
};
</script>

"Disagree and close" button

By default, our notices display Agree and close and Learn More buttons. These allow users to give consent or get more information on the purposes and vendors that your website works with.

We also support displaying Agree and close and Disagree and close buttons directly in the notice:

To display those buttons, set the notice.denyOptions.button of your notice to primary

window.didomiConfig = {
  notice: {
    denyOptions: {
      button: 'primary',
    }
  }
};

This is supported for both banners (bottom or top positions) or pop-ins (popup position).

Style of the "Disagree and close" button

In the example above the Disagree and close button is a primary button. To make it a secondary button, you can set the notice.denyOptions.button configuration option secondary:

window.didomiConfig = {
  notice: {
    denyOptions: {
      button: 'secondary',
    }
  }
};

To hide the Disagree and close button in the notice you can set notice.denyOptions.button to none.

Please note that the denyAsPrimary parameter is deprecated and should not be used for the styling of the "Disagree and close" button.

"Continue without agreeing" link

A "Continue without agreeing" link can be displayed instead of the "Disagree and close" button in the optin notice type:

To show the "Continue without agreeing" link, set the notice.denyOptions.link value to true:

window.didomiConfig = {
  notice: {
    denyOptions: {
      button: 'secondary',
      link: true,
    }
  }
};

The "Continue without agreeing" link behaves the same way as the "Disagree and close" button.

Please note that if notice.denyOptions.link is true then notice.denyOptions.button options will be ignored and only a link will be shown in the notice.

Please note that the denyAsLink parameter is deprecated and should not be used for the "Continue without agreeing" link configuration.

Cross button

To comply with Italian regulation, you should add a cross button to the notice. To make the cross button appear in the notice set the notice.denyOptions.cross parameter value to true:

window.didomiConfig = {
  notice: {
    denyOptions: {
     cross: true,
     link: true,
    }
  }
};

Please note that you can have both the “Disagree and close button” and the cross button in the same notice, for example:

window.didomiConfig = {
  notice: {
    denyOptions: {
     button: 'primary',
     link: true,
    }
  }
};

Configuring legitimate interest legal basis status

After clicking on the "Disagree and close" button or "Continue without agreeing" link in the optin notice, all purposes' and vendors' consents are disabled, and all purposes' and vendors' legitimate interests are enabled by default.

To disable legitimate interests as well after clicking on the "Disagree and close" button or "Continue without agreeing" link, notice.denyAppliesToLI should be set to true in the Didomi configuration object:

window.didomiConfig = {
  notice: {
    type: 'optin',
    denyAppliesToLI: true
  }
};

Close button

For notices with position popup, you can show a Close icon to allow users to ignore the notice until the next page:

To show the Close icon, set the notice.canCloseAndIgnore value to true:

window.didomiConfig = {
  notice: {
    canCloseAndIgnore: true,
    position: 'popup',
    type: 'optin'
  }
};

Text alignment

You can change the alignment of the text inside the notice. The options are left, right, center and justify. By default, the text is aligned to the left.

Example:

<script type="text/javascript">
window.didomiConfig = {
  notice: {
    textAlignment: 'left'
  }
};
</script>

Logo alignment

Example:

<script type="text/javascript">
window.didomiConfig = {
  notice: {
    logoAlignment: 'center'
  }
};
</script>

Buttons

Order

You can change the order of the buttons inside the notice. By default learnMorePosition is null and the "learn more" button is displayed before the "agree" button on the regular notice and after on the popup notice.

The options are before and after.

Example:

<script type="text/javascript">
window.didomiConfig = {
  notice: {
    learnMorePosition: null
  }
};
</script>

Margins

You can set the margins of the "learn more" button on the popup notice.

The options are based on the CSS margin property.

Example:

<script type="text/javascript">
window.didomiConfig = {
  notice: {
    learnMoreMargin: '20px 0 5px 0'
  }
};
</script>

Texts

You can change some of the texts of the consent notice:

Configuration Key

Description

notice.content.dismiss

"Agree & Close" button

notice.content.deny

"Decline" button

notice.content.learnMore

"Learn More" button

notice.content.subTextPopup

Message below the "Learn more" button in the popup. This is only used if you are using a popup and not for banners or floating panels.

Example:

<script type="text/javascript">
window.didomiConfig = {
  app: {
    apiKey: '<Your API key>'
  },
  notice: {
    content: {
      dismiss: {
        en: 'Agree & Close',
        fr: 'Accepter et fermer'
      },
      learnMore: {
        en: 'Learn More',
        fr: 'En savoir plus'
      }
    }
  }
};
</script>

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

Move the vendors link in your banner to your custom text

If you want to move the vendor link to your custom text notice.content.notice instead of having a separate link, you can use the function Didomi.preferences.show('vendors') to open the preference popup. The original link will be automatically replaced.

<a href="javascript:Didomi.preferences.show('vendors')">View partners</a>

You can change the alignment of the logo inside the notice. The options are the one available for the CSS property . So for example to align it to the left, the value would be flex-start and to the right flex-end. By default, the logo is aligned to the center.

align-self
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir
this list of languages
Italian Regulation example
Italian Regulation Example