O que são as marcações?
Você pode customizar o seu formulário HTML para registrar consentimentos sem precisar programar, basta usar marcações no código.
Atenção - Este recurso está disponível apenas na API Javascript nativa, não disponível ainda para o SDK React.JS ou Angular.
Passo 1 - Premissa
Você deve importar no seu código-fonte o SDK Javascript “sdkconsent.min.js”
<script src="https://cdn.privacytools.com.br/sdkconsent/dist/sdkconsent.min.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdn.privacytools.com.br/sdkconsent/dist/sdkconsent.css" type="text/css" /> var sdk = sdkConsent("https://HOST/public_api/consent","sua chave publica");
Passo 2 - Considere o HTML de um formulário comum abaixo.
Você precisará colocar apenas algumas marcações para indicar para o SDK o que fazer.
<form id="form-checkbox" action="#" method="post" data-consent-submit> <input type="hidden" data-consent-user value="hashdousuario"/> <table> <tr> <td width="200px"> Nome </td> <td> <input type="text" data-consent-property name="name" width="200px"/> </td> </tr> <tr> <td> Email </td> <td> <input type="email" data-consent-property name="email" width="200px"/> </td> </tr> <tr> <td> Cidade </td> <td> <input type="text" data-consent-property name="city" width="200px"/> </td> </tr> <tr> <td colspan="2"> <input type="checkbox" name="accept" value="yes" data-consent-reason="hashtemplate" /> Gostaria de receber emails promocionais </td> </tr> <tr> <td colspan="2"> <input type="submit" value="Enviar"/> </td> </tr> </table> </form>
Tabela de Marcações
Marcação | Onde usar | Para que serve |
---|---|---|
data-consent-submit (recomendado, mas opcional se usar a chamada manual conforme instruções no final desta página) | Na sua tag <form> | O SDK vai criar uma chamada no “onsubmit” do seu formulário para poder registrar o consentimento antes de submeter o formulário. Caso o seu código já tenha uma declaração “onsubmit” o sistema vai guardar essa declaração e invoca-la ao final do registro do consentimento. Caso você não possa sobrescrevê-la, leia no final da página. |
data-consent-user (obrigatório) | Crie um campo “hidden” dentro do seu formulário <input type=”hidden” data-consent-user value=”hash do seu usuário”/> | Você precisa enviar o hashUser do usuário que você está registrando consentimento. Sem este hashUser ele não vai funcionar. |
data-consent-reason (obrigatório pelo menos 1) | Em um ou mais checkboxes ou combos de seleção. No caso de checkbox o sistema vai interpretar o checkbox marcado como “sim” e desmarcado como “não” No caso de comboboxes ele vai interpretar qualquer valor abaixo como NÃO, caso contrário será SIM.
| Em um formulário você pode coletar o consentimento para várias finalidades. Cada checkbox ou combo deve ser vinculada com uma finalidade. Obtenha o hash da sua finalidade e coloque como uma marcação diretamente no checkbox ou combo. Exemplo: <checkbox data-consent-reason=”hash da finalidade… > ou <select data-consent-reason=”hash da finalidade” ..> |
data-consent-property (opcional) | Coloque esta marcação em cada dado pessoal do formulário que você quiser gravar. Para os dados pessoais abaixo o sistema possui campos ja pré-definidos. Caso o dado pessoal não seja nenhum destes abaixo ele entrará como um metadado da pessoa.
| Muitas vezes o formulário vai coletar outros dados pessoais que você quer vincular com a pessoa através do hash. Utilize esta propriedade opcional para este vínculo. |
Como obtenho o consentHash?
O consentHash é o hash que representa cada consentimento salvo - é como o “recibo” do consentimento. Quando o SDK registra o consentimento através do formulário ele cria de volta um campo “hidden” com o name “data-consent-hash” no seu HTML. Caso ocorra algum erro ele vai criar o campo “hidden” com o name “data-consent-error” no seu HTML.
Estes campos você pode capturar no seu sistema após o submit do seu formulário.
Não quero sobrescrever o ‘onsubmit’
Caso o seu código não possa sobrescrever o onsubmit você precisará chamar a função de gravação manualmente seguindo as instruções abaixo.
/** A variável "sdk" é a sua referência para o SDK criada no início. A referência "myForm" deve referenciar o seu formulário (ex: document.forms[0]) */ sdk.registerFormConsents(myForm, function (consentHash) { //faz alguma coisa com o recibo de sucesso do consentimento //faça o seu submit },function(error){ //faça alguma coisa com o erro de registro de consentimento });
Pronto, neste caso você vai fazer a chamada manual.