Formulaires
Consent.js fournit des intégrations de scénarii complets de collecte de consentement de de données en Javascript, compatible avec n’importe quel navigateur web ou mobile.
ConsentCollector
Ce scénario permet la collecte d’un ensemble de traitement et de préférences dans un workflow existant.
Avec Consent.js
<html>
<head>
<script src="https://assets.fairandsmart.tech/consent.js"></script>
</head>
<body>
<button onclick="collect()">Collecter le consentement</button>
<script>
function collect() {
const consentCollector = new FairAndSmart.ConsentCollector({
tokenBrokerEndpoint: 'https://proxy-consent.yourdomain.com/profile/form', // Il s'agit de l'URL à partir de laquelle vous allez générer un token de transaction de consentement.
consentContext: {
subject: 'YOUR USER ID', // L'identifiant unique de l'utilisateur. A vous d'implémenter une solution authentifiée si nécéssaire.
author: 'YOUR USER ID', // L'identifiant unique de l'utilisateur. A vous d'implémenter une solution authentifiée si nécéssaire.
origin: "WEBFORM", // WEBFORM indique que l'utilisateur aura interagit directement avec le formulaire
confirmation: "NONE", // Si le workflow doit demander une confirmation (email, sms, etc.) pour la validation du consentement.
language: "fr", // Le langage de collecte
userinfos: {}, // Des informations supplémentaires que vous voulez envoyer à propos de l'utilisateur
validity: "P6M", // Période de validité au format DateInterval
layout: "layout.001" // Il s'agit de l'identifiant d'un Formulaire que vous avez défini dans notre backoffice
},
mode: 'window' // Le mode d'affichage de la fenêtre de consement. 'window' ou 'iframe'.
});
consentCollector.collect() // Lance la collecte du consentement (asynchrone).
.then(() => {
// La collecte s'est bien passée et est terminée.
})
.catch((err) => {
// gérer les erreurs.
});
}
</script>
</body>
</html>Avec @fairandsmart/consent-manager
import { ConsentCollector } from '@fairandsmart/consent-manager';
function collect() {
const consentCollector = new ConsentCollector({
tokenBrokerEndpoint: 'https://proxy-consent.yourdomain.com/profile/form', // Il s'agit de l'URL à partir de laquelle vous allez générer un token de transaction de consentement.
consentContext: {
subject: 'YOUR USER ID', // L'identifiant unique de l'utilisateur. A vous d'implémenter une solution authentifiée si nécéssaire.
author: 'YOUR USER ID', // L'identifiant unique de l'utilisateur. A vous d'implémenter une solution authentifiée si nécéssaire.
origin: "WEBFORM", // WEBFORM indique que l'utilisateur aura interagit directement avec le formulaire
confirmation: "NONE", // Si le workflow doit demander une confirmation (email, sms, etc.) pour la validation du consentement.
language: "fr", // Le langage de collecte
userinfos: {}, // Des informations supplémentaires que vous voulez envoyer à propos de l'utilisateur
validity: "P6M", // Période de validité au format DateInterval
layout: "layout.001" // Il s'agit de l'identifiant d'un Formulaire que vous avez défini dans notre backoffice
},
mode: 'window' // Le mode d'affichage de la fenêtre de consement. 'window' ou 'iframe'.
});
consentCollector.collect() // Lance la collecte du consentement (asynchrone).
.then(() => {
// La collecte s'est bien passée et est terminée.
})
.catch((err) => {
// gérer les erreurs.
});
}
DataCollector
Nécessite d’avoir souscrit à l’offre Right Data
Ce scénario permet la collecte de données chiffrées de l’utilisateur. A partir d’une configuration de schéma (définis dans notre backoffice dans Right Data > Schémas), un formulaire de données sera généré et remplacement une balise de votre page HTML.
Une fois que l’utilisateur aura rempli les données, et que vous aurez effectué les traitements voulus, les données seront chiffrées puis envoyées sur nos serveurs sécurisés. Vous pourrez les consulter depuis notre backoffice et effectuer des opérations supplémentaires selon vos offres.
Avec Consent.js
<html>
<head>
<script src="https://assets.fairandsmart.tech/consent.js"></script>
</head>
<body>
<form id="myform"></form>
<script>
const dataCollector = new FairAndSmart.DataCollector({
dataCreationEndpoint: 'http://proxy-fs.domain.com/data/form', // L'URL où seront envoyées les données. Voir la section "proxy" pour plus d'informations.
elementId: 'my-form', // L'id de la balise HTML à remplacer
schemaName: 'Contact', // Le nom du schéma à utiliser (voir backoffice)
schemaPrefix: 'sncfreseau', // Le préfixe du schéma (voir backoffice)
userFieldId: 'e58d6366-4608-4d87-a1f5-da0826e13158', // L'identifiant (issu du schéma) du champ à utiliser en tant qu'identifiant de l'utilisateur
dataSentTemplate: `<strong>Vos informations ont bien été envoyée avec votre consentement !</strong>` // Le template HTML qui remplacement le formulaire une fois celui-ci envoyé.
});
dataCollector.render(); // Remplace la balise <form> avec le formulaire généré.
/** Ici on utilise la puissance de rxjs pour suivre l'avancement de la collecte des données. */
dataCollector.onSend().pipe(
mergeMap((dataStore) => {
/** Si le code ici s'exectute, c'est que l'utilisateur a cliqué sur "Envoyer" et qu'un DataStore a été créé.
* Effectuez les actions que vous souhaitez avant d'envoyer les données sur nos serveurs.
*/
return dataCollector.pushData();
})
).subscribe({
next: () => { /** Callback de succès : les données ont bien été envoyées */ },
error: (err) => { /** Callback d'erreur : gérez l'erreur ici */ };
});
</script>
</body>
</html>Avec @fairandsmart/consent-manager
dataCreationEndpoint : TO DETAIL
userFieldId : TO DETAIL
ConsentFormWrapper
Nécessite d’avoir souscrit à l’offre Right Data