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 the following languages:

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:

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>

Type

By default, our notices display an Agree and a Learn More buttons. Those 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 Disagree buttons directly in the notice:

To display those buttons, set the type of your notice to optin:

window.didomiConfig = {
  notice: {
    position: 'bottom',
    type: 'optin'
  }
};

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

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

You can change the alignment of the logo inside the notice. The options are the one available for the CSS property align-self. 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.

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 the message of the notice as well as the "Agree & Close" and "Learn More" buttons.

Example:

<script type="text/javascript">
window.didomiConfig = {
  app: {
    apiKey: '<Your API key>'
  },
  notice: {
    content: {
      notice: {
        en: 'This website uses cookies to provide you with tailored commercial offers',
        fr: 'Ce site utilise des cookies pour vous fournir des offres commerciales personalisées'
      },
      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>

Show data processing

You can display the list of data processing (purposes, features...) in your notice by setting showDataProcessing to true. By default showDataProcessing is false.

Example:

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

Custom notice

You can use your own custom notice to replace the standard Didomi SDK notices (banner or popup). Do to so, we have 2 options:

Option 1: Change the HTML of the original notice

This option keeps some native behaviors like the position of the notice, the backdrop (for the popup notice) or the logic to decide when to to display the notice. You provide HTML to re-create all the UI elements and structure. This option is interesting if you want to change the UI but keep the behavior of the Didomi standard notice.

Set your HTML in the notice.content.html key:

<script type="text/javascript">
window.didomiConfig = {
  app: {
    apiKey: '<Your API key>'
  },
  notice: {
    content: {
      html: {
        en: '<div>Custom Notice</div>'
      }
    }
  }
};
</script>

<script type="text/javascript">
window.didomiConfig = {
  app: {
    apiKey: '<Your API key>'
  },
  notice: {
    content: {
      html: {
        en: element => {
          return element.appendChild(document.createTextNode('This is the new notice'))
        }
      }
    }
  }
};
</script>

const didomiConfig = {
  app: {    
    apiKey: '<Your API key>',        
    notice: {
      content: {
        html: {
          en: '<div>Custom Notice</div>'
        }
      }
    }
  }
};
​
...
​
<DidomiSDK config={didomiConfig}/>

import { render } from 'react-dom'
​
class NoticeHTML extends Component {
  openPreferences() {
    Didomi.preferences.show()
  }
​
  render() {
    const noticeStyle = {
      color: 'red'
    }
​
    return (
      <div style={noticeStyle}>
        <span>Custom Notice HTML. <a onClick={this.openPreferences.bind(this)}>Open Preferences</a></span>
        {
          this.props.shouldDisplayMoreText &&
          <p>More Text</p>
        }
      </div>
    )
  }
}
​
const didomiConfig = {
  app: {    
    apiKey: '<Your API key>',        
    notice: {
      content: {
        html: {
          en: element => {
            render(<NoticeHTML shouldDisplayMoreText={false} />, element)
          }
        }
      }
    }
  }
}

Other keys in notice.content will be ignored.

Option 2: Disable the original notice and build your own

This option disables completely the original notice and you will have to recreate everything yourself (logic and UI). This choice is perfect if you want to control when to display the notice.

Disable the standard notice

Disable the standard notice in your configuration file:

<script type="text/javascript">
window.didomiConfig = {
  app: {
    apiKey: '<Your API key>'
  },
  notice: {
    enable: false
  }
};
</script>

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 Didomi.preferences.show() function of the SDK)

• Agree & Close: stores the user consent to all vendors and purposes and closes the notice (call the Didomi.setUserAgreeToAll() function 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 Didomi.setUserDisagreeToAll() function of the SDK)

Show your custom notice

You need to show your custom notice when needed. On page load and when the Didomi SDK is ready, check if the notice should be displayed:

<script type="text/javascript">
window.didomiOnReady = window.didomiOnReady || [];
window.didomiOnReady.push(function (Didomi) { 
    if (Didomi.notice.isVisible()) {
        // Show your own notice
    }
});
</script>