Embed Instalação

Requisitos para instalação em seu website

Copiar o javascript abaixo em sua página.
Alterar as variáveis do primeiro bloco.
Disponibilizar um elemento DIV em sua página.
Interagir com o callback do EMBED.

Código completo - Função Javascript

📘
Esse código javascript apenas tem a função de criar um IFRAME em sua página. Caso o código não funcione em sua aplicação, fique a vontade para realizar alterações e mudanças no código.

<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âmetro	Descrição
container (obrigatório)	ID na DOM do elemento no qual o iframe será inserido
key (obrigatório)	Chave do documento que será exibido
host (obrigatório)	Host a ser utilizado na montagem do iframe
signer_email (obrigatório)	E-mail do signatário
signer_display_name	Nome do signatário. Se for preenchido, o campo não será exigido na tela de assinatura.
signer_documentation	CPF do signatário. Se for preenchido, o campo não será exigido na tela de assinatura.
signer_birthday	Data de nascimento do signatário. Formato: 22/11/1983. Se for preenchido, o campo não será exigido na tela de assinatura.
signer_disable_preview	Se for 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.
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 callback será acionada com o parâmetro signed ou wrong-data.

Através desse callback você poderá manipular a sua aplicação conforme necessário.

Por exemplo, poderá disparar uma mensagem para o usuário ou redirecionar o usuário para outra página.

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