U hebt zojuist uw gloednieuwe widget voor het verzamelen van algemene voorwaarden gemaakt en kunt niet wachten om het aan de hele wereld te tonen?
Wij ook! 🎉
Wij leggen u hier uit hoe u dit doet en zelfs in een video helemaal onderaan 🌈
📌 Het is noodzakelijk om vooraf ons kleine script op de gebruikelijke manier te integreren.
Ga naar (niet naar onbekend terrein) maar 👉 hier 👈
Een krachtige en gemakkelijk te integreren API
Het integreren van de toestemmingswidget vereist dat u slechts één regel code toevoegt. U zult zien dat het erg eenvoudig is, zelfs als u er niets van af weet.
Onze JavaScript API stelt u in staat om eenvoudig verschillende interacties op de pagina's van uw website in te bouwen: het contract weergeven, controleren of de bezoeker al heeft ingestemd, revalidatie afdwingen, enz.
Aan de API-kant, van server naar server, kunnen we u in real-time queries op ons register van toestemmingsbewijzen stellen om toestemmingsinformatie op te halen die aan een identifier bij u is gekoppeld.
Om te beginnen 🚦
Zorg ervoor dat het gebruikerstoken overeenkomt met de ingelogde gebruiker.
<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>
Registreer vervolgens een handler voor toegang tot de Axeptio SDK zodra deze is geladen.
<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>
U hebt verschillende gebruiksscenario's ter beschikking 🧮
1. Één contract openen
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.})
Merk op dat deze methode standaard de nieuwste versie van het contract opent. De nieuwste versie is de versie die door de beheerder is gepubliceerd bij de laatste publicatie van het project. Voor testdoeleinden kunt u bijvoorbeeld een specifieke versie opgeven. Om dit te doen, kunt u een aanvullende parameter doorgeven en de versietag als volgt doorgeven:
sdk.openContract({name: 'terms_of_sale', tag: '2.4.0'})
openContract zal altijd toestemming vragen, zelfs als de gebruiker al toestemming heeft gegeven voor de huidige versie.
2. Meerdere contracten openen
Om meerdere contracten tegelijk te controleren, moet u een array doorgeven met de namen of id's van de contracten als string of als ContractSignature objecten
/*** @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 });
checkContracts zal indien nodig toestemming vragen.
3. Toestemming voor een derde (volmacht)
Om toestemming van een ander persoon te vragen aan de ingelogde gebruiker, geeft u eenvoudig de identifier van de persoon door als consentFor eigenschap in de methodes checkContracts, openContracts of openContract.
const someoneElseIdentifier = '<?php echo $consentingUser->subUser->id; ?>'sdk.checkContracts([{ name: 'terms_of_sale', consentFor: someonElseIdentifier }]).then(function( contracts ){ ... });
4. Contract openen in read-only modus
Als u wilt dat de eindgebruiker een contract leest (bijvoorbeeld één dat al is geaccepteerd), gebruikt u eenvoudig de functie openContract met de optie {readOnly : true}.
sdk.openContract('termes_of_sale', {readOnly: true});
5. Contract openen via URL
U kunt het openen van een contract vanuit de url toevoegen door axeptio_contract als querystring sleutel door te geven, waarbij de waarde de id of de naam van het contract is. U kunt ook de widget rechtstreeks openen in een specifiek gedeelte door #{sectionId} in de url door te geven.
Bijvoorbeeld: https://www.axeptio.eu/fr?axeptio\_contract=terms\_of\_use\_fr#91aaef13-12a5-49c8-8518-47e56f801be6
Gebruiksscenario
<!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>
Aanvullende functie 🌟
Aangepaste variabelen gebruiken in titels en teksten van secties en in het diff-scherm.
In de contracthandtekening kunt u aangepaste variabelen toevoegen die beschikbaar zijn voor weergave in het diff-scherm (gebruikt om verschillen met de vorige versie van het contract weer te geven).
sdk.checkContracts([{name: 'product_1', variables: { contractNo: '123456', customerName: 'John Doe' }}])
Met checkContracts:
Gebruik de volgende syntaxis om een variabele aan te roepen die u eerder hebt verzonden in het inhoudsgebied van een sectie of in het diff-scherm.
Mme / M. ####{{ customerName }} N° contrat : ####{{ contractNo }}
In video 🎥
En voilà! Uw nieuwe contractwidget is online 🤗