Utilizando Marcações

O que é?

Você pode personalizar seu formulário HTML para registrar consentimentos sem a necessidade de programar, utilizando apenas marcações no código.

Este recurso está disponível apenas na API JavaScript nativa e ainda não está disponível para o SDK React.js ou Angular.

Passo a Passo

1 O que é?
2 Passo a Passo
3 Primeiro Passo
4 Segundo Passo
5 Tabela de Marcações
6 Como obtenho o consentHash?
7 Não quero sobrescrever o ‘onsubmit’

Primeiro Passo

Primeiramente, você deve importar o SDK JavaScript "sdkconsent.min.js" no seu código-fonte.

		<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");

Segundo Passo

Você precisará adicionar apenas algumas marcações para indicar ao SDK o que ele deve 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

Marcação	Onde usar	Para que serve
`data-consent-submit` (Recomendado, mas opcional caso utilize a chamada manual, conforme as instruções no final desta página.)	Na sua tag `<form>`.	O SDK irá criar uma chamada no `onsubmit` do seu formulário para registrar o consentimento antes de submeter o formulário. Se o seu código já tiver uma declaração `onsubmit`, o sistema irá preservar essa declaração e invocá-la ao final do registro do consentimento. Caso você não possa sobrescrevê-la, consulte as instruções 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 para registrar o consentimento. Sem esse hashUser, o processo não 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 interpretará o checkbox marcado como "sim" e o desmarcado como "não". No caso de comboboxes, ele interpretará os seguintes valores como NÃO: `no`, `não`, `NO`, `OFF`, `off`, `false`, `null`, e em branco. Qualquer outro valor será interpretado como SIM.	Em um formulário, você pode coletar o consentimento para várias finalidades. Cada checkbox ou combo deve ser vinculado a uma finalidade específica. Obtenha o hash da finalidade e adicione 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ê deseja gravar. Para os dados pessoais abaixo, o sistema já possui campos pré-definidos. Caso o dado pessoal não seja nenhum desses, ele será registrado como um metadado da pessoa. email name document phone	Muitas vezes, o formulário irá coletar outros dados pessoais que você deseja vincular à pessoa através do hash. Utilize a propriedade opcional para fazer esse vínculo.

Como obtenho o consentHash?

O consentHash é o hash que representa cada consentimento salvo – é como um "recibo" do consentimento. Quando o SDK registra o consentimento através do formulário, ele cria de volta um campo hidden com o nome "data-consent-hash" no seu HTML. Caso ocorra algum erro, ele criará o campo hidden com o nome "data-consent-error" no seu HTML.

Esses campos podem ser capturados no seu sistema após o envio (submit) do 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.

Ficou com dúvidas? Chame o Time de Suporte

Documentação