Collecter à partir du formulaire existant
- Nicolas Rueff
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 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 : vous pouvez prendre un formulaire existant ou suivre la procédure avec un formulaire HTML basique.
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');
})
}
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() :
<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...).