Instalação

Embed Instalação

Requisitos para instalação em seu website

  1. Copiar o javascript abaixo em sua página.
  2. Alterar as variáveis do primeiro bloco.
  3. Disponibilizar um elemento DIV em sua página.
  4. 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âmetroDescriçã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_nameNome do signatário. Se for preenchido, o campo não será exigido na tela de assinatura.
signer_documentationCPF do signatário. Se for preenchido, o campo não será exigido na tela de assinatura.
signer_birthdayData de nascimento do signatário. Formato: 22/11/1983. Se for preenchido, o campo não será exigido na tela de assinatura.
signer_disable_previewSe for preenchido com o valor 1, o preview dos documentos não será exibido. Utilize para as assinaturas em HASH de documento.
signer_key_signerChave do signatário. Utilize quando houver signatários repetidos no mesmo documento.
widthLargura em pixels do iframe
heightAltura 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);

Did this page help you?