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
  • Embed your Single Purpose Widget
  • Add Didomi SDK script to your website
  • (Optional) Load your widgets manually
  • Add the widget (HTML element) to your website
  • Configure authentication
  1. API
  2. Widgets
  3. Privacy widgets
  4. Deploy a Widget

Implement an embeddable widget on your website

PreviousUse your own domainNextAuthentication

Last updated 2 months ago

Introduction

An embeddable widget is a form used to collect users' preferences or privacy requests.

To collect such data, you need to:

  1. Create an embeddable widget in the Didomi Console or through our APIs by setting the property format to embeddable.

  2. Publish it

  3. Integrate it on your website.

We assume that you have already created and published your embeddable widget and it is ready to be integrated.

  1. Add the Didomi SDK script to your website

  2. Add the widget (HTML element) to your website

Only if your widget settings require your widget to be in an authenticated environment (Privacy Requests widgets do not need authentication).

Embed your Single Purpose Widget

Add Didomi SDK script to your website

Add the following <script> to your website.

💡 The SDK loader code is available in the Didomi Console once you have created the embeddable widget_._

💡 On pages featuring both CMP and PMP widgets, add the SDK loader script only once.

<script>
    window.didomiConfig = {
      apiKey: 'YOUR_PUBLIC_API_KEY',
      app: { apiKey: 'YOUR_PUBLIC_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>

* Note that the Public API Key can be found in the Didomi Console while editing a widget, in the Embedding section.

💡 If you are loading/displaying your <didomi-container> asynchronously, for example on a click action, Didomi will not find it on page load and won't load the Widgets SDK. You need to force the SDK to load.

<script>
    window.didomiConfig = {
      apiKey: 'YOUR_PUBLIC_API_KEY',
      app: { apiKey: 'YOUR_PUBLIC_API_KEY' },
      components: {
        version: 2,
        helpersEnabled: true, // Force loading Components SDK
        componentsEnabled: true, // Force loading Components SDK
      },
      widgets: [],
    }
</script>
<script type="text/javascript" async="true" charset="utf-8" src="https://sdk.privacy-center.org/v2/loader.js"></script>

(Optional) Load your widgets manually

Instead of loading everything at once, you might want to control when to load your widgets. For example if you don't have your token set in your locale storage at the moment where you load the SDK.

Update your didomiConfig to set helpersEnabled and componentsEnabled to false so it does not load the Widgets SDK:

window.didomiConfig = {
      apiKey: 'YOUR_PUBLIC_API_KEY',
      app: { apiKey: 'YOUR_PUBLIC_API_KEY' },
      components: {
        version: 2,
        helpersEnabled: false,
        componentsEnabled: false,
      },
      widgets: [],
}

Initialize manually your widgets via the Didomi public method:

Didomi.initWidgets();

Add the widget (HTML element) to your website

Once Didomi SDK is loaded on your website, you need to add the snippet code of your embeddable widget to your website, wherever you want to collect users’ preferences.

<didomi-container id="YOUR_WIDGET_ID"></didomi-container>

💡 The snippet code of your Widget is available in the Didomi Console once you have created the embeddable widget. You need to publish the widget and follow the next step to display the widget.

💡 Note that your embeddable widget will be displayed only once your user is authenticated in our system. To display the widget, let's configure the authentication.

Configure authentication

Authentication configuration is required for Preferences widgets only.

Embeddable preference widgets operate in authenticated environments and authentication needs to be performed in your backend. To implement authentication from your server, read on this .

If you have any question, it probably means our documentation is not clear enough and we’re looking forward to help you and get your feedback in order to improve it. Feel free to reach our support team at .

support@didomi.io
Configure the authentication
documentation