Vous avez créé votre tout nouveau widget de recueil de CGV/CGU et vous avez hâte de le montrer au monde entier ?
Nous aussi ! 🎉
On vous explique comment faire ici et même en vidéo tout en bas 🌈
Une API puissante et facile à intégrer
Intégrer le widget de consentement ne vous demandera de rajouter qu’une seule ligne de code. Vous allez voir c’est très simple, même si vous n’y connaissez rien.
Notre API JavaScript vous permet d’intégrer facilement différentes interactions sur les pages de votre site : afficher le contrat, vérifier si l’internaute a déjà consenti, forcer la revalidation, etc.
Côté API, de serveur à serveur, nous vous permettons d’interroger en temps réel notre registre de preuve de consentement pour récupérer les informations de consentement rattaché à un identifiant chez vous.
Pour commencer 🚦
Assurez-vous que le token utilisateur correspondant à l'utilisateur connecté.
<script type="text/javascript">
window.axeptioSettings = {
clientId: '<your client id>',
token: '<?php echo $user->uid ?>' };
(function(d, s) {
var t = d.getElementsByTagName(s)[0], e = d.createElement(s);
e.async = true; e.src = "//static.axept.io/sdk.js";
t.parentNode.insertBefore(e, t);
})(document, "script");
</script>
Enregistrez ensuite un gestionnaire pour accéder au SDK d'Axeptio une fois qu'il est chargé.
<script type="text/javascript">
window._axcb = window._axcb || [];
window._axcb.push(sdk => {
// Inside this function you will be able to access
//Axeptio SDK's public methods
});
</script>
Différents cas d'utilisation s'offrent à vous 🧮
1. Ouvrir un seul contrat
sdk.openContract('terms_of_sale').then(function(consent){
// we will enter this promise resolve function once the consent proof
// has been saved inside the Axeptio DB. Both the widget and overlay
// will be gone at this time.
})
Notez que par défaut, cette méthode ouvrira la dernière version du contrat. La dernière version est la version qui a été publiée par l'administrateur lors de la dernière publication du projet. À des fins de test par exemple, vous pouvez passer une version spécifique. Pour ce faire, vous pouvez passer un paramètre supplémentaire et passer le tag de version comme ceci :
sdk.openContract({name: 'terms_of_sale', tag: '2.4.0'})
openContract demandera toujours le consentement, même si l'utilisateur a déjà consenti à la version actuelle.
2. Ouvrir plusieurs contrats
Afin de vérifier plusieurs contrats à la fois, vous devez passer un tableau contenant les noms ou les identifiants des contrats sous forme de chaîne ou d'objets ContractSignature
/**
* @typedef ContractSignature
* @property {String} name
* @property {String} [tag]
* @property {String} [consentFor]
*/
sdk.checkContracts(
['terms_of_sale', {name: 'privacy_policy', tag: '1.2.1'}]
).then(function(contracts){
// we will enter this
});
checkContractsdemandera le consentement si nécessaire.
3. Consentement pour un tiers (mandat)
Pour demander le consentement d'une autre personne à l'utilisateur connecté, il suffit de transmettre l'identifiant de la personne en tant que propriété consentFor dans les méthodes checkContracts, openContracts ou openContract.
const someoneElseIdentifier = '<?php echo $consentingUser->subUser->id; ?>'
sdk.checkContracts([
{ name: 'terms_of_sale', consentFor: someonElseIdentifier }
]).then(function( contracts ){ ... });
4. Ouverture du contrat en mode "lecture seule"
Si vous voulez laisser l'utilisateur final lire un contrat (par exemple, celui qu'il a déjà accepté), il suffit d'utiliser la fonction openContract avec l'option {readOnly : true}.
sdk.openContract('termes_of_sale', {readOnly: true});
5. Ouverture du contrat via un URL
Vous pouvez ajouter l'ouverture d'un contrat à partir de l'url en passant axeptio_contract comme clé de la chaîne de requête, avec la valeur étant soit l'id ou le nom du contrat.
Vous pouvez également ouvrir le widget directement sur une section spécifique en passant #{sectionId} dans l'url.
Par exemple : https://www.axeptio.eu/fr?axeptio_contract=terms_of_use_fr#91aaef13-12a5-49c8-8518-47e56f801be6
Cas d'utilisation
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
form.form-example {
display: table;
}
div.form-example {
display: table-row;
}
label,
input {
margin-bottom: 10px;
}
label {
padding-right: 10px;
}
</style>
</head>
<body>
<div>
<form action="" method="get" class="form-example">
<div class="form-example">
<label for="name">Enter your name: </label>
<input type="text" name="name" id="name" required />
</div>
<div class="form-example">
<label for="email">Enter your email: </label>
<input type="email" name="email" id="email" required />
</div>
<div>
<input type="checkbox" id="cgvu" name="cgvu" disabled />
<label for="cgvu">I accept the term and conditions.</label>
</div>
<div class="form-example">
<input type="submit" value="Subscribe!" />
</div>
</form>
</div>
<script>
window.axeptioSettings = {
clientId: "6058635aa6a92469bed037b0",
token: "user-12345",
};
// identifier of the person "user-12345"
// will give consent for
var mandateUserId = "user-56789";
(function (d, s) {
var t = d.getElementsByTagName(s)[0],
e = d.createElement(s);
e.async = true;
e.src = "https://static.axept.io/sdk.js";
t.parentNode.insertBefore(e, t);
})(document, "script");
window._axcb = window._axcb || [];
window._axcb.push(function (sdk) {
sdk.checkContracts([
"cgvu_axeptio",
{ name: "cgvu_axeptio", consentFor: mandateUserId }
]);
sdk.on("contract:complete", function (result) {
document.getElementById("cgvu").checked = true;
console.log("contract:complete:", result);
});
});
</script>
</body>
</html>
Fonction supplémentaire 🌟
Utiliser des variables personnalisées dans les titres et les textes des sections et dans l'écran diff.
Dans la signature du contrat, vous pouvez ajouter des variables personnalisées qui seront disponibles pour l'affichage dans l'écran diff (utilisé pour afficher les différences avec la version précédente du contrat).
sdk.checkContracts([
{name: 'product_1', variables: { contractNo: '123456', customerName: 'John Doe' }}
])
Avec checkContracts :
Utilisez la syntaxe suivante, pour appeler n'importe quelle variable envoyée précédemment, dans la zone de contenu d'une section ou dans diff screen.
Mme / M. {{ customerName }}
N° contrat : {{ contractNo }}
En vidéo 🎥
Et voilà ! Votre nouveau widget de contrat est en ligne 🤗