# Getting started ## Load the SDK ### Script We offer the Didomi SDK as a hosted JavaScript library that you can directly include on your website with a ` ``` Place this configuration snippet **above the Didomi SDK script tag** in the ``. When configured, the SDK will automatically add the corresponding `nonce` attribute to any styles it creates, ensuring compatibility with your CSP settings. ### React {% hint style="info" %} You can skip this section if you don't have a React application. {% endhint %} We also provide a React component to simplify the integration of our SDK with React applications. To use it, please follow the steps below or go directly to our React component documentation: 1. Install the library using npm. ```bash npm install --save @didomi/react ``` 2\. Import the module into your app. ```javascript import { DidomiSDK } from '@didomi/react'; ``` We recommend instantiating the component as soon as possible: the sooner you instantiate the component, the faster the banner will be displayed or the faster consents will be shared with your partners and the ads displayed. 3\. Instantiate the component in your app ```javascript console.log('Didomi SDK is loaded and ready', didomi)} onConsentChanged={cwtToken => console.log('A consent has been given/withdrawn', cwtToken)} onNoticeShown={() => console.log('Didomi Notice Shown')} onNoticeHidden={() => console.log('Didomi Notice Hidden')} /> ``` The SDK will automatically pull the notice configuration from the Didomi Console. For more information, please check our documentation: {% hint style="info" %} **Testing from outside the EU** If your banner is configured to not display to non EU visitors, it might be tricky to configure and test if you are not located in the EU. You can use the `notice.ignoreCountry: true` option if you are testing the banner from the US and force it to be shown to make sure it is working properly. Another option is to add `#didomi:notice.ignoreCountry=true` to the URL in your address bar to force the SDK to ignore the country on the page. Example: if your website is `https://www.mywebsite.com`, go to `https://www.mywebsite.com/#didomi:notice.ignoreCountry=true` and the notice should be displayed even if you are not in the EU. {% endhint %} ### Web based CTV application {% hint style="info" %} Make sure that the notice that you will set up has been marked as CTV type (rather than Web) on the Console. See for more information. {% endhint %} Add the following code to your Web based CTV app. We recommend embedding it directly in the source of your HTML pages as adding it through a tag manager would slow down the loading of the notice. ```html ``` {% hint style="info" %} You will need to replace `{{SDK-URL}}` with our default SDK URL: [`https://sdk.privacy-center.org/`](https://sdk.privacy-center.org/) or [use your own domain](https://developers.didomi.io/cmp/web-sdk/serve-didomi-assets-from-your-domain).\ \ You will also have to replace the `{{Your-API-Key}}` and `{{Notice-ID}}` parameters with your API key and your notice ID respectively. {% endhint %} Your website will automatically pull the latest configuration based on the notice ID provided. **Supported Web based CTV devices** {% hint style="info" %} Devices not included in the supported list are likely compatible. If you encounter any issues with notice rendering on an unsupported device, please contact our support team for assistance. {% endhint %} Below is the list of supported devices: * Tizen OS 3.0 and above * HbbTV 1.5 and above * webOS 4 and above ## Configure and interact with the SDK Once the SDK has loaded, you can call other functions on it to do consent management, send analytics events, etc. To make sure that you use the SDK when it is ready, you can register a global *didomiOnReady* array of functions that will get called when the SDK is done loading: {% tabs %} {% tab title="Plain JavaScript" %} ```javascript ``` {% endtab %} {% tab title="React" %} ```javascript onDidomiReady(didomi) { console.log('Didomi Ready'); // Call other functions on the SDK } ... ``` {% endtab %} {% endtabs %} The SDK exposes other events and functions to allow you to interact programmatically with the CMP. Read our [Reference](https://developers.didomi.io/cmp/web-sdk/reference) section for more information: {% content-ref url="reference" %} [reference](https://developers.didomi.io/cmp/web-sdk/reference) {% endcontent-ref %} ## Didomi Host Element The Didomi SDK automatically creates a `
` element with the ID `didomi-host`, where the SDK will render its content. By default, this element is appended at the end of the `` element of your webpage. ### **Customization Options** Although we recommend using the default setup, you can optionally create and manage the `didomi-host` element yourself if your project requires additional control over its configuration. For instance, you may want to adjust the text direction, add custom CSS classes, or modify attributes for accessibility or SEO purposes. Here is an example of how to manually define the host element: ```html
``` **Note:** Even if you manage the `didomi-host` element yourself, the SDK will control the following properties to ensure functionality and compliance: * **`data-nosnippet`**: Prevents Google from using the CMP UI in search results. * **`aria-hidden`**: Ensures the Didomi notice is correctly highlighted for screen readers, improving accessibility. #### **Best Practices** * If you customize the `didomi-host` element, ensure it is properly styled and positioned to avoid display issues. * Avoid removing or overriding the SDK-managed attributes (`data-nosnippet` and `aria-hidden`) to maintain compliance with SEO and accessibility guidelines. ## Configure vendors and purposes As per GDPR, the consent notice collects consents for a specific set of vendors and purposes. You must configure the notice to let it know what vendors are used on your website and it will automatically determine what purposes are required. This can be done from the [Didomi Console](https://console.didomi.io). While we interoperate with a lot of vendors through the IAB framework or direct integrations, vendors that do not fall into either of these buckets must be configured through our tag manager or your existing tag manager. Failure to do so will result in vendors not being correctly blocked as needed and you will not be compliant with data privacy regulations. Read our dedicated section to [learn how to configure your vendors](https://gitlab.com/didomi/developers-documentation/-/blob/main/docs/cmp/web-sdk/broken-reference/README.md). ## Add a link for the user to manage their preferences After the user has given consent or closed the banner, you must give them an easy access to their choices so that they can update them. You can use the function `Didomi.preferences.show()` to open the preferences manager and let the user update their choices. Example: {% tabs %} {% tab title="Plain JavaScript" %} ```javascript Consent preferences ``` {% endtab %} {% tab title="React" %} ```javascript onDidomiReady(didomi) { this.didomiObject = didomi; } ... ``` {% endtab %} {% endtabs %} We suggest adding this link to your privacy policy or in a header or footer menu on all of your pages. ## IAB frameworks Didomi supports the IAB Transparency and Consent Framework as well as the IAB CCPA frameworks. Read more in our documentation: {% content-ref url="third-parties/iab-frameworks" %} [iab-frameworks](https://developers.didomi.io/cmp/web-sdk/third-parties/iab-frameworks) {% endcontent-ref %}