Consent Database – Documentation JS

Pour installer le widget JS de la Consent Database, insérez votre code Consent Database dans chaque page de votre site, avant de fermer la balise HEAD (voir l’exemple de code ci-dessous).

<script type="text/javascript">
    var _iub = _iub || {};
    _iub.cons_instructions = _iub.cons_instructions || [];
    _iub.cons_instructions.push(["init", {api_key: "YOUR_PUBLIC_API_KEY"}]);
</script>
<script type="text/javascript" src="https://cdn.iubenda.com/cons/iubenda_cons.js" async></script>

*La clé API est un code unique que le SDK utilise pour communiquer avec le point de terminaison de notre API. Votre clé API (affichée sous la forme « YOUR_PUBLIC_API_KEY » dans l’exemple ci-dessus) est générée par nos soins lors de l’activation de la Consent Database et est spécifique à ce site web en particulier.

La fonction init (incluse dans le script de configuration ci-dessus) définit la manière dont la bibliothèque est instanciée et est requise sur chaque page qui implémente le widget Consent Database.

Il est possible d’ajouter une fonction de rappel comme deuxième paramètre de la fonction init. La fonction de rappel sera ensuite appelée une fois que la bibliothèque aura été chargée.

La configuration de la fonction init de cette manière (en ajoutant une fonction de rappel – voir « YOUR_CALLBACK » dans l’exemple ci-dessous) peut être utilisée pour définir des actions supplémentaires après le chargement de la bibliothèque.

_iub.cons_instructions.push(["init", {
    api_key: "YOUR_PUBLIC_API_KEY"},
    function YOUR_CALLBACK() {
        //the library has been loaded
        ...
        //put you code here
    ...
    }
]);

Voici les paramètres que vous pouvez utiliser dans l’objet de configuration init (c’est-à-dire le premier paramètre de la fonction init qui contient la clé API) pour personnaliser, par exemple, le logger ou le comportement de la bibliothèque.

Voir le tableau et l’exemple de code ci-dessous:

// Un exemple de configuration avec des paramètres optionnels ajoutés (note : le paramètre api_key est toujours requis)

_iub.cons_instructions.push(["init", {
    api_key: "YOUR_PUBLIC_API_KEY",
    logger: "console",
    log_level: "warn",
    sendFromLocalStorageAtLoad: false
}, ...]);

Afin d’enregistrer automatiquement les consentements fournis via un formulaire de soumission, vous pouvez utiliser la fonction loadou submit.

3.1 load

La fonction load vous permet de lier des champs de l’objet consent à des champs de saisie de votre

<form>
    <!-- Your form input fields -->
    <input type="submit" id="submit-btn" name="submit-button" />
</form>
<script type="text/javascript">
    _iub.cons_instructions.push([ * "load" * ,
        {
            submitElement: "submit-btn", // if this line is missing, the consent is not automatically recorded at submit time; a call to _iub.cons.sendData (see section below) is needed instead
            form: {
                ...your form object
            },
            consent: {
                legal_notices: [{
                    identifier: "term",
                    version: "1"
                }]
            }
        }
    ])
</script>

// your form handler function
function validateForm() {
    if (isValidForm()) {
        // the form has been validated
      _iub.cons.sendData();
      // ...
     }
}

_iub.cons.sendFromLocalStorage()

_iub.cons_instructions.push(["submit",
{
    form: {"... your form object"},
    consent: {
      legal_notices: [{
        identifier: "term",
        version: "1"
      }]
    }
},
{
    success: function(response) {
      console.log(response);
    },
    error: function(response) {
      console.log(response);
    }
}
])

_iub.cons_instructions.push(["submit",
  {
    consent: {
      subject: {
        id: "your-subject-id",
        email: "your-subject-email0@example.com"
      },
      preferences: {
        term: true
      },
      legal_notices: [
        {
          identifier: "privacy_policy"
        }
      ],
      proofs: [
        {
          content: "{ \"first_name\": \"John\", \"last_name\": \"Doe\", \"email\": \"john@example.com\" }"
          form: "<form action=\"/action\" method=\"POST\"><p><label>First Name</label><input type=\"text\" name=\"first_name\" /></p><p><label>Last name</label><input type=\"text\" name=\"last_name\" /></p><p><label>E-mail</label><input type=\"email\" name=\"email\" /></p><input type=\"submit\" /></form>"
        }
      ]
    }
  },
  {
    success: function(response) {
      console.log(response);
    },
    error: function(response) {
      console.log(response);
    }
  }
])

200 OK
{
    id: "de801ca9-abec-45e2-8f7c-729822cfffad",
    timestamp: "2018-05-04T14:52:26Z",
    subject_id: "J02eZvKYlo2ClwuJ1"
}

Si vous voulez mettre en place votre objet consent de manière programmée et l’envoyer à l’API de la Consent Database, vous devrez utiliser la fonction submit décrite précédemment dans 3.2.2 Lorsque l’objet du formulaire n’est pas fourni.

Il s’agit de la structure de l’objet form transmis aux fonctions load et submit :

5.1 Lier les champs du formulaire à votre objet de consentement

