Você criou seu novo widget de coleta de Termos e Condições/Política de Privacidade e está ansioso para mostrar ao mundo todo?
Nós também! 🎉
Explicamos como fazer aqui e até em vídeo lá embaixo 🌈
📌 É necessário, previamente, integrar nosso pequeno script de forma clássica.
Acesse (não em terra desconhecida) mas 👉 aqui 👈
Uma API poderosa e fácil de integrar
Integrar o widget de consentimento exigirá apenas adicionar uma única linha de código. Você verá que é muito simples, mesmo que você não entenda nada sobre isso.
Nossa API JavaScript permite que você integre facilmente diferentes interações nas páginas do seu site: exibir o contrato, verificar se o usuário já consentiu, forçar a revalidação, etc.
No lado da API, de servidor para servidor, permitimos que você consulte em tempo real nosso registro de prova de consentimento para recuperar as informações de consentimento vinculadas a um identificador em sua conta.
Para começar 🚦
Certifique-se de que o token do usuário corresponde ao usuário conectado.
<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>
Em seguida, registre um gerenciador para acessar o SDK do Axeptio depois que ele for carregado.
<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>
Diferentes casos de uso estão disponíveis para você 🧮
1. Abrir um único contrato
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.})
Observe que, por padrão, este método abrirá a versão mais recente do contrato. A versão mais recente é a versão que foi publicada pelo administrador na última publicação do projeto. Para fins de teste, por exemplo, você pode passar uma versão específica. Para fazer isso, você pode passar um parâmetro adicional e passar a tag de versão assim:
sdk.openContract({name: 'terms_of_sale', tag: '2.4.0'})
openContract sempre solicitará o consentimento, mesmo que o usuário já tenha consentido com a versão atual.
2. Abrir múltiplos contratos
Para verificar vários contratos ao mesmo tempo, você deve passar um array contendo os nomes ou identificadores dos contratos como string ou objetos 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 });
checkContracts solicitará o consentimento, se necessário.
3. Consentimento por um terceiro (mandato)
Para solicitar o consentimento de outra pessoa ao usuário conectado, basta passar o identificador da pessoa como propriedade consentFor nos métodos checkContracts, openContracts ou openContract.
const someoneElseIdentifier = '<?php echo $consentingUser->subUser->id; ?>'sdk.checkContracts([{ name: 'terms_of_sale', consentFor: someonElseIdentifier }]).then(function( contracts ){ ... });
4. Abertura do contrato em modo "somente leitura"
Se você quiser permitir que o usuário final leia um contrato (por exemplo, aquele que ele já aceitou), basta usar a função openContract com a opção {readOnly : true}.
sdk.openContract('termes_of_sale', {readOnly: true});
5. Abertura do contrato via URL
Você pode adicionar a abertura de um contrato a partir da URL passando axeptio_contract como chave da string de consulta, com o valor sendo o ID ou o nome do contrato. Você também pode abrir o widget diretamente em uma seção específica passando #{sectionId} na URL.
Por exemplo: https://www.axeptio.eu/fr?axeptio\_contract=terms\_of\_use\_fr#91aaef13-12a5-49c8-8518-47e56f801be6
Caso de uso
<!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>
Função adicional 🌟
Use variáveis personalizadas nos títulos e textos das seções e na tela diff.
Na assinatura do contrato, você pode adicionar variáveis personalizadas que estarão disponíveis para exibição na tela diff (usada para mostrar as diferenças com a versão anterior do contrato).
sdk.checkContracts([{name: 'product_1', variables: { contractNo: '123456', customerName: 'John Doe' }}])
Com checkContracts:
Use a seguinte sintaxe para chamar qualquer variável enviada anteriormente na área de conteúdo de uma seção ou na tela diff.
Mme / M. ####{{ customerName }} N° contrat : ####{{ contractNo }}
Em vídeo 🎥
Pronto! Seu novo widget de contrato está online 🤗