Intégration du SDK

Last updated 7 days ago

Le SDK est un petit fichier Javascript qui est chargé par votre page html grâce à une balise <script>.

Axeptio Embed.JS SDK

Ce fichier de 40Ko (12Ko zippé) est hébergé par Axeptio et servi depuis un CDN (réseau de distribution de contenu) performant.

1. Intégration

Pour intégrer Axeptio sur votre site, il faut ajouter ces quelques lignes de codes au pied de chacune de vos pages. Cela va permettre de charger le script Axeptio qui va ensuite s'occuper de piloter l'injection des widgets, l'appararition des cookies, etc.

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.

Vous pouvez retrouver ce bout de code et le copier / coller ici :

Mes Projets > Nom du Projet > Intégration technique

<script src="https://static.axept.io/sdk.js"
type="text/javascript" async
data-id="5c11fefce95cd64112feab77"></script>

2. Intégration du SDK sous Wordpress

Pour ajouter le SDK (script Axeptio) dans Wordpress, vous pouvez utiliser une extension gratuite. Il en existe des centaines. Voici un exemple d'extension que vous pouvez utiliser sans crainte :

Evidemment, vous avez le choix :

Il suffit ensuite de copier coller le code Axeptio dans la zone "footer"

3. Intégration du SDK sous PrestaShop

Comme pour Wordpress, nous vous conseillons d'utiliser une extension spécialisée pour toucher au code de vos pages et pour intégrer le SDK Axeptio.

4. Intégration du SDK sous Shopify

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

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

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