Intégration d'Axeptio dans votre site

Axeptio Embed.JS SDK
Le SDK est un petit fichier Javascript qui est chargé par votre page html grâce à une balise <script>. Ce fichier de 40Ko (12Ko gzippé) est hébergé par Axeptio et servi depuis un CDN (réseau de distribution de contenu) performant.

Table des matières

Intégration
Comment ça marche ?
Intégrer un formulaire de recueil de consentement
Le token utilisateur
API
Les options de configuration
Les méthodes disponibles

Intégration
Le SDK peut être chargé dans la balise <head> ou ajouté avant la fermeture de la balise <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.
html
<body>
<!-- contenu de votre page HTML -->
<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>
</body>


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>. 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">
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
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.

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 (https://app.axept.io).

html
<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>


À 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.

Le token 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.

javascript
window.axeptioSettings={
clientId: '5ab8ff825002ac4d6998c7bb',
onToken: function(token){
myApp.getUser().setProperty('axeptioToken', token);
}
};


Vous pouvez sinon spécifier le token vous-même. Cela vous permet par exemple d'utiliser la clé primaire de votre table utilisateur pour faciliter la réconciliation des enregistrements entre Axeptio et votre base de données.

php
<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 :

html
<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>


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

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é.

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.

détailler les arguments

javascript
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.

javascript
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.

axeptio.clear()

javascript
router.beforeLeave(() => {
axeptio.clear();
})

Nettoie toutes les altérations dans le DOM causées par le SDK Axeptio.
Cet article a-t-il répondu à vos questions ?
Merci !