Instalação EMBED em seu website

Embed Installation

To integrate D4Sign's Embed feature into your website, follow the steps below:

Copy and paste the JavaScript code below into your web page.
Customize the configuration variables at the top of the script.
Add a <div> element to your HTML to host the embedded document.
Use the callback listener to handle post-signature actions.

Full Code – JavaScript Function

📘
This JavaScript code is a sample implementation that creates an iframe for embedding the document.
You may customize or adapt it as needed to suit your front-end framework or application.

<div id='signature-div'></div>
<script>
    //----------START OF VARIABLES----------//
    var key                  = "{UUID-DOCUMENT}";
    var signer_disable_preview = "0";
    var signer_email         = "SIGNER'S EMAIL";
    var signer_display_name  = ""; //Optional
    var signer_documentation = ""; //Optional
    var signer_birthday      = ""; //Optional
    var signer_key_signer    = ""; //Optional

    var host        = "https://secure.d4sign.com.br/embed/viewblob";
    var container   = "signature-div";    
    var width       = '1025';
    var height      = '500';
    //----------END OF VARIABLES----------//

    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('SIGNED');
        }
        if (event.data === "wrong-data") {
            alert('INVALID DATA');
        }
    }, false);
</script>

Parameter	Description
container (required)	DOM element ID where the iframe will be inserted
key (required)	Document key to be displayed
host (required)	Host to be used in the iframe generation
signer_email (required)	Signer's e-mail address
signer_display_name	Signer's name. If filled, this field will not be required on the signature screen.
signer_documentation	Signer's CPF. If filled, this field will not be required on the signature screen.
signer_birthday	Signer's date of birth. Format: 22/11/1983. If filled, this field will not be required on the signature screen.
signer_disable_preview	If set to value 1, the document preview will not be displayed. Use this option for document HASH-based signing.
signer_key_signer	Signer key. Use it when there are repeated signers in the same document.
width	Width in pixels of the iframe
height	Height in pixels of the iframe

Callback function

When a document is signed by the signer, the callback function will be triggered with the parameter signed or wrong-data.

Through this callback, you can handle your application as needed.

For example, you may display a message to the user or redirect the user to another pag

window.addEventListener("message", (event) => {
    if (event.data === "signed") {
        alert('SIGNED'); // or redirect the user to another page.
    }
    if (event.data === "wrong-data") {
        alert('THE USER CLICKED ON THE LINK: My data is incorrect.'); // or redirect the user to a page where they can update their data.
    }
}, false);