Implement an embeddable widget on your website

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.

3. Configure the 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 documentation.

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