You've created your brand new terms and conditions widget and can't wait to show it to the world?
Us too! 🎉
We'll explain how to do it here and even in a video at the bottom 🌈
📌 It is necessary to first integrate our small script in the standard way.
Go to (not into unknown territory) but 👉 here 👈
A powerful and easy-to-integrate API
Integrating the consent widget will only require you to add a single line of code. You'll see it's very simple, even if you don't know anything about it.
Our JavaScript API allows you to easily integrate different interactions on your website pages: display the contract, verify if the user has already consented, force revalidation, etc.
On the API side, from server to server, we allow you to query our consent proof registry in real-time to retrieve consent information attached to an identifier in your system.
Getting started 🚦
Make sure the user token corresponds to the logged-in user.
<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>
Then register a handler to access the Axeptio SDK once it's loaded.
<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>
Various use cases are available to you 🧮
1. Open a single contract
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.})
Note that by default, this method will open the latest version of the contract. The latest version is the version that was published by the administrator at the last project publication. For testing purposes for example, you can pass a specific version. To do this, you can pass an additional parameter and pass the version tag like this:
sdk.openContract({name: 'terms_of_sale', tag: '2.4.0'})
openContract will always request consent, even if the user has already consented to the current version.
2. Open multiple contracts
To verify multiple contracts at once, you must pass an array containing the names or identifiers of the contracts as a string or ContractSignature objects
/*** @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 will request consent if necessary.
3. Consent for a third party (mandate)
To request consent from another person from the logged-in user, simply pass the person's identifier as the consentFor property in the checkContracts, openContracts or openContract methods.
const someoneElseIdentifier = '<?php echo $consentingUser->subUser->id; ?>'sdk.checkContracts([{ name: 'terms_of_sale', consentFor: someonElseIdentifier }]).then(function( contracts ){ ... });
4. Opening the contract in "read-only" mode
If you want to let the end user read a contract (for example, one they have already accepted), simply use the openContract function with the {readOnly : true} option.
sdk.openContract('termes_of_sale', {readOnly: true});
5. Opening the contract via URL
You can add the opening of a contract from the URL by passing axeptio_contract as the query string key, with the value being either the contract ID or name. You can also open the widget directly on a specific section by passing #{sectionId} in the URL.
For example: https://www.axeptio.eu/fr?axeptio\_contract=terms\_of\_use\_fr#91aaef13-12a5-49c8-8518-47e56f801be6
Use case
<!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>
Additional feature 🌟
Use custom variables in section titles and texts and in the diff screen.
In the contract signature, you can add custom variables that will be available for display in the diff screen (used to display differences with the previous version of the contract).
sdk.checkContracts([{name: 'product_1', variables: { contractNo: '123456', customerName: 'John Doe' }}])
With checkContracts:
Use the following syntax to call any variable previously sent in the section content area or in the diff screen.
Ms. / Mr. ####{{ customerName }} Contract No.: ####{{ contractNo }}
In video 🎥
And there you have it! Your new contract widget is now live 🤗