Vous êtes en charge de l’intégration d'Axeptio ?

Faites vous la main en quelques minutes en parcourant notre documentation technique !

1. Intégration

Le SDK peut être chargé dans la balise `<head>` ou ajouté avant la fermeture de la balise `</head><body>`. Pour de meilleures performances, nous vous conseillons d'opter pour la deuxième méthode, qui permet au script de démarrer le parsing des éléments de la page au plus tôt.</body>
<script type="application/javascript">
    window.axeptioSettings={clientId: '5ab8ff825002ac4d6998c7bb'};
    (function(d){
      var s = d.createElement('script');
      s.src = 'https://platform.axept.io/embed.js';
      s.async = true;
      d.body.append(s);
    })(window.document);
</script>	

2. Comment ça marche ?  

Le rôle du SDK est d'assurer la communication entre votre page et les formulaires de recueil de consentement Axeptio, affichés au sein des balises `<iframe>`. </iframe>
Le SDK est en charge :
* l'identification de toutes les cases-à-cocher à remplacer
* la création des balises `<iframe>` et le masquage des balises `<input type="checkbox">`</iframe>
* l'échange de données et la mise à jour de l'état de la case-à-cocher dans votre page
* le redimensionnement des `<iframe>` en fonction de la taille de la page (adaptation responsive), grâce à l'API `window.postMessage`</iframe>
* l'écrasement des formulaires Axeptio et la remise à zéro.

