Page Comparison

Apprenez à intégrer un formulaire de collecte de consentements dans un formulaire HTML existant qui traite des informations personnelles.

• Démarrer une image docker locale pour héberger un formulaire HTML pour la collecte d'informations personnelles.

• Définir le traitement spécifique et les préférences pour les données collectées dans le Backoffice de Right Consent

• Tester le formulaire de consentement généré jusqu'au résultat souhaité

• Intégrer le SDK Javascript dans le formulaire HTML

• Consulter et exporter les consentements collectés

Dans ce guide, vous apprendrez à utiliser le SDK pour intégrer Consent Collect dans un formulaire HTML en ligne existant.

...

N'oubliez pas d'activer chaque modèle !

Créer un

...

formulaire HTML​

Le cas d'utilisation de base ici est de recueillir le consentement des utilisateurs avant de collecter leurs données.

Nous avons besoin d'un formulaire HTML pour y connecter le SDK , donc : vous pouvez soit prendre un formulaire existant dans votre projet personnel, soit ou suivre la procédure avec un formulaire HTML basique.

Ce formulaire HTML peut être servi en utilisant docker ou docker-compose

$ docker run --name apache -v /path/to/consent-example:/app bitnami/apache:latest -p 1180:1180

ou

$ docker-compose up -d

Une fois le conteneur Docker opérationnel, rendez-vous sur cette page.

Intégrer le SDK Javascript dans le formulaire HTML​

...

Vous devrez d'abord importer le fichier script dans votre fichier HTML comme suit :

<!-- With consent.js stored locally -->
<script src="/path/to/consent.js"></script>
<!-- With consent.js from Fair&Smart CDN -->
<script src="https://assets.fairandsmart.tech/consent.js"></script>

Ensuite, écrivez une fonction qui appelle le collecteur de consentement. Cette fonction doit déclarer une nouvelle instance FairAndSmart.ConsentCollector et appeler la méthode collect() de l'objet ConsentCollector :

 function collect() {

    /** Page is awaiting the response from the consent window: disabling submit button **/
    const submitBtnElement = document.getElementById('submit');
    const formElement = document.getElementById('demo-form');
    const message = document.getElementById('message');
    const subject = document.getElementById('input-email').value;

    submitBtnElement.setAttribute('disabled', 'true');

    /** Collect objet creation */
    const consentCollector = new FairAndSmart.ConsentCollector({
        tokenBrokerEndpoint: 'http://localhost:3001/profile/form',
        consentContext: {
            subject: subject,
            author: subject,
            origin: "WEBFORM",
            confirmation: "NONE",
            language: "en",
            userinfos: {},
            validity: "P6M",
            layout: "layout.001"
        },
        mode: 'window'
    });

    /** Consent collection can begin **/
    consentCollector.collect()
        .then(() => {
            /** Sucess callback: collect is done */
            submitBtnElement.classList.add('hidden');
            formElement.classList.add('hidden');
            message.classList.remove('hidden');
            /** We can check the collect reponse here */

        })
        .catch((err) => {
            /** Error callback, something went wrong. Reset button to retry the consent collect */
            console.error(err);
            submitBtnElement.setAttribute('disabled', 'false');
        })
}

Enfin, créez un bouton dans votre formulaire HTML qui appellera la fonction collect() :

<button id="submit" class="submit-btn" onclick="collect()">Send</button>

...