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