Privacy hub widget implementation overview

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.

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 to see it in action.

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). 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.

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>

Last updated 1 month ago

Good evening

hashtagDeployment using the loader Script

hashtagDeployment using the base Script

hashtagHTML Layout + CSS Classes

Deployment using the loader Script

Deployment using the base Script

HTML Layout + CSS Classes