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.

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>

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.

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.

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 support@zapsign.com.br.

PreviousDelete Webhook

Last updated 8 months ago

Was this helpful?

<!DOCTYPE html> <html> <head> <title>Test Widget ZapSign</title> </head> <body>  <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>

How widget works

Adding the Widget to Your Site

Using `window.onmessage` with the Widgets

Allow Attribute

How widget works

Adding the Widget to Your Site

Using `window.onmessage` with the Widgets

Allow Attribute

Adding the Widget to Your Site

Using window.onmessage with the Widgets

Allow Attribute

Adding the Widget to Your Site

Using window.onmessage with the Widgets

Allow Attribute

Using `window.onmessage` with the Widgets

Using `window.onmessage` with the Widgets