Integrando o Embed: Configuração e Notificações (Postback)

📘 PARA ATIVAR O EMBED EM SUA CONTA, SOLICITE PELO E-MAIL SUPORTE@D4SIGN.COM.BR

Introdução ao Conceito

O conceito é bem direto: você precisa apenas carregar a biblioteca JavaScript da D4Sign em sua página e indicar o UUID do documento que deverá ser assinado. O restante do processo é gerenciado pela D4Sign, garantindo a segurança e a validade jurídica.

🚧 ATENÇÃO: O documento precisa estar na fase "AGUARDANDO ASSINATURAS". Se o documento estiver na fase "Aguardando signatários", ele não será exibido.

Fluxo de Assinatura via Embed

Veja quais são os passos da experiência do usuário com o Embed:

Exibição do Documento: O documento será exibido para o usuário diretamente no seu website, dentro de um <iframe>.
Ação do Usuário: O usuário deverá clicar no botão 'ASSINAR'.
Confirmação por Token: A D4Sign enviará um TOKEN de confirmação para o e-mail (ou outro canal de autenticação configurado) do usuário, para validar a identidade.
Callback de Conclusão: Após a assinatura do usuário, a D4Sign enviará um CALLBACK para o seu website informando que a assinatura foi realizada.

Embed - Instalação no seu Website

Para instalar o Embed em sua página, siga os requisitos abaixo:

Copiar o código JavaScript fornecido e inseri-lo em sua página.
Alterar as variáveis do primeiro bloco do código com as informações do seu documento e signatário.
Disponibilizar um elemento <div> em sua página com o ID especificado para o Embed.
Interagir com o callback do EMBED para personalizar a experiência após a assinatura.

Código Completo - Função JavaScript

📘 Esse código JavaScript tem a função de criar um <iframe> em sua página. Caso o código não funcione em sua aplicação, fique à vontade para realizar alterações e mudanças, adaptando-o às suas necessidades.

JavaScript

<div id='signature-div'></div>
<script>
    //----------INÍCIO DAS VARIAVEIS----------//
    var key 			= "{UUID-DOCUMENTO}";
    var signer_disable_preview 	= "0";
    var signer_email 		= "EMAIL DO SIGNATÁRIO";
    var signer_display_name 	= ""; //Opcional
    var signer_documentation	= ""; //Opcional
    var signer_birthday 	= ""; //Opcional
    var signer_key_signer 	= ""; //Opcional
    
    var host			= "https://secure.d4sign.com.br/embed/viewblob";
    var container 		= "signature-div";    
    var width 			= '1025';
    var height 			=  '500';
    //----------FIM DAS VARIAVEIS----------//
    
    var is_safari = navigator.userAgent.indexOf('Safari') > -1;
    var is_chrome = navigator.userAgent.indexOf('Chrome') > -1;
    if ((is_chrome) && (is_safari)) {is_safari = false;}  
    if (is_safari) {
        if (!document.cookie.match(/^(.*;)?\s*fixed\s*=\s*[^;]+(.*)?$/)) {
            document.cookie = 'fixed=fixed; expires=Tue, 19 Jan 2038 03:14:07 UTC; path=/';
            var url = document.URL;
            var str = window.location.search;
            var param = str.replace("?", "");
            if (url.indexOf("?")>-1){
                url = url.substr(0,url.indexOf("?"));
            }
            window.location.replace("https://secure.d4sign.com.br/embed/safari_fix?param="+param+'&r='+url);
        }
    }
    iframe = document.createElement("iframe");
    if (signer_key_signer === ''){
        iframe.setAttribute("src", host+'/'+key+'?email='+signer_email+'&display_name='+signer_display_name+'&documentation='+signer_documentation+'&birthday='+signer_birthday+'&disable_preview='+signer_disable_preview);
    }else{
        iframe.setAttribute("src", host+'/'+key+'?email='+signer_email+'&display_name='+signer_display_name+'&documentation='+signer_documentation+'&birthday='+signer_birthday+'&disable_preview='+signer_disable_preview+'&key_signer='+signer_key_signer);
    }
    iframe.setAttribute("id", 'd4signIframe');
    iframe.setAttribute("width", width);
    iframe.setAttribute("height", height);
   
    iframe.style.border = 0;
    iframe.setAttribute("allow", 'geolocation');
    var cont = document.getElementById(container);
    cont.appendChild(iframe);
    window.addEventListener("message", (event) => {
        if (event.data === "signed") {
            alert('ASSINADO');
        }
        if (event.data === "wrong-data") {
            alert('DADOS ERRADOS');
        }
    }, false);
</script>

Parâmetros do Embed

Parâmetro	Descrição
`container` (obrigatório)	ID na DOM do elemento `div` no qual o iframe será inserido.
`key` (obrigatório)	Chave (UUID) do documento que será exibido.
`host` (obrigatório)	Host a ser utilizado na montagem do iframe (normalmente `https://secure.d4sign.com.br/embed/viewblob`).
`signer_email` (obrigatório)	E-mail do signatário.
`signer_display_name`	Nome do signatário. Se preenchido, o campo não será exigido na tela de assinatura.
`signer_documentation`	CPF do signatário. Se preenchido, o campo não será exigido na tela de assinatura.
`signer_birthday`	Data de nascimento do signatário. Formato: `22/11/1983`. Se preenchido, o campo não será exigido na tela de assinatura.
`signer_disable_preview`	Se preenchido com o valor `1`, o preview dos documentos não será exibido. Utilize para as assinaturas em HASH de documento.
`signer_key_signer`	Chave do signatário. Utilize quando houver signatários repetidos no mesmo documento (útil em casos onde a mesma pessoa assina múltiplas vezes no mesmo documento).
`width`	Largura em pixels do iframe.
`height`	Altura em pixels do iframe.

Callback Function

Quando um documento for assinado pelo signatário, a função window.addEventListener("message", ...) será acionada com o parâmetro event.data. Os valores possíveis são:

"signed": Indica que a assinatura foi realizada com sucesso.
"wrong-data": Indica que o usuário clicou no link "Meus dados estão errados" na tela de assinatura.

Através desse callback, você poderá manipular a sua aplicação conforme necessário. Por exemplo, poderá disparar uma mensagem de sucesso para o usuário, redirecionar o usuário para outra página, ou apresentar um formulário para correção de dados.

JavaScript

    window.addEventListener("message", (event) => {
        if (event.data === "signed") {
            alert('ASSINADO'); // Exemplo: exibir uma mensagem ou redirecionar o usuário para outra página.
        }
        if (event.data === "wrong-data") {
            alert('USUARIO CLICOU NO LINK: Meus dados estão errados.'); // Exemplo: redirecionar o usuário para uma página onde poderá alterar os seus dados.
        }
    }, false);