How to deploy our Privacy hub widget?

In this documentation, we will guide you on how to use the script that allows you to deploy the Privacy Hub widget. If you'd like to see the widget in action, you can check it out on didomi.io. Here's how it looks:

Capture d’écran 2023-06-12 à 16.39.17

The script can be used on any website to load the widget. It allows you to customize the links of your widget and apply your own style to it.

There are two ways to deploy the Privacy Hub widget:

the loader script: it simplifies the process by loading the stylesheets automatically, requiring you to manually load only one file in your HTML.
the base script: you have to manually load the stylesheets yourself.

OPTION 1: Configuring the widget through the loader Script

If you're using the loader script to load the widget, you can configure it using the privacyHubWidgetConfig property in the window object. This property is an object with the following options:

elementSelector: Specifies where the widget will appear.
overrideStylesheetUrl: A URL for a stylesheet that overrides some of the default styles, but not all.
baseStyleSheetUrl: Your own URL for a custom set of styles if you want full control over the widget's appearance. If not set, it will default to the base styles, see here.
options: An array of objects representing the options that appear when you click the widget. Each option has a name and a link.

For reference: the path of the script that is being loaded is here.

Example of the loader script being used:

<html>
<head>
    <title>Home</title>
    <script>
        window.privacyHubWidgetConfig = {
            elementSelector: "body",
            baseStyleSheetUrl: "./privacy-hub-widget-base-style-sheet.css",
            customStyleSheetUrl: "./privacy-hub-widget-style-sheet.css",
            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 }
            ]
        }
    </script>    
    <script src="./privacy-hub-widget-loader.js"></script>
</head>
</html>

OPTION 2: Configuring the widget through the base Script

The privacy-hub-widget.js file exports an object (also creates a window property called privacyHubWidget) with the following properties:

init(elementSelector = "", options = []): Use this function to set up the widget. You can provide the element selector where it should appear and an array of objects for the options that show up when the widget is clicked.
createOptions(options = []): An internal function that creates elements and assigns class names to the widget's options.
createPrivacyHubButton(): Another internal function that creates elements and assigns class names to the widget's button.

HTML Layout + CSS Classes

Below is the HTML structure created by the script, along with the corresponding CSS classes. It can be used as a reference to override or extend the existing base styles.

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