Intégration du SDK

Last updated 2 months 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

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

6. Intégration plus poussée

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.