Didomi - Developers documentation
  • Introduction
  • SDKs
    • Introduction
    • Web SDK
      • Getting started
      • Tags and vendors management
        • Tags management
          • Events & Variables
            • Deprecated
            • Custom events
          • Tag managers
            • Adobe Launch/DTM
            • Eulerian
            • Google Tag Manager
              • Configure the Didomi / GTM integration
              • Didomi's GTM template
            • Tealium
            • Other tag managers
        • Custom Didomi <script> tags
        • Third-party integrations
          • Google Ad Manager / AdSense
            • GDPR via Non-Personalized Ads
              • Share consent and load/refresh ads
              • Share consent without loading or refreshing ads
            • US states laws
          • Google Consent Mode V2
          • Kameleoon
          • Piano Analytics (AT Internet)
          • Prebid
            • GDPR via IAB TCF
            • US states laws
          • Salesforce DMP (Krux)
        • IAB frameworks
        • Programmatic API
      • Configuration
        • Bots (SEO & Performance tools)
        • Configuration by URL
        • Cookies and storage
        • Custom domains for events
        • Notice
          • Behavior
          • Interactions
          • Look and feel
        • Preferences
        • Theme
      • AB tests
      • Custom domain
        • Domain delegation
        • Reverse proxy
      • Share consents between domains
      • Share consents across devices
      • Pass user choices in query string
      • Serve Didomi assets from your domain
      • Reference
        • API
          • Deprecated
        • Events
      • Performance
      • Versions
    • Mobile and TV SDKs
      • Android and Android TV
        • Setup
        • Logging
        • Reference
          • API
            • Deprecated
          • Events
        • Versions
      • iOS and tvOS
        • Setup
        • Logging
        • App Tracking Transparency (iOS 14.5+)
        • Reference
          • API
            • Deprecated
          • Events
        • Versions
      • Unity
        • Setup
        • Reference
        • Versions
        • Troubleshooting
      • React Native
        • Setup
        • Reference
          • Deprecated
        • Versions
      • Flutter
        • Setup
        • Reference
        • Versions
      • Consent notice
        • Getting started
        • Customize the notice
        • Customize the preferences popup
        • Customize the theme & UI
        • Load notice by ID
      • Third-party SDKs
      • Share consents across devices
      • Share consent with WebViews
      • Google Consent Mode v2
      • FAQ
    • AMP SDK
      • Blocking Behaviors
        • Load immediately on page load
        • Load only after consent (positive or negative)
        • Load only after positive consent
      • Consent status for vendors
    • Help & Support
  • API
    • Introduction
      • Authentication
      • Errors
      • Pagination
      • Filters
      • Caching
      • Rate limiting
      • Quotas
      • Translations
    • Data Manager
      • Regulations
      • Configuration Tree
      • Purposes
        • Purposes & Vendors Numerical IDs
      • Preferences Library
      • User Rights
    • Widgets
      • Consent notices
        • Notices
        • Configurations
        • Multi-Regulation Configurations
          • Migration of Existing Notices and API Updates
        • Deployments
        • Tutorials
          • Create and publish a consent notice
          • Create and publish a multi-regulation consent notice
      • Privacy widgets
        • Create a widget
        • Retrieve widgets
        • Edit a widget
          • Content & Design
            • Themes & Shapes
            • Components
              • auth
              • dsar_form
              • footer
              • header
              • preference
              • preference_value
              • save
              • section
              • sections
            • Options
          • Purposes & preferences
          • Settings
        • Deploy a Widget
          • Use your own subdomain
          • Use your own domain
          • Implement an embeddable widget on your website
        • Authentication
          • Manage authentication providers
          • Authenticate your end-user
        • Archive a widget
        • Headless widgets
          • Public Methods
          • Custom elements
          • Custom events
          • Event listeners
        • Tutorial
          • Launch a Preference Center from a mobile app
    • Compliance Reports
      • Properties
      • Reports
      • CSV format reference
      • Websites
    • Consents and Preferences
      • Events
        • Generate IAB TCF consent string
      • Links
      • Proofs
      • Tokens
      • Secrets
      • Users
      • Tutorial
        • Collect and operate data
    • Privacy Requests
      • Requests
      • Notes
      • Links
      • Emails
  • Integrations
    • Introduction
      • Quotas
    • Generic integrations
      • Batch export
        • Destinations
          • AWS S3 Bucket (owned by Didomi)
          • GCP Storage Bucket
        • Exported data
          • Notices consents
        • Logs
      • Webhooks
      • Batch import
      • Analytics export
        • Destinations
          • AWS S3 Bucket (owned by Didomi)
          • GCP Storage Bucket
    • Third-party apps
      • CMP integrations
        • Didomi-mParticle integration for your CMP
        • Deploy Didomi’s SDK for your Adobe Commerce website
      • Preference Management Platform integrations
        • Actito
        • Adobe Campaign Classic
        • Adobe Experience Cloud
        • Adobe Marketo Engage
        • Adobe Source Connector
        • Braze
        • Dotdigital
        • Hubspot
        • Mailchimp
        • Microsoft Dynamics 365
        • Salesforce Marketing Cloud
        • Salesforce Sales & Service Cloud
        • Selligent
        • Brevo (ex Sendinblue)
    • Tutorials
      • Configure a HTTP webhook
      • Configure a batch export
      • Configure an analytics export
    • Emailing
      • Configurations
        • Actito Email
        • Actito SMS
        • Adobe Campaign Classic
        • Adobe Campaign Standard
      • Emails
        • Templates
        • Manage your templates
Powered by GitBook
On this page
  • Introduction
  • Create a widget
  • Create a Single purpose widget
  • Create a Multi purpose widget
  • Create a Preference Center
  • Create a Privacy Request widget
  • Create a Headless Preference Center
  1. API
  2. Widgets
  3. Privacy widgets

Create a widget

PreviousPrivacy widgetsNextRetrieve widgets

Last updated 2 months ago

Introduction

Didomi provides different types of widgets. To build a widget, beyond filling in your Configuration Tree, you need to 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 into 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 .

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 template 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 template 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 template 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 template default behavior
   */
   "auth": {
       "method": "email",
       "componentOptions": {},
       "hideIfNotAuthenticated": false
   }     
}

Create a Privacy Request widget

A Privacy Request form includes all user's rights from regulations supported 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 template 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.

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 template default behavior
   */
   "auth": {
       "method": "email",
       "componentOptions": {},
       "hideIfNotAuthenticated": true
   }     
}

Read our dedicated to know more about Headless widget implementation.

here
documentation