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
  1. API
  2. Widgets
  3. Privacy widgets
  4. Headless widgets

Custom elements

PreviousPublic MethodsNextCustom events

Last updated 2 years ago

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.

didomi-container-headless

Add the custom element didomi-container-headless to wrap your widget. This component should wrap all other widget related elements as it contains a boundary intercepting events and communicating with our API.

Properties
Description

id

ID of the widget

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

didomi-if-not-authenticated

To display content when the end-user is not logged into the Didomi system, add the custom element didomi-if-not-authenticated.

Properties
Description

container-id

ID of the widget

<didomi-if-not-authenticated container-id="widgetId">
	<p> I am displayed when end-user is not authenticated </p>
</didomi-if-not-authenticated>

didomi-if-authenticated

To display content only when the end-user is logged into the Didomi system, add the custom element didomi-if-authenticated.

Properties
Description

container-id

ID of the widget

<didomi-if-authenticated container-id="widgetId">
  <p> I am displayed when end-user is authenticated </p>
</didomi-if-authenticated>

didomi-auth-headless

Add the custom element didomi-auth-headless to wrap a login form and handle end-user authentication.

To request authentication, you will need to create and dispatch the custom event didomi:send-authentication.

Properties
Description

container-id

ID of the widget

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

This custom element takes care of sending the authentication.asked and authentication.sent analytic events.

didomi-consent-asked

To send consent.asked analytics event, add the custom element didomi-consent-asked.

Please make sure to only add this component once in your page to avoid sending multiple events.

Prop
Description

container-id

ID of the widget

<didomi-consent-asked container-id="widgetId"></didomi-consent-asked>

didomi-consent-receiver

To send end-users' choices through our SDK upon click, wrap your entities in the custom element didomi-consent-receiver.

Properties
Description

container-id

ID of the widget

<didomi-consent-receiver container-id="widgetId">
    // Add your input/checkbox/radio... here
</didomi-consent-receiver>

To save end-users' choices through our SDK upon clicking, create and dispatch the custom event didomi:set-consents.

This custom element takes care of sending the consent.given analytic event.

didomi-pending-consent-receiver

To store end-users' choices in the application state before saving them, wrap your entities in the custom element didomi-pending-consent-receiver, create and dispatch the custom event didomi:set-pending-consents.

Within the didomi-pending-consent-receiver, you will also need to add a save button, create and dispatch the custom event didomi:save-pending-consents to save the consent state in our database.

Prop
Description

container-id

ID of the widget

<didomi-pending-consent-receiver container-id="widgetId">
  // Add your input/checkbox/radio... as well as your save button here
</didomi-consent-receiver>

This custom element takes care of sending the consent.given analytic event.

didomi-component-content

To display a content option of a component of your widget, use the custom element didomi-component-content.

Properties
Description

container-id

ID of the widget

component-id

ID of the layout-component

component-property

Property of the layout-component. For example saveButton.text.content (if it has been edited at the layout-component level) or icon.src to get the URL of the preference value.

<didomi-component-content
    container-id="widgetId"
    component-id="componentId"
    component-property="pathOfProperty"
></didomi-component-content>

didomi-entity-content

To display an entity of your widget, such as the title or description from a purpose or preference, use the custom element didomi-component-content.

Properties
Description

container-id

ID of the widget

entity-id

ID of the selected purpose, selected preference or preference value. You can easily find them in the Configuration Tree section on the Console.

entity-property

This property determines which content of the entity object should be displayed. It can be name or description.

entity-type

Specify the type of property. It can be either purpose, preference or preference-value.

with-component-content

This property is used to determine whether to override the entity content with the layout component one set a widget level, if any (true), or to display the entity content (undefined).

<didomi-entity-content
    container-id="widgetId"
    entity-id="entityId"
    entity-property="pathOfProperty"
    entity-type="entityType"
    with-component-content="true"
></didomi-entity-content>
didomi-container-headless
didomi-if-not-authenticated
didomi-if-authenticated
didomi-auth-headless
didomi-consent-asked
didomi-consent-receiver
didomi-pending-consent-receiver
didomi-component-content
didomi-entity-content