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 (purposes & preferences) and a save button

• full_preference_center: includes a header, sections (purposes & preferences), a save button, and a footer

• dsar_form: includes user's rights of regulations, some additional fields and a submit button

Selected entities

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.

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	[]	[]
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.

Create a Single purpose widget

A Single purpose widget includes one purpose or preference from your Configuration Tree. This widget is embedded in 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"]
   /**
   * auth is an optional object in case 
   * you want to override the templalte default behavior
   */
   "auth": {
       "method": null,
       "componentOptions": {},
       "hideIfNotAuthenticated": true
   }   
}

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"]
   /**
   * auth is an optional object in case 
   * you want to override the templalte default behavior
   */
   "auth": {
       "method": null,
       "componentOptions": {},
       "hideIfNotAuthenticated": true
   }     
}

Create a Multi purpose widget

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

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",
   /**
   * auth is an optional object in case 
   * you want to override the templalte default behavior
   */
   "auth": {
       "method": "email",
       "componentOptions": {},
       "hideIfNotAuthenticated": false
   }     
}

Create a Privacy Request widget

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

Create a Headless Preference Center

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.

Read our dedicated documentation to know more about Headless widget implementation.

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