# Aperçu de l’implémentation du widget de centre de confidentialité

{% hint style="info" %}
Actuellement, le widget Privacy Hub **n'a pas d'analyses dédiées**. Toutes les données collectées via le Privacy Hub seront intégrées sans distinction dans le cadre analytique existant, qui comprend des métriques telles que les affichages d'avis, les enregistrements de consentement et les préférences des utilisateurs.
{% endhint %}

Ce guide fournit des instructions détaillées sur le déploiement du widget Privacy Hub à l'aide d'un script fourni. Pour une démonstration en direct du widget, visitez [didomi.io](https://www.didomi.io/) pour le voir en action.

![Capture d’écran 2024-01-30 à 09.33.51](https://1244787492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNDxbAdc00ce6bH5u1urh%2Fuploads%2F9BS1dhpggSzoEWQFk8NP%2FCapture%20d%E2%80%99e%CC%81cran%202024-01-30%20a%CC%80%2009.33.51.webp?alt=media\&token=529aafa4-8318-423c-9062-902ae47f58a0)

Le script est polyvalent, permettant une intégration sur n'importe quel site web. Il offre des options de personnalisation pour les **liens du widget** et **le style**, garantissant qu'il s'aligne sur l'esthétique de votre site.

Il existe deux méthodes pour implémenter le widget Privacy Hub :

* **Script Loader** : Cette approche simplifie le déploiement en incorporant automatiquement les feuilles de style nécessaires. Vous n'avez qu'à intégrer un seul fichier dans votre HTML.
* **Script de base** : Cette méthode nécessite que vous intégriez manuellement les feuilles de style.

### Déploiement en utilisant **le Script loader**

Pour déployer le widget avec le script loader, configurez-le via la `privacyHubWidgetConfig` propriété de l'objet window. Cet objet de configuration comprend :

* `elementSelector` : Détermine l'emplacement du widget sur votre site.
* `stylesheet` : Un lien vers une feuille de style entièrement personnalisée pour un contrôle total du design. Si non spécifié, le widget utilise des styles par défaut (détails disponibles [ici](https://gitlab.com/-/snippets/3691778)). Si cette propriété est définie, la propriété style sera ignorée.
* `options` : Une liste d'objets détaillant les options cliquables du widget, chacune avec un nom et un lien.
* `style` : Une liste d'objets, chacun avec des propriétés destinées à ajuster l'apparence du widget (option recommandée).
* `widgetSrc` : Une URL du script du widget à charger.

Pour référence : le chemin du script qui est chargé est [ici](https://gitlab.com/-/snippets/3691778).

**Exemple d'utilisation du script loader**:

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

### Déploiement en utilisant **le Script de base**

Le `privacy-hub-widget.js` le script exporte un objet (et crée une `window.privacyHubWidget` propriété) avec des fonctions pour la configuration du widget :

* `init(elementSelector = "", options = [])` : Initialise le widget. Spécifiez le sélecteur pour l'emplacement du widget et les options à afficher lors de l'interaction.
* `createOptions(options = [])` : Une fonction utilitaire pour générer les options cliquables du widget.
* `createPrivacyHubButton()` : Une fonction pour créer le bouton du widget.

#### Disposition HTML + classes CSS

Le script génère une structure HTML spécifique (voir ci-dessous) avec des classes CSS associées. Cette structure sert de référence pour personnaliser ou étendre les styles de base afin de mieux correspondre au design de votre site web.

```
<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">
                    Confidentialité
                </span>
                <span class="privacy-hub__button-subtitle">
                    Hub
                </span>
            </div>
        </button>
    </div>
</div>
```
