How widget works

Configure widgets on your site quickly and easily!

With the ZapSign widget, you can integrate electronic signatures directly into your website, ensuring a smooth and secure experience!

To use the widget, your application must be a web application compatible with JavaScript.

Adding the Widget to Your Site

To embed the ZapSign widget into your site, use the HTML code provided below:

<!DOCTYPE html>
<html>
<head>
	<title>Test Widget ZapSign</title>
</head>
<body>
        <!--Note: It is important to include the 'allow' attribute in your iframe so we can request the signer's photo or document photo if you have opted for any of these signing methods -->
	<iframe src="https://app.zapsign.co/verificar/SIGNER-TOKEN" width="100%" height="800px" allow="camera"></iframe>

	<script>		
			window.onmessage = function(e){
	        if(e.data === 'zs-doc-loaded'){
	        	alert('Doc loaded in iframe')
	        }
	        if(e.data === 'zs-doc-signed'){
	        	alert('Doc signed by signer')
	        }
	        if(e.data === 'zs-signed-file-ready'){
	        	alert('Signed file (final pdf) ready to download')
	        }
			};
	</script>

</body>
</html>

Each signer has their own token, and the linkage occurs automatically when creating the document. See the section "Types of Tokens and How to Locate Them" for more information.

Using window.onmessage with the Widgets

The window.onmessage function is optional but helps provide immediate feedback to users, ensuring a faster and more efficient signing experience. Available events include: document loading, signature completion, and the availability of the signed file for download.

Cover

zs-doc-loaded: when the PDF finishes loading on the signer's screen.

Cover

zs-doc-signed: when the signer successfully signs the document.

Cover

zs-signed-file-ready: when the final PDF is ready to download (this is when the "download signed" button is enabled for example).

Allow Attribute

In the ZapSign widget, the allow attribute in the <iframe> element permits access to the device’s camera when necessary, such as capturing a photo of the signer or a document during the signing process. Adding allow="camera" ensures that the widget can request the camera if this signing option is enabled.

GIF demonstrating the use of the allow attribute in an iframe, highlighting permission for camera access.
Example of using the allow attribute in an iframe to enable camera access.

Documents using facial recognition authentication require additional configurations to ensure the security of the entire application. If you need this functionality or have questions on how to integrate it into your workflow, contact our support team at [email protected].

PreviousDelete Webhook

Last updated

Was this helpful?