# iFrame: ¿cómo funciona?

{% hint style="warning" %}
Para usar el widget, tu aplicación debe ser una aplicación web compatible con JavaScript.
{% endhint %}

### **Agregar el Widget a tu Sitio o App**

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

```markup
<!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>
```

{% hint style="info" %}
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**](/espanol/tipos-de-tokens.md)**"** para más información.
{% endhint %}

***

### 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.<br>

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td></td><td><mark style="background-color:green;"><strong>zs-doc-loaded</strong>:</mark> cuando el PDF termina de cargarse en la pantalla del firmante.</td><td></td><td><a href="/files/lTQ3RRm2s3TeQUhyxRUc">/files/lTQ3RRm2s3TeQUhyxRUc</a></td></tr><tr><td></td><td><mark style="background-color:green;"><strong>zs-doc-signed</strong>:</mark> cuando el firmante firma el documento con éxito.</td><td></td><td><a href="/files/lTQ3RRm2s3TeQUhyxRUc">/files/lTQ3RRm2s3TeQUhyxRUc</a></td></tr><tr><td></td><td><mark style="background-color:green;"><strong>zs-signed-file-ready</strong>:</mark> cuando el PDF final está listo para descargar (es cuando se habilita el botón "descargar firmado").</td><td></td><td><a href="/files/lTQ3RRm2s3TeQUhyxRUc">/files/lTQ3RRm2s3TeQUhyxRUc</a></td></tr></tbody></table>

***

### 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.

<figure><img src="https://github.com/AmandaAmani/documenta-ocurso/blob/main/allow%20camera.gif?raw=true" alt="GIF demonstrating the use of the allow attribute in an iframe, highlighting permission for camera access."><figcaption><p>Example of using the <code>allow</code> attribute in an iframe to enable camera access.</p></figcaption></figure>

{% hint style="warning" %}
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 **<support@zapsign.com.br>**.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.zapsign.com.br/espanol/widget/como-funciona.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
