iFrame: ¿cómo funciona?

Con el widget de ZapSign, puedes integrar firmas electrónicas directamente en tu sitio web, ¡ofreciendo una experiencia fluida y segura!

Para usar el widget, tu aplicación debe ser una aplicación web compatible con JavaScript.

Agregar el Widget a tu Sitio o App

Para incrustar el widget de ZapSign en tu sitio, utiliza el siguiente código HTML:

<!DOCTYPE html>
<html>
<head>
	<title>Test Widget ZapSign</title>
</head>
<body>
        <!--Nota: Es importante incluir el atributo 'allow' en tu iframe si el método de autenticación solicita una foto del firmante -->
	<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>

Cada firmante tiene su propio token, y el enlace se realiza automáticamente cuando se crea el documento. Consulta la sección "Tipos de Tokens" para más información.

Usando window.onmessage en los Widgets

La función window.onmessage es opcional, pero ayuda a proporcionar retroalimentación inmediata al usuario, asegurando una experiencia de firma más rápida y eficiente. Los eventos disponibles incluyen: carga del documento, finalización de la firma y disponibilidad del archivo firmado para su descarga.

Cover

zs-doc-loaded: cuando el PDF termina de cargarse en la pantalla del firmante.

Cover

zs-doc-signed: cuando el firmante firma el documento con éxito.

Cover

zs-signed-file-ready: cuando el PDF final está listo para descargar (es cuando se habilita el botón "descargar firmado").

Atributo allow

En el widget de ZapSign, el atributo allow en el elemento <iframe> permite el acceso a la cámara del dispositivo cuando sea necesario, como para capturar una foto del firmante o del documento durante el proceso de firma. Incluir el atributo allow="camera" garantiza que el widget pueda solicitar acceso a la cámara si esta opción de firma está habilitada.

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.

Los documentos que utilizan autenticación de reconocimiento facial o validación de identidad requieren configuraciones adicionales para asegurar la seguridad de toda la aplicación. Si necesitas esta funcionalidad o tienes preguntas sobre cómo integrarla en tu flujo de trabajo, no dudes en contactar a nuestro equipo de soporte en [email protected].

PreviousEliminar Webhook

Last updated

Was this helpful?