Les champs du formulaire peuvent être liés à votre objet consent de deux manières:

1) En spécifiant l’attribut namepertinent dans l’objet MAP (veuillez noter qu’il n’est pas possible d’utiliser id ici, seulement l’attribut name) :

form: {
    selector: "form-id", // La chaîne de caractères (ID) ou l'élément DOM du formulaire depuis lequel les données doivent être détectées
    map: { // optionnel : cartographier les attributs consentement directement dans les
        // attributs saisis "name" correspondants, plutôt que les attributs data-cons-x
        subject: {
            id: "id-element-name"
            email: "email-element-name",
            first_name: "first-name-element-name",
            last_name: "last-name-element-name",
            full_name: "full-name-element-name"
        },
        preferences: {
            term: "terms-checkbox-element-name"
        }
    }
}

2) En utilisant des attributs data-cons-x dans votre champ de saisie:

<form id="form-id">
    <!-- subject -->
    <input type="..." name="subject_name" data-cons-subject-name />

    <input type="hidden" name="id" value="12141412" *data-cons-subject="id" * />
    <p>
        First name:<br />
        <input type="text" value="value" name="first_name" *data-cons-subject="first_name" * />
    </p>
    <p>
        Last name:<br />
        <input type="text" name="last_name" *data-cons-subject="last_name" * />
    </p>
    <p>
        Full Name:<br />
        <input type="text" name="full_name" *data-cons-subject="full_name" * />
    </p>
    <p>
        Email<br />
        <input type="text" name="email" *data-cons-subject="email" * />
    </p>
    <p>
        Password<br />
        <input type="password" name="password" *data-cons-exclude* />
    </p>

    <!-- preferences -->
    <p>
        <label><input type="hidden" name="terms-and-conditions" data-cons-preference="terms-and-conditions" value="value" />
            Accept terms and conditions</label>
    </p>
    <p>
        <label><input type="hidden" name="newsletter" value="newsletter" data-cons-preference="newsletter" /> newsletter</label>
    </p>
    <input type="submit" id="submit-btn" />
</form>

Vous pouvez également exclure certains champs (par exemple le mot de passe ou les champs non liés au consentement) de deux manières :

1) En utilisant data-cons-exclude dans votre champ de saisie:

<input type="password" name="password" data-cons-exclude />

2) En utilisant l’objet exclude à l’intérieur de la cartographie :

map: {
    .
    .
    // exclure des champs en insérant des noms de saisie dans ce champ
    exclure : ['password']
}

L’objet consent est composé des champs suivants :

Remarque: dans la bibliothèque JS, toutes les propriétés doivent être spécifiées à l’intérieur de l’objet consent. Exemple :

consent: {
  subject: {
    id: "your-subject-id",
    email: "your-subject-email0@example.com"
  },
  preferences: {
    term: true
  },
  legal_notices: [
    {
      identifier: "privacy_policy"
    }
   ]},
   proofs: [
    {
      content: "{ \"first_name\": \"John\", \"last_name\": \"Doe\", \"email\": \"john@example.com\" }"
      form: "<form action=\"/action\" method=\"POST\"><p><label>First Name</label><input type=\"text\" name=\"first_name\" /></p><p><label>Last name</label><input type=\"text\" name=\"last_name\" /></p><p><label>E-mail</label><input type=\"email\" name=\"email\" /></p><input type=\"submit\" /></form>"
    }
   ]
}

Si vous utilisez iubenda pour vos documents juridiques, nous mettrons automatiquement à jour le contenu de legal_noticespour vous dès que vos documents juridiques seront modifiés. Vous pouvez lire comment activer cette fonctionnalité ici.

Cependant, il est toujours nécessaire de déclarer quelles legal_noticessont acceptées lors de chaque obtention du consentement, donc si vous utilisez ces dernières, vous devez remplir le tableau legal_notices avec l’identifiant et la version de vos informations légales créées au préalable.

Exemple :

consent: {
  legal_notices: [
    {
      identifier: "privacy_policy",
      version: "1" // auto-filled if not provided
    },
    {
      identifier: "another_legal_notice"
    },
    ...
  ]
}

Vous trouverez ci-dessous quelques exemples pour mettre en place la Consent Database.

8.1 MAP feature

Fonction load

Voir le fichier Pen [Iubenda Cons] (async) Load function par iubenda (@iubenda) sur CodePen.

Fonction de chargement avec Map (sans attribut de données)

Voir le fichier Pen [Iubenda Cons] (async) Load Function and Map option par iubenda (@iubenda) sur CodePen.

8.2 Mise en place de l’envoi (async)

Voir le fichier Pen [Iubenda Cons] (async) Submit implementation par iubenda (@iubenda) sur CodePen.

8.3 Mise en place de plusieurs formulaires

Voir le fichier Pen [Iubenda Cons] (async) Multiple Form implementation par iubenda (@iubenda) sur CodePen.

8.4 Outils de validation externes (fonction Load avec validate.js)

Voir le fichier Pen [Iubenda Cons] (async) fonction load with validate.js par iubenda (@iubenda) sur CodePen.