Create a widget
Didomi provides different types of widgets. To build a widget, beyond filling in your Configuration Tree, you need indicate a
format, a template_id and the selected entities. Before creating widgets available in the Didomi Console, let's deep dive into these properties. The
format property defines the integration method of your widget. It can be either embeddable or hosted. If you choose
embeddable, you will be able to implement your widget on your website by copy/pasting a Didomi Container on your HTML. A hosted widget is a widget accessible through a dedicated URL which can be either auto generated by our system or customized as detailed here. The
template_id property allows you to select a general structure for your widget. We offer 3 options: sections: includes only sections (purposes & preferences)sections_and_save: includes sections (purposes & preferences) and a save buttonfull_preference_center: includes a header, sections (purposes & preferences), a save button, and a footerdsar_form: includes user's rights of regulations, some additional fields and a submit button
This section relates to widgets that are used to collect preferences only (Single purpose widget or Preference Center for instance)
The selected entities are actually two properties,
selected_purposes_ids and selected_preferences_ids. These arrays allow you to select one, several or all purposes and/or preferences from your Configuration Tree. To include the full Configuration Tree in your widget, don't include these properties or send empty arrays.
To create a widget, send a POST request on
/widgets.You need to send a different payload from one type of widget to another. In this comparative table, we have listed and detailed the configuration required to reproduce a widget from the selection we offer in the Didomi Console.
Widget | format | template_id | selected_purposes_ids | selected_preferences_ids |
|---|---|---|---|---|
Single purpose widget | embeddable | sections | if you select a purpose ["SEL_PURP_ID"]
else [] | if you select a preference ["SEL_PREF_ID"]
else [] |
Multi purpose widget | embeddable | sections_and_save | [] | [] |
Preference Center | hosted | full_preference_center | [] | [] |
Privacy Request widget | embeddable | dsar_form | null | null |
💡 Many configurations are possible. Feel free to give it a try and see if it matches your needs in a better way.
A Single purpose widget includes one purpose or preference from your Configuration Tree. This widget is embedded in your website.
POST https://api.didomi.io/widgets?organization_id=YOUR_ORG_ID
{
"name": "String",
"layout_shape": "smoothed",
"format": "embeddable",
"template_id": "sections",
/**
* For a Single purpose widget w/ a purpose,
* add a selected_purposes_ids
*/
"selected_purposes_ids": ["YOUR_SELECTED_PURPOSE_ID"]
/**
* auth is an optional object in case
* you want to override the templalte default behavior
*/
"auth": {
"method": null,
"componentOptions": {},
"hideIfNotAuthenticated": true
}
}
POST https://api.didomi.io/widgets?organization_id=YOUR_ORG_ID
{
"name": "String",
"layout_shape": "smoothed",
"format": "embeddable",
"template_id": "sections",
/**
* For a Single purpose widget w/ a preference,
* add a selected_preferences_ids
*/
"selected_preferences_ids": ["YOUR_SELECTED_PREFERENCE_ID"]
/**
* auth is an optional object in case
* you want to override the templalte default behavior
*/
"auth": {
"method": null,
"componentOptions": {},
"hideIfNotAuthenticated": true
}
}
A multi purpose widgets includes all purposes and preference. This widget is embedded in your website.
POST https://api.didomi.io/widgets?organization_id=YOUR_ORG_ID
{
"name": "String",
"layout_shape": "smoothed",
"format": "embeddable",
"template_id": "sections_and_save",
/**
* auth is an optional object in case
* you want to override the templalte default behavior
*/
"auth": {
"method": null,
"componentOptions": {},
"hideIfNotAuthenticated": true
}
}
A Preference Center includes all purposes and preferences from your Configuration Tree. This widget is hosted on an auto-generated domain or a custom domain if you configure it.
POST https://api.didomi.io/widgets?organization_id=YOUR_ORG_ID
{
"name": "String",
"layout_shape": "smoothed",
"format": "hosted",
"template_id": "full_preference_center",
/**
* auth is an optional object in case
* you want to override the templalte default behavior
*/
"auth": {
"method": "email",
"componentOptions": {},
"hideIfNotAuthenticated": false
}
}
A Privacy Request form includes all user's rights from regulations supporter by Didomi. This widget is embedded in your website.
POST https://api.didomi.io/widgets?organization_id=YOUR_ORG_ID
{
"name": "String",
"layout_shape": "smoothed",
"format": "embeddable",
"template_id": "dsar_form",
/**
* auth is an optional object in case
* you want to override the templalte default behavior
*/
"auth": {
"method": null,
"componentOptions": {},
"hideIfNotAuthenticated": false
}
}
A Headless Preference Center includes all purposes and preferences from your Configuration Tree as well as all static components. This widget is embedded on your website and requires technical implementation to implement design.
POST https://api.didomi.io/widgets?organization_id=YOUR_ORG_ID
{
"name": "String",
"layout_shape": "smoothed",
"format": "embeddable",
"template_id": "full_preference_center",
"headless": true,
/**
* auth is an optional object in case
* you want to override the templalte default behavior
*/
"auth": {
"method": "email",
"componentOptions": {},
"hideIfNotAuthenticated": true
}
}
Last modified 2mo ago