# 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 (Privacy Requests widgets do not need authentication).*

3. [Configure the authentication](https://developers.didomi.io/api-and-platform/widgets/authentication/authenticate-your-end-user#server-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.

```html
<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.

```html
<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

{% hint style="info" %}
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.
{% endhint %}

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

```javascript
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:

```javascript
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.

```html
<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

{% hint style="info" %}
Authentication configuration is required for **Preferences widgets** only.
{% endhint %}

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](https://developers.didomi.io/api-and-platform/widgets/authentication/authenticate-your-end-user#server-authentication).

*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*](mailto:support@didomi.io)*.*