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
Code Block |
---|
$ docker run --name apache -v /path/to/consent-example:/app bitnami/apache:latest -p 1180:1180 |
ou
Code Block |
---|
$ 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 :
Code Block | ||
---|---|---|
| ||
<!-- 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> |
Info |
---|
Pour en savoir plus sur la configuration et l'intégration du SDK, cliquez ici. |
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 :
Code Block | ||
---|---|---|
| ||
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'); }) } |
Info |
---|
Remarque : L'**identifiant du sujet ** est récupéré à partir de l'entrée de l'email, il peut s'agir d'un autre identifiant tel qu'un numéro de téléphone, un identifiant unique de votre plateforme... |
Enfin, créez un bouton dans votre formulaire HTML qui appellera la fonction collect() :
Code Block | ||
---|---|---|
| ||
<button id="submit" class="submit-btn" onclick="collect()">Send</button> |
...