# Privacy hub widget implementation overview

{% hint style="info" %}
Currently, the Privacy Hub widget **does not have dedicated analytics**. Any data gathered through the Privacy Hub will be integrated without distinction into the existing analytics framework, which includes metrics such as notice displays, consent records, and user preferences.
{% endhint %}

This guide provides detailed instructions on deploying the Privacy Hub widget using a provided script. For a live demonstration of the widget, visit [didomi.io](https://www.didomi.io/) to see it in action.

<img src="/files/QuO6NOuqeGkW47GXJZ5v" alt="Capture d’écran 2024-01-30 à 09.33.51" width="516">

The script is versatile, allowing integration onto any website. It offers customization options for your **widget's links** and **styling**, ensuring it aligns with your site's aesthetic.

There are two methods to implement the Privacy Hub widget:

* **Loader Script**: This approach streamlines deployment by automatically incorporating the necessary stylesheets. You only need to embed a single file into your HTML.
* **Base Script**: This method requires you to manually integrate the stylesheets.

### Deployment using **the loader Script**

To deploy the widget with the loader script, configure it via the `privacyHubWidgetConfig` property in the window object. This configuration object includes:

* `elementSelector`: Defines the widget's placement on your site.
* `stylesheet`: A link to a completely custom stylesheet for full design control. If unspecified, the widget uses default styles (details available [here](https://gitlab.com/-/snippets/3691778)). If this property is defined the style property will be ignored.
* `options`: A list of objects detailing the widget's clickable options, each with a name and a link.
* `style`: A list of objects, each with properties designed to tweak the widget's appearance (recommended option).
* `widgetSrc`: An URL of the widget’s script to be loaded.

For reference: the path of the script that is being loaded is [here](https://gitlab.com/-/snippets/3691778).

**Example of loader script usage**:

```
<html>  
<head>  
    <title>Home</title>  
    <script>  
        window.privacyHubWidgetConfig = {  
            elementSelector: "body",
            options: [  
                {
                    name: "Security", 
                    link: "<https://www.didomi.io/security>" },  
                {
                    name: "Cookie Policy", 
                    link: "<https://www.didomi.io/cookie-policy>" },  
                {
                    name: "Privacy Policy", 
                    link: "<https://www.didomi.io/privacy-policy>" 
                },
                {
                    name: "My Preferences", 
                    link: "<https://didomi-marketing-preferences.preference-center.org/>",
                    target: "_blank" 
                },
                {
                    name: "Consent choices", 
                    link: "javascript:Didomi.preferences.show()", target: null 
                }
            ],
            style: {
                            button_container: {
                                background: "fuchsia",
                                background_hover: "purple",
                                box_shadow: "0px 8px 9px -3px #000000"
                            },
                            button: {
                                background_color: "red",
                                text_color: "blue"
                            },
                            button_inner_container: {
                                background: "green",
                                background_hover: "pink"
                            },
                            title: {
                                text_transform: "lowercase",
                                font_family: "Comic Sans MS",
                                font_size: "11px",
                                font_weight: "100",
                                margin: "-4px",
                                color: "red"
                            },
                            subtitle: {
                                text_transform: "",
                                font_family: "",
                                font_size: "",
                                font_weight: "",
                                margin: "",
                                color: "red"
                            },
                            list_item: {
                                font_family: "Comic Sans MS",
                                font_size: "11px",
                                font_weight: "200",
                                color: "red",
                                background_color: "green",
                                background_hover: "grey"
                            }
                        }
        }
    </script>      
    <script src="./privacy-hub-widget-loader.js"></script>  
</head>  
</html>
```

### Deployment using **the base Script**

The `privacy-hub-widget.js` script exports an object (and creates a `window.privacyHubWidget` property) with functions for widget setup:

* `init(elementSelector = "", options = [])`: Initializes the widget. Specify the selector for the widget's location and the options to be displayed upon interaction.
* `createOptions(options = [])`: A utility function for generating the widget's clickable options.
* `createPrivacyHubButton()`: A function for creating the widget's button.

#### HTML Layout + CSS Classes

The script generates a specific HTML structure (see below) with associated CSS classes. This structure serves as a reference for customizing or extending the base styles to better match your website's design.

```
<div class="privacy-hub">
    <ul class="privacy-hub__options privacy-hub__options--hidden">
        <li class="privacy-hub__options-item">
            <a class="privacy-hub__options-link" href="https://www.mordor.com/">
                Mordor
            </a>
        </li>
        ...
    </ul>
    <div class="privacy-hub__button-container">
        <button class="privacy-hub__button" type="button">
            <div class="privacy-hub__button-inner">
                <span class="privacy-hub__button-title">
                    Privacy
                </span>
                <span class="privacy-hub__button-subtitle">
                    Hub
                </span>
            </div>
        </button>
    </div>
</div>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.didomi.io/consent-management-platform-cmp/introduction/privacy-hub-widget-implementation-overview.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
