Collecter à partir du formulaire existant

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.

Ce guide couvre également certains aspects fondamentaux de l'élaboration d'un formulaire de consentement pour certains traitements et préférences souhaités.

Guide d'intégration du SDK​

Créer les modèles​

Tout d'abord, définissez les processus, les préférences ou les conditions que vous souhaitez utiliser. Le corps des conditions générales prend en charge le format HTML, mais du texte simple fera l'affaire.

Vous devrez également créer un modèle d'information, en particulier si vous avez l'intention d'utiliser des traitements.

Vous pouvez créer un modèle de courrier électronique si vous souhaitez envoyer un reçu de consentement à vos utilisateurs. Ce n'est pas obligatoire. Là encore, certains champs supportent aussi bien le HTML que le texte brut.

Si vous avez de bonnes connaissances en CSS, vous pouvez jouer avec un modèle de thème pour personnaliser l'apparence de votre formulaire, sinon le thème par défaut sera appliqué. Même si les CSS sont un mystère pour vous, n'hésitez pas à créer un thème simplement pour enregistrer votre propre logo qui apparaîtra dans vos formulaires, reçus et courriels.

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

Créer un fichier 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 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​

À ce stade, vous disposez d'un simple formulaire HTML, avec quelques éléments de saisie qui peuvent être remplis avec des données personnelles, par exemple.

L'étape suivante consiste à connecter ce formulaire au SDK et au ConsentCollector. Il créera un formulaire de consentement basé sur un identifiant de sujet (en gros, un numéro de téléphone, une adresse électronique...) et un contexte de consentement.

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>

Tester, valider et générer un consentement​

Une fois que tout est configuré, vous êtes prêt à tester la collecte de consentement.

Rendez-vous sur la page web suivante, remplissez le formulaire et cliquez sur le bouton "Soumettre" en bas de la page.

Une fenêtre contextuelle apparaîtra avec le formulaire de consentement souhaité. Soumettez vos préférences, vos traitements et/ou les conditions générales de votre choix en cliquant sur le bouton "Soumettre".

Vous avez joint un collecteur de consentement à un formulaire HTML existant. En outre, vous avez créé un enregistrement de consentement qui peut être accessible à partir du backoffice.

Consulter les consentements recueillis via le back-office​

La dernière étape, afin d'accéder aux enregistrements de consentement créés à l'aide du formulaire, est d'aller dans l'interface graphique / Back Office sous la page Intégration > Recherche.

Ici, vous pouvez accéder aux enregistrements de consentement générés par les utilisateurs et les filtrer par entrée et entrée de valeur comme suit :

Cliquez ensuite sur Rechercher, une liste de consentements s'affichera dans un tableau.

A partir de là, vous pouvez exporter tous les enregistrements de consentement générés en cliquant sur le bouton d'exportation :

Un fichier .CSV sera créé, contenant toutes les informations liées à l'enregistrement du consentement de l'utilisateur (clé de l'enregistrement, valeur de l'enregistrement, adresse électronique...).