# Integración de Componentes Web

> Aprende cómo usar nuestra integración vía Componentes Web en tu aplicación web.

Nuestros Componentes Web proporcionan una forma simple de integrar una experiencia de firma dentro de tu aplicación web sin framework. Soporta tanto plantillas de enlace directo como tokens de firma.

## Instalación

En tu archivo HTML, agrega lo siguiente para añadir el script, reemplazando la ruta con la ruta apropiada al script del componente web.

```html
<script src='https://cdn.legaldoc.io/v1.0/embed.js'></script>
```

## Uso

Para integrar una experiencia de firma, necesitarás proporcionar el token para el documento que deseas integrar. Esto se puede hacer de diferentes maneras, dependiendo de tu caso de uso.

### Plantilla de Enlace Directo

Si tienes una plantilla de enlace directo, puedes simplemente proporcionar el token para la plantilla al tag `legaldoc-embed-direct-template`.

```html
<legaldoc-embed-direct-template
  token="TU_TOKEN_AQUI"
</legaldoc-embed-direct-template>
```

#### Atributos

| Atributo                | Tipo                | Descripción                                                                                |
| ------------------- | ------------------- | ------------------------------------------------------------------------------------------ |
| token               | string              | El token para el documento que deseas integrar                                             |
| name                | string (opcional)   | El nombre del firmante que se usará por defecto para firmar                               |
| lockName            | boolean (opcional)  | Si el campo de nombre debe estar bloqueado no permitiendo modificaciones                  |
| email               | string (opcional)   | El email del firmante que se usará por defecto para firmar                                |
| lockEmail           | boolean (opcional)  | Si el campo de email debe estar bloqueado no permitiendo modificaciones                   |
| onDocumentReady     | function (opcional) | Una función de callback que se llamará cuando el documento esté cargado y listo para firmar |
| onDocumentCompleted | function (opcional) | Una función de callback que se llamará cuando el documento haya sido completado           |
| onDocumentError     | function (opcional) | Una función de callback que se llamará cuando ocurra un error con el documento            |
| onFieldSigned       | function (opcional) | Una función de callback que se llamará cuando un campo sea firmado                        |
| onFieldUnsigned     | function (opcional) | Una función de callback que se llamará cuando un campo sea desfirmado                     |

### Token de Firma

Si tienes un token de firma, puedes proporcionarlo al tag `legaldoc-embed-sign-document`.

```html
<legaldoc-embed-sign-document
  token="TU_TOKEN_AQUI"
</legaldoc-embed-sign-document>
```

#### Atributos

| Atributo                | Tipo                | Descripción                                                                                |
| ------------------- | ------------------- | ------------------------------------------------------------------------------------------ |
| token               | string              | El token para el documento que deseas integrar                                             |
| name                | string (opcional)   | El nombre del firmante que se usará por defecto para firmar                               |
| lockName            | boolean (opcional)  | Si el campo de nombre debe estar bloqueado no permitiendo modificaciones                  |
| onDocumentReady     | function (opcional) | Una función de callback que se llamará cuando el documento esté cargado y listo para firmar |
| onDocumentCompleted | function (opcional) | Una función de callback que se llamará cuando el documento haya sido completado           |
| onDocumentError     | function (opcional) | Una función de callback que se llamará cuando ocurra un error con el documento            |

### Creación vía JavaScript

También puedes crear el elemento tag usando JavaScript, para la generación dinámica de cualquiera de los modos. Por ejemplo, esto agregaría el embed de firma de documento al DOM.

```javascript
document.getElementById('mi-contenedor-aqui').innerHTML = '';

const tag = document.createElement('legaldoc-embed-sign-document');
tag.setAttribute('token', data.token);
tag.style.width = '100%';
tag.style.height = '100%';

document.getElementById('mi-contenedor-aqui').appendChild(tag);
```