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
  • Setup
  • Elements
  • Example
  1. API
  2. Widgets
  3. Privacy widgets

Headless widgets

PreviousArchive a widgetNextPublic Methods

Last updated 1 year ago

Headless widgets enable you to create fully customizable widgets in terms of both design and behavior. These widgets rely on the Didomi’s widgets engine, so they feature authentication management, analytics, content rendering, purpose and preference choices, and saving upon clicking or after user confirmation.

The following set of elements, events and methods are available for generating the widget and collecting end-user consent and preference choices.

Custom elements

Custom elements are HTML components used to display the content of your widget as well as wrap your own HTML elements to handle specific communication with the Didomi API. Please refer to this for more information about custom elements.

Please refer to our dedicated documentation on Didomi custom Elements for more .

Custom events

Custom events are synthetic events in Javascript that can be dispatched to our SDK.

Use custom events to communicate with our custom elements to wrap your code and handle all logic, analytics and API requests.

Please refer to our dedicated documentation on custom events for more .

Public Methods

Public methods are SDK methods that are made available to facilitate your interactions with our SDK, including getting information from the widget configuration and from the current user consent state.

Please refer to our dedicated documentation on public methods for more .

Event listeners

Event listeners are JavaScript methods that set up a function to run whenever the specified event is delivered to the target.

You can use event listeners to provide UI feedback to your end-users, handle retries, and more. Since custom events don't support callbacks, this is how you can know the current state (loading, success, error) of an action that has been emitted.

Please refer to our dedicated documentation on event listeners for more .

Setup

Widget format

Once created, the widget can be edited in the Didomi Console or using API. All sections are supported by a Headless widget, except for Look and Feel.

POST https://api.didomi.io/widgets?organization_id=YOUR_ORG_ID

{
  "name": "My Headless widget",
  "format": "embeddable",
  "headless": true
}

Load SDK

To use a Headless widget, you first need to load our SDK. We recommend integrating the SDK loader at the top of your HTML.

💡 The SDK loader code to embed is available in the Didomi Console once you have created an embeddable widget.

<script>
  window.didomiConfig = {
    apiKey: "YOUR_API_KEY",
    app: { apiKey: "YOUR_API_KEY" },
    components: {
      version: 2,
    },
    widgets: [],
  };
</script>
<script
  type="text/javascript"
  async="true"
  charset="utf-8"
  src="https://sdk.privacy-center.org/v2/loader.js"
></script>

Load the Headless widget and its entities when the SDK is ready

After the SDK is ready, you can access the widget configuration and the entities enabled within the widget.

window.didomiWidgetsOnReady = window.didomiWidgetsOnReady || [];
window.didomiWidgetsOnReady.push(async (DidomiWidgets) => {
  const container = await DidomiWidgets.getContainerById("widgetId");
  const entities = await container.getEntities();
});

<didomi-container-headless id="widgetId">
  // Add your HTML here
</didomi-container-headless>

To avoid a flickering effect while the SDK is loading, you can use this CSS snippet. This can be applied to any custom element:

didomi-if-authenticated:not(:defined) {
    display: none;
}
didomi-if-not-authenticated:not(:defined) {
    display: none;
}

Elements

Example

To use a Headless widget, set the format to embeddable and headless to true when via the API.

Please refer to our dedicated to learn how to create a widget using API.

To and , you can use our public methods.

To display the Headless widget once the container and entities are loaded you need to add the custom element.

documentation
information
information
information
information
documentation
Custom elements
Public methods
Custom events
Event listeners
Github repository
React application
Setup
Elements
Example
creating the widget
access the configuration
obtain the entities
didomi-container-headless