Lors du chargement de la page, si une propriété `axeptioSettings` a été déclarée sur l'objet `window` et qu'elle contient, au moins, la propriété `clientId` (comme c'est le cas dans l'exemple d'intégration plus haut), le script va instancier la fonction `Axeptio` et appeler la méthode d’initialisation.

3. Intégrer un formulaire de recueil de consentement  

Pour ajouter une case à cocher Axeptio à votre page, il vous faut ajouter une balise `<input type="checkbox">` en précisant un attribut `data-axeptio` contenant l'identifiant de la case  à cocher.Cet identifiant peut être retrouvé (et modifié) dans l'interface d'administration d'Axeptio

À noter : tous les autres attributs, comme `id`, `class`, ou `name` sont sans impact sur le SDK Axeptio. L'attribut name, en particulier, vous permet de récupérer l'information d'acceptatio en form-data, comme si la case à cocher était native.  
<form action="contact.php">
  <div>
     <label>e-mail</label>
     <input type="email" name="email"/>
  </div>
  <div>
      <label>message</label>
      <textarea name="message"></textarea>
  </div>
  <div>
      <!-- Exemple de case à cocher Axeptio -->
      <input type="checkbox" name="newsletter" data-axeptio="newsletter"/>
  </div>
</form>

4. Le token utilisateur

Les consentements Axeptio sont rattachés à un individu par un identifiant pivot anonyme que nous appelons "token". Vous pouvez choisir de laisser Axeptio générer cet identifiant, dans ce cas vous recevrez le token dans le formulaire contenant la case à cocher Axeptio en plus de l'information de consentement. Il vous faudra alors l'enregistrer dans votre base de données en l'associant à la fiche de votre utilisateur (par ex. en rajoutant une colonne axeptio_token à votre table utilisateur).

Si la propriété `token` n'est pas spécifié dans l'objet `window.axeptioSettings`, le SDK va appeler l'API Axeptio pour en générer un, de manière aléatoire. La valeur du token est propagé à travers l'écouteur spécifié dans l'objet `axeptioSettings` s'il est présent.
window.axeptioSettings={
  clientId: '5ab8ff825002ac4d6998c7bb',
  onToken: function(token){
      myApp.getUser().setProperty('axeptioToken', token);
  }
};
	
Vous pouvez sinon spécifier un token de votre choix, correspondant par exemple à l'identifiant unique dans votre base de donnée. Dans les deux cas, lorsque l'utilisateur se connectera sur une page contenant Axeptio, il faudra spécifier le token dans la page afin de bien l'identifier et de ne pas générer un nouveau token.
<script type="application/javascript">
window.axeptioSettings = <?php echo json_encode([
    "clientId" => "5ab8ff825002ac4d6998c7bb",
    "token" => $user->id
]); ?>
</script>
	
Le token utilisateur, qu'il soit généré par Axeptio, ou défini par vous-même, est ajouté au formulaire parent de la case à cocher initiale :
<form action="contact.php">
    <div>
        <label>e-mail</label>
        <input type="email" name="email"/>
    </div>
    <div>
        <label>message</label>
        <textarea name="message"></textarea>
    </div>
    <div>
        <!-- Exemple de case à cocher Axeptio -->
        <input type="checkbox" name="newsletter" data-axeptio="newsletter"/>
    </div>
    
    <-- Balise ajoutée au formulaire par le SDK axeptio -->
    <input type="hidden" name="axeptio_token" value="203bae23392aeff"/>
    
</form>
	

5. API : Les options de configuration

Vous pouvez enrichir l'objet `axeptioSettings` avec des propriétés de configuration additionnelles.

`clientId` (`string`)
Identifiant du projet à retrouver dans l'interface d'administration.

`token` ( `string`)
Identifiant de l'utilisateur. Si laissé vide, sera généra par Axeptio de manière aléatoire.

`onChange` (`function`)
Permet de spécifier un écouteur pour les événements de changement des cases-à-cocher Axeptio. La signature de la fonction prend trois arguments : `name` (identifiant axeptio de la case à cocher), `checked` (un booléen indiquant si la case est cochée), `input` (une référence à l'élement DOM de type `HTMLInputElement` de votre page HTML. Cette méthode est appelée dès le chargement de l'iframe sur la page afin de vous permettre de mettre à jour votre page en fonction de la sélection de l'utilisateur.

`onToken` (`function`)
Fonction appelée pour récupérer le token généré par Axeptio pour la session courante. Cette fonction est particulièrement adaptée pour enregistrer le token dans votre propre application en AJAX.

`initAtLoad` (`boolean`,  `true`)
Flag indiquant au SDK s'il doit s'initialiser dès le chargement de la page ou pas. Dans le cas de "Single Page Application" en Angular ou React, il peut être pratique de passer cette propriété à `false`.

`globalPrototypeName` (`string`, `"Axeptio"`)
Nom de la fonction prototype (constructeur) et de l'objet global Axeptio déclaré sur l'objet `window`.

`globalInstanceName` (`string` , `"Axeptio"`)
Nom de l'instance déclarée sur l'objet `window`.

`debug` (`boolean`, `false`)
Flag indiquant au SDK s'il peut ou pas émettre les messages d'erreur et d'avertissement dans la console du navigateur.

`axeptioApiUrl`, (`string`, `"https://api.axept.io/v1"`)
URL de l'API Axeptio utilisée pour la génération du Token utilisateur* `axeptioPlatformUrl`, (`string`, `"https://platform.axept.io"`) URL de la plateforme Axeptio utilisée pour afficher le détail des consentements

6. API : Les méthodes disponibles

Le SDK Axeptio expose plusieurs méthodes qui peuvent être appelées par votre code si vous avez besoin d'une intégration plus poussée dans votre page. Ces méthodes sont accessibles sur la propriété `window.axeptio` qui est une instance de la fonction `Axeptio`.

Nota : il vous est possible d'instancier plusieurs fois la fonction `Axeptio` ou aussi de donner un autre nom à la propriété globale.

axeptio.init()

La méthode d'initialisation du SDK recherche toutes les balises `<input type="checkbox">` de la page pour lesquelles un attribut `data-axeptio` est présent. Elle les cache et ajoute juste après une balise `<iframe>` dont la source pointe vers le formulaire de recueil de consentement Axeptio. Cette page est servie en HTTPS et le contenu des échanges est par conséquent chiffré.</iframe>

axeptio.change(checkboxName, callbackFn)

Cette méthode permet d'ajouter un écouteur d'événement pour une case-à-cocher donnée. Ainsi, si la case est cliquée par le client dans l'iframe, un événement est dispatché et les fonctions écouteurs sont appelées.
axeptio.change('cgv', function(accept){
    $('.submit').attr('disabled', !accept);
});

axeptio.getToken()

Permet de récupérer le token correspondant à la session utilisateur courante, pour l'instance d'axeptio donnée.
axeptio.getToken().then(function(token){
    $.put('/users/me', {axeptioToken: token});
});
La méthode est asynchrone car si le token n'existe pas, il est généré par le serveur d'Axeptio.

router.beforeLeave(() => {
    axeptio.clear();
})
Nettoie toutes les altérations dans le DOM causées par le SDK Axeptio.