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.
We will now go through the different steps of the process of building your custom preference center.
<script> tag. Place the following tag at the top of the
<head> section of your HTML pages, before any other script tag:
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:
Didomi allows you to have multiple
containers which will contain your
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.
Once your container is created. we can list the
entities we will be using. Your entities are your
channels. This section will help you list all the necessary entities required for your privacy center. See this section for more information.
This section will help you setup the hierarchy of your entities by linking them together. See this section for more information.
It's now the time to list what components you want to display. Please read this section for more information.
We have all our components ready, the last step is to assemble them together. Please read this section for more information.
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.