Consent Modal PDI

Overview

This is the consent modal

Getting started

Install package

Install this package:

npm install consent-modal-web-component

pnpm add consent-modal-web-component

Import and use consent modal

Import the consent modal script:

<script src="./node_modules/consent-modal-web-component/modal.js"></script>

Use the consent modal html tag:

<consent-modal></consent-modal>

Consent modal props:

You have four props for the consent modal: - data-privacyNoticeEndpoint: path of the privacy notice end point - data-userIdentifier: the current user identifier - data-demo: if the demo set has "true", show a consent modal with default value - data-branding: object stringify for custom modal branding

<consent-modal
    id="consent-modal"
    data-privacyNoticeEndpoint="pathOfThePrivacyNoticeEndpoint"
    data-userIdentifier="userIdentifier"
    data-demo="true"
></consent-modal>

You can set your custom branding:

    const consentModal = document.getElementById("consent-modal");
    const branding = {
    img: {
        src: "YOUR IMG SRC"
        alt: "YOUR IMG ALT",
    },
    colors: {
        primary: "#00A2AE",
        secondary: "#17243F",
        tertiary: "#08FFAD",
        quaternary: "#DBFFAA",
        gradient: "linear-gradient(to right, #DBFFAA, #00A2AE, #08FFAD)", // This is the background header
        bgOpacity: "#08FFAD1f",
    },
    };
    consentModal.setAttribute("data-branding", JSON.stringify(branding));

You can have a custom button for open the consent modal:

<consent-modal>
    <button slot="buttonOpenModal">Custom button</button>
</consent-modal>