Introduction

Introduction

Didomi provides an easy way for you to create your preference center / widgets through our Didomi Elements.‌

We identified 2 types of implementations for our clients:

  • A preference center in a full page

  • A widget inserted into an existing page of your website

You can follow this documentation for both implementations as they are following the same setup process in term of Didomi Elements. When we will speak about Preference Center in the below sections, we assume it stands for both full page and widgets implementations.

Setup

We will now go through the different steps of the process of building your custom preference center.

Include the Didomi SDK and the didomiConfig object (only if you don't already have the SDK script in your page)

We offer the Didomi SDK as a hosted JavaScript library that you can directly include on your website with a <script> tag. Place the following tag at the top of the <head> section of your HTML pages, before any other script tag:

<script type="text/javascript">
window.didomiConfig = {
app: {
apiKey: '<Your API key>'
}
};
</script>
<script type="text/javascript" id="spcloader" src="https://sdk.privacy-center.org/loader.js" async></script>

Make sure to:

  • Place the tag as close to the opening <head> tag on your page as possible, before any other tag gets embedded

  • Add your API key into the tag (replace the <Your API Key> value)

Now that we have the Didomi SDK on our page, we can start building our configuration object. But first, let's copy a quick example on your page to make sure everything is setup properly.

Please follow the next steps in the right order:

Create my containers

Didomi allows you to have multiple containers which will contain your entities, components and translations. Each container is isolated. Let's say you want to create a full preference center page and also have a single checkbox for a different consent on another page of your website. You will create one container for your preference center and one for the checkbox. See this section for more information.

Create my entities

Once your container is created. we can list the entities we will be using. Your entities are your purposes, preferences and channels. This section will help you list all the necessary entities required for your privacy center. See this section for more information.

Create my entities tree

This section will help you setup the hierarchy of your entities by linking them together. See this section for more information.

Create my components

It's now the time to list what components you want to display. Please read this section for more information.

Create my components layout

We have all our components ready, the last step is to assemble them together. Please read this section for more information.

Create my translations (Optional)

The translations can be handle directly into the entities and components objects, but if you want to group them in the same object for better management, please read this section for more information.