Create a widget

Introduction

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.

Format

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.

Template

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 and a save button
  • full_preference_center: includes a header, sections, a save button, and a footer

Selected entities

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.

Create a widget

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
[]
[]
💡 Many configurations are possible. Feel free to give it a try and see if it matches your needs in a better way.

Create a Single purpose widget

A Single purpose widget includes one purpose or preference from your Configuration Tree. This widget is embedded on your website.

SPW with a purpose

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"]
}

SPW with a preference

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"]
}

Create a Multi purpose widget

A multi purpose widgets includes all purposes and preference. This widget is embedded on 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",
}

Create a Preference Center

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",
}