<SYSTEM>This is the abridged developer documentation for Legaldoc.io API</SYSTEM>

# Documentación de Legaldoc.io

> Bienvenido a la documentación de la API de Legaldoc.io. Una interfaz robusta y confiable para integrar firma electrónica y gestión documental en tus sistemas.

## Empieza aquí [Sección titulada «Empieza aquí»](#empieza-aquí) [Guía de IntegraciónEl flujo completo paso a paso: autenticación, generar documento desde una plantilla, enviar a firma e incrustar el widget.](/guides/integration-guide/)[Referencia de la APIDocumentos, Plantillas, Destinatarios y Campos — cada endpoint con ejemplos de código listos para usar.](/api/)[Web ComponentsIncorpora la firma de documentos en aplicaciones sin framework.](/guides/web-components/)[Variables CSSPersonaliza colores, espaciado y tipografía de la experiencia integrada.](/guides/css-variables/) ## Documentación lista para agentes de IA [Sección titulada «Documentación lista para agentes de IA »](#documentación-lista-para-agentes-de-ia) Todo el contenido se publica también como Markdown plano, `llms.txt` y OpenAPI, para que un LLM o un agente de desarrollo pueda leer la documentación completa sin ejecutar JavaScript. [Cómo usar estos docs con IAQué formato conviene según tu herramienta, y cómo apuntar un agente a esta documentación.](/ai/)[llms.txtEl índice del sitio en el formato estándar de llmstxt.org.](/llms.txt)

# Página no encontrada

> La página que buscas no existe o cambió de dirección. Usa el buscador o vuelve al inicio. — The page you are looking for doesn’t exist or has moved. Try the search or head back home.


# Documentación para agentes de IA

> Cómo consumir la documentación de Legaldoc.io desde un LLM, un agente de desarrollo o cualquier herramienta automatizada.

Esta documentación está pensada para que la lean tanto personas como agentes de IA. Todo el contenido se genera como HTML estático y Markdown plano —no hace falta ejecutar JavaScript para leerlo— y en cada build se publican automáticamente los formatos de abajo. ## Qué formato conviene usar [Sección titulada «Qué formato conviene usar»](#qué-formato-conviene-usar) | Formato | Úsalo cuando… | | ----------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Markdown por página** — p. ej. [`/guides/integration-guide.md`](/guides/integration-guide.md) | Quieres pasarle a un LLM una sola página, o copiarla al chat sin el ruido del HTML. | | [**`/llms.txt`**](/llms.txt) | Quieres que el agente primero descubra qué contiene el sitio y después decida qué leer. Es el índice según el estándar [llmstxt.org](https://llmstxt.org/). | | [**`/llms-full.txt`**](/llms-full.txt) | Quieres cargar todas las guías completas en el contexto de una sola vez. | | [**`/llms-small.txt`**](/llms-small.txt) | Lo mismo, pero en versión reducida para modelos con ventana de contexto chica. | | [**OpenAPI 3.0**](/openapi/swagger-es.json) | Tu herramienta entiende OpenAPI: es la fuente de verdad de la referencia de API (endpoints, schemas y autenticación). También disponible [en inglés](/openapi/swagger-en.json). | ## Markdown de cada página [Sección titulada «Markdown de cada página»](#markdown-de-cada-página) Cada página de guía se publica también como Markdown plano: agrega `.md` a su ruta. 
```plaintext
https://api-docs.legaldoc.io/guides/integration-guide.md
https://api-docs.legaldoc.io/en/guides/integration-guide.md
```
 Además, arriba de cada guía hay botones para **copiar el Markdown** al portapapeles, **verlo** en crudo, o abrir esa página directamente en **ChatGPT**, **Claude** o **Gemini** con el contexto ya cargado. ## Cómo apuntar un agente a esta documentación [Sección titulada «Cómo apuntar un agente a esta documentación»](#cómo-apuntar-un-agente-a-esta-documentación) Para un asistente con acceso a internet, el punto de entrada recomendado es `llms.txt`: 
```text
Lee https://api-docs.legaldoc.io/llms.txt y luego los documentos que necesites
de ahí para ayudarme a integrar la API de Legaldoc.io.
```
 Si va a generar código contra la API, conviene darle directamente la especificación OpenAPI: 
```text
Usa https://api-docs.legaldoc.io/openapi/swagger-es.json como referencia de la
API de Legaldoc.io y ayúdame a implementar el flujo de firma.
```
 ## Autenticación [Sección titulada «Autenticación»](#autenticación) Cualquier código que genere un agente necesita autenticarse. Todas las peticiones a la API llevan la API Key en el header `Authorization`, sin prefijo `Bearer`: 
```http
Authorization: {API_KEY}
Content-Type: application/json
```
 El flujo completo está en la [Guía de Integración](/guides/integration-guide/).

# Variables CSS

> Personaliza la apariencia de la experiencia de firma integrada usando variables CSS.

Los clientes de la plataforma tienen acceso a un conjunto completo de variables CSS que pueden usarse para personalizar la apariencia de la experiencia de firma integrada. Estas variables controlan todo, desde colores hasta espaciado, y pueden usarse para coincidir con el sistema de diseño de tu aplicación. ## Variables Disponibles [Sección titulada «Variables Disponibles»](#variables-disponibles) ### Colores [Sección titulada «Colores»](#colores) | Variable | Descripción | Predeterminado | | ----------------------- | ----------------------------------------- | ----------------------- | | `background` | Color de fondo base | Por defecto del sistema | | `foreground` | Color de texto base | Por defecto del sistema | | `muted` | Color de fondo tenue/sutil | Por defecto del sistema | | `mutedForeground` | Color de texto tenue/sutil | Por defecto del sistema | | `popover` | Color de fondo de popover/dropdown | Por defecto del sistema | | `popoverForeground` | Color de texto de popover/dropdown | Por defecto del sistema | | `card` | Color de fondo de tarjeta | Por defecto del sistema | | `cardBorder` | Color de borde de tarjeta | Por defecto del sistema | | `cardBorderTint` | Color de borde resaltado de tarjeta | Por defecto del sistema | | `cardForeground` | Color de texto de tarjeta | Por defecto del sistema | | `fieldCard` | Color de fondo de tarjeta de campo | Por defecto del sistema | | `fieldCardBorder` | Color de borde de tarjeta de campo | Por defecto del sistema | | `fieldCardForeground` | Color de texto de tarjeta de campo | Por defecto del sistema | | `widget` | Color de fondo de widget | Por defecto del sistema | | `widgetForeground` | Color de texto de widget | Por defecto del sistema | | `border` | Color de borde predeterminado | Por defecto del sistema | | `input` | Color de borde de campo de entrada | Por defecto del sistema | | `primary` | Color de acción/botón principal | Por defecto del sistema | | `primaryForeground` | Color de texto de acción/botón principal | Por defecto del sistema | | `secondary` | Color de acción/botón secundario | Por defecto del sistema | | `secondaryForeground` | Color de texto de acción/botón secundario | Por defecto del sistema | | `accent` | Color de acento/resaltado | Por defecto del sistema | | `accentForeground` | Color de texto de acento/resaltado | Por defecto del sistema | | `destructive` | Color de acción destructiva/peligrosa | Por defecto del sistema | | `destructiveForeground` | Color de texto destructivo/peligroso | Por defecto del sistema | | `ring` | Color del anillo de enfoque | Por defecto del sistema | | `warning` | Color de advertencia/alerta | Por defecto del sistema | ### Espaciado y Diseño [Sección titulada «Espaciado y Diseño»](#espaciado-y-diseño) | Variable | Descripción | Predeterminado | | -------- | ------------------------------------------ | ----------------------- | | `radius` | Tamaño del radio del borde en unidades REM | Por defecto del sistema | ## Ejemplo de Uso [Sección titulada «Ejemplo de Uso»](#ejemplo-de-uso) Así es como usar estas variables en tu implementación de integración: 
```jsx
const cssVars = {
  // Colores
  background: '#ffffff',
  foreground: '#000000',
  primary: '#0000ff',
  primaryForeground: '#ffffff',
  accent: '#4f46e5',
  destructive: '#ef4444',


  // Espaciado
  radius: '0.5rem'
};


//
<legaldoc-embed-sign-document
  token={token}
  cssVars={cssVars}
/>
```
 ## Formato de Color [Sección titulada «Formato de Color»](#formato-de-color) Los colores pueden especificarse en cualquier formato de color CSS válido: * Hexadecimal: `#ff0000` * RGB: `rgb(255, 0, 0)` * HSL: `hsl(0, 100%, 50%)` * Colores con nombre: `red` Los colores se convertirán automáticamente al formato apropiado internamente. ## Mejores Prácticas [Sección titulada «Mejores Prácticas»](#mejores-prácticas) 1. **Mantener Contraste**: Al personalizar colores, asegúrate de que haya suficiente contraste entre los colores de fondo y primer plano para la accesibilidad. 2. **Probar Modo Oscuro**: Si no has deshabilitado el modo oscuro, prueba tus variables de color tanto en modo claro como oscuro. 3. **Usar Colores de Marca**: Alinea los colores primarios y de acento con el esquema de colores de tu marca para una apariencia cohesiva. 4. **Radio Consistente**: Usa un valor de radio de borde consistente que coincida con el sistema de diseño de tu aplicación. ## Objetivos de Clase CSS [Sección titulada «Objetivos de Clase CSS»](#objetivos-de-clase-css) Además de las variables CSS, los componentes específicos en la experiencia integrada pueden ser dirigidos usando clases CSS para un estilo más granular: ### Clases de Componentes [Sección titulada «Clases de Componentes»](#clases-de-componentes) | Nombre de Clase | Descripción | | --------------------------------- | ------------------------------------------------------------------------ | | `.embed--Root` | Contenedor principal para la experiencia de firma integrada | | `.embed--DocumentContainer` | Contenedor para el documento y widget de firma | | `.embed--DocumentViewer` | Contenedor para el visor de documentos | | `.embed--DocumentWidget` | Contenedor del widget de firma | | `.embed--DocumentWidgetContainer` | Contenedor externo para el widget de firma, maneja el posicionamiento | | `.embed--DocumentWidgetHeader` | Sección de encabezado del widget de firma | | `.embed--DocumentWidgetContent` | Área de contenido principal del widget de firma | | `.embed--DocumentWidgetForm` | Sección de formulario dentro del widget de firma | | `.embed--DocumentWidgetFooter` | Sección de pie de página del widget de firma | | `.embed--WaitingForTurn` | Contenedor para la pantalla de espera cuando no es el turno del usuario | | `.embed--DocumentCompleted` | Contenedor para la pantalla de finalización después de firmar | | `.field--FieldRootContainer` | Contenedor base para campos de documento (firmas, texto, casillas, etc.) | Los componentes de campo también exponen varios atributos de datos que pueden usarse para dar estilo a diferentes estados: | Atributo de Datos | Valores | Descripción | | ------------------- | ---------------------------------------------- | -------------------------------- | | `[data-field-type]` | `SIGNATURE`, `TEXT`, `CHECKBOX`, `RADIO`, etc. | El tipo de campo | | `[data-inserted]` | `true`, `false` | Si el campo ha sido llenado | | `[data-validate]` | `true`, `false` | Si el campo está siendo validado | ### Ejemplo de Estilo de Campo [Sección titulada «Ejemplo de Estilo de Campo»](#ejemplo-de-estilo-de-campo) 
```css
/* Estilo para todos los contenedores de campo */
.field--FieldRootContainer {
  transition: all 200ms ease;
}


/* Estilo para tipos de campo específicos */
.field--FieldRootContainer[data-field-type='SIGNATURE'] {
  background-color: rgba(0, 0, 0, 0.02);
}


/* Estilo para campos insertados */
.field--FieldRootContainer[data-inserted='true'] {
  background-color: var(--primary);
  opacity: 0.2;
}


/* Estilo para campos siendo validados */
.field--FieldRootContainer[data-validate='true'] {
  border-color: orange;
}
```
 ### Ejemplo de Uso [Sección titulada «Ejemplo de Uso»](#ejemplo-de-uso-1) 
```css
/* Estilos personalizados para el widget de documento */
.embed--DocumentWidget {
  background-color: #ffffff;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}


/* Estilos personalizados para la pantalla de espera */
.embed--WaitingForTurn {
  background-color: #f9fafb;
  padding: 2rem;
}


/* Ajustes responsivos para el contenedor de documento */
@media (min-width: 768px) {
  .embed--DocumentContainer {
    gap: 2rem;
  }
}
```

# Guía de Integración API

> Guía para implementar un flujo de firma electrónica usando la API de Legaldoc.io y el widget embebido.

Guía para implementar un flujo de firma electrónica usando la API de Legaldoc.io y el widget embebido. *** ## Requisitos Previos [Sección titulada «Requisitos Previos»](#requisitos-previos) * **API Key**: Token de autenticación para la API * **Plantilla configurada**: Una plantilla creada en el portal de Legaldoc.io ### Autenticación [Sección titulada «Autenticación»](#autenticación) Todas las peticiones deben incluir: 
```http
Authorization: {API_KEY}
Content-Type: application/json
```
 *** ## Flujo de Integración [Sección titulada «Flujo de Integración»](#flujo-de-integración) 1. [Obtener IDde la Plantilla](#paso-1-obtener-el-id-de-la-plantilla) 2. [Consultarla Plantilla](#paso-2-consultar-la-plantilla) 3. [Generarel Documento](#paso-3-generar-el-documento) 4. [Enviara firma](#paso-4-enviar-el-documento) 5. [Widgeto URL de firma](#paso-5-widget-embebido) *** ## Paso 1: Obtener el ID de la Plantilla [Sección titulada «Paso 1: Obtener el ID de la Plantilla»](#paso-1-obtener-el-id-de-la-plantilla) El ID se obtiene desde la URL al editar una plantilla: 
```plaintext
https://app.legaldoc.io/t/mi-equipo/templates/18
                                               ↑
                                         Template ID = 18
```
 ### Configuración de Opciones de Email [Sección titulada «Configuración de Opciones de Email»](#configuración-de-opciones-de-email) Si **no deseas** que se envíen correos automáticos a los firmantes, debes configurar las **Opciones de Email** en la edición de la plantilla: 1. En el editor de plantilla, en **General** 2. En la sección **Opciones de Email**, desactivar todos los checkboxes de envío de correo: * ❌ Enviar correo electrónico firma completa del destinatario * ❌ Enviar correo electrónico de solicitud de firma del destinatario * ❌ Enviar correo electrónico de destinatario eliminado * ❌ Enviar correo electrónico de documento pendiente * ❌ Enviar correo electrónico de documento completado * ❌ Enviar correo electrónico de documento borrado * ❌ Enviar correo electrónico de documento completado al propietario > **Nota:** Con estas opciones desactivadas, deberás distribuir manualmente los enlaces de firma usando la API o el widget embebido. *** ## Paso 2: Consultar la Plantilla [Sección titulada «Paso 2: Consultar la Plantilla»](#paso-2-consultar-la-plantilla) Obtener el ID del firmante configurado en la plantilla. ### Request [Sección titulada «Request»](#request) 
```http
GET https://app.legaldoc.io/api/v1/templates/18
```
 ### Response (simplificado) [Sección titulada «Response (simplificado)»](#response-simplificado) 
```json
{
  "id": 18,
  "title": "Mi Contrato.pdf",
  "recipients": [
    {
      "id": 52,
      "name": "Destinatario",
      "email": "destinatario@legaldoc.io",
      "role": "SIGNER"
    }
  ]
}
```
 > **Importante:** Guardar el `recipients[].id` (en este ejemplo: **52**) para el siguiente paso. *** ## Paso 3: Generar el Documento [Sección titulada «Paso 3: Generar el Documento»](#paso-3-generar-el-documento) Crear un documento a partir de la plantilla con los datos reales del firmante. ### Request [Sección titulada «Request»](#request-1) 
```http
POST https://app.legaldoc.io/api/v1/templates/18/generate-document
```
 ### Body [Sección titulada «Body»](#body) 
```json
{
  "title": "Contrato - Cliente ABC",
  "recipients": [
    {
      "id": 52,
      "name": "Juan Pérez",
      "email": "juan.perez@empresa.com"
    }
  ]
}
```
 ### Response [Sección titulada «Response»](#response) 
```json
{
  "documentId": 153,
  "recipients": [
    {
      "recipientId": 174,
      "name": "Juan Pérez",
      "email": "juan.perez@empresa.com",
      "token": "abc123XYZ",
      "role": "SIGNER",
      "signingUrl": "https://app.legaldoc.io/sign/abc123XYZ"
    }
  ]
}
```
 > **Importante:** Guardar el `token` (**abc123XYZ**) para usar en el widget embebido. ### 3.1 Pre-llenar Campos del Documento (Opcional) [Sección titulada «3.1 Pre-llenar Campos del Documento (Opcional)»](#31-pre-llenar-campos-del-documento-opcional) Si necesitas que ciertos campos aparezcan con valores predeterminados, puedes usar `prefillFields`. **Ejemplo:** Pre-llenar un campo de texto con número de cuenta corriente. #### Paso previo: Identificar el campo [Sección titulada «Paso previo: Identificar el campo»](#paso-previo-identificar-el-campo) Del response del **Paso 2** (Consultar Plantilla), busca el campo que deseas prellenar en el array `fields`: 
```json
{
  "id": 526,
  "type": "TEXT",
  "recipientId": 144,
  "fieldMeta": {
    "label": "Cta Corriente",
    "type": "text",
    "required": true
  }
}
```
 > **Nota:** Guarda el `id` del campo (en este ejemplo: **526**). #### Request con campos prellenados [Sección titulada «Request con campos prellenados»](#request-con-campos-prellenados) 
```http
POST https://app.legaldoc.io/api/v1/templates/19/generate-document
```
 
```json
{
  "title": "Contrato Boletín Comercial",
  "recipients": [
    {
      "id": 144,
      "name": "Juan Pérez",
      "email": "juan.perez@empresa.com"
    }
  ],
  "prefillFields": [
    {
      "id": 526,
      "type": "text",
      "label": "Cta Corriente",
      "value": "12323123"
    }
  ]
}
```
 El documento generado tendrá el campo “Cta Corriente” ya completado con el valor `12323123`. #### Hacer el campo de solo lectura [Sección titulada «Hacer el campo de solo lectura»](#hacer-el-campo-de-solo-lectura) Si deseas que el firmante **no pueda modificar** el valor prellenado: 1. En el editor de plantilla de app.legaldoc.io, selecciona el campo, ingresa a **ajustes avanzados** 2. Activa la opción **“Sólo lectura”** en las propiedades del campo 3. Guarda la plantilla De esta forma, el campo aparecerá prellenado y bloqueado para edición. *** ## Paso 4: Enviar el Documento [Sección titulada «Paso 4: Enviar el Documento»](#paso-4-enviar-el-documento) Activar el documento para firma. ### Request [Sección titulada «Request»](#request-2) 
```http
POST https://app.legaldoc.io/api/v1/documents/153/send
```
 ### Response [Sección titulada «Response»](#response-1) 
```json
{
  "message": "Document sent for signing successfully",
  "id": 153,
  "status": "PENDING",
  "recipients": [
    {
      "id": 174,
      "name": "Juan Pérez",
      "email": "juan.perez@empresa.com",
      "token": "abc123XYZ",
      "signingUrl": "https://app.legaldoc.io/sign/abc123XYZ"
    }
  ]
}
```
 *** ## Paso 5: Widget Embebido [Sección titulada «Paso 5: Widget Embebido»](#paso-5-widget-embebido) ### 5.1 Incluir el Script [Sección titulada «5.1 Incluir el Script»](#51-incluir-el-script) 
```html
<script src="https://cdn.legaldoc.io/v1.0/embed.js"></script>
```
 ### 5.2 Agregar el Componente [Sección titulada «5.2 Agregar el Componente»](#52-agregar-el-componente) 
```html
<legaldoc-embed-sign-document
  token="abc123XYZ"
  host="https://app.legaldoc.io"
  css="width: 100%; height: 890px; border: none; border-radius: 8px;"
>
</legaldoc-embed-sign-document>
```
 ### Atributos Disponibles [Sección titulada «Atributos Disponibles»](#atributos-disponibles) | Atributo | Tipo | Descripción | | ------------------ | ------- | --------------------------------- | | `token` | string | **Requerido.** Token del firmante | | `host` | string | URL de Legaldoc.io | | `lockName` | boolean | Bloquea el campo nombre | | `lockEmail` | boolean | Bloquea el campo email | | `darkModeDisabled` | boolean | Deshabilita modo oscuro | | `css` | string | Estilos CSS del iframe | ### 5.3 Ejemplo en Angular [Sección titulada «5.3 Ejemplo en Angular»](#53-ejemplo-en-angular) **Template:** 
```html
<legaldoc-embed-sign-document
  *ngIf="legaldocToken"
  id="legaldoc-component"
  [attr.token]="legaldocToken"
  host="https://app.legaldoc.io"
  css="width: 100%; height: 890px; border: none; border-radius: 8px;"
>
</legaldoc-embed-sign-document>
```
 **Componente:** 
```typescript
@Component({
  selector: "app-firma-documento",
  templateUrl: "./firma-documento.component.html",
})
export class FirmaDocumentoComponent implements OnChanges, AfterViewInit {
  @Input() empresaData: any;
  legaldocToken: string = "";


  constructor(private _cdr: ChangeDetectorRef) {}


  ngOnChanges(changes: SimpleChanges): void {
    if (changes["empresaData"]?.currentValue?.token) {
      this.legaldocToken = changes["empresaData"].currentValue.token;
      this._cdr.detectChanges();
      setTimeout(() => this.configureLegaldocComponent(), 200);
    }
  }


  ngAfterViewInit(): void {
    if (this.empresaData?.token) {
      this.legaldocToken = this.empresaData.token;
      setTimeout(() => this.configureLegaldocComponent(), 100);
    }
  }


  private configureLegaldocComponent(): void {
    const element = document.getElementById("legaldoc-component") as any;
    if (element) {
      element.darkModeDisabled = true;
      element.lockName = true;
      element.lockEmail = true;
      element.cssVars = {
        background: "#ffffff",
        foreground: "#2c3e50",
        primary: "#60B22E",
      };
    }
  }
}
```
 ### 5.4 Ejemplo en React [Sección titulada «5.4 Ejemplo en React»](#54-ejemplo-en-react) 
```jsx
import { useEffect, useRef } from 'react';


export const FirmaDocumento = ({ token }) => {
  const widgetRef = useRef(null);


  useEffect(() => {
    // Cargar script de Legaldoc
    const script = document.createElement('script');
    script.src = 'https://cdn.legaldoc.io/v1.0/embed.js';
    script.async = true;
    document.body.appendChild(script);


    return () => document.body.removeChild(script);
  }, []);


  useEffect(() => {
    if (!token || !widgetRef.current) return;


    const element = widgetRef.current;
    element.darkModeDisabled = true;
    element.lockName = true;
    element.lockEmail = true;
    element.cssVars = {
      background: '#ffffff',
      foreground: '#2c3e50',
      primary: '#60B22E',
    };


    element.onDocumentCompleted = () => {
      console.log('Documento firmado exitosamente');
    };
  }, [token]);


  if (!token) return <div>Cargando...</div>;


  return (
    <legaldoc-embed-sign-document
      ref={widgetRef}
      token={token}
      host="https://app.legaldoc.io"
      style={{ width: '100%', height: '890px', border: 'none', borderRadius: '8px' }}
    />
  );
};
```
 *** ## Personalización del Widget [Sección titulada «Personalización del Widget»](#personalización-del-widget) ### Variables CSS [Sección titulada «Variables CSS»](#variables-css) 
```javascript
element.cssVars = {
  background: "#ffffff", // Fondo
  foreground: "#2c3e50", // Texto
  primary: "#60B22E", // Color principal (botones)
};
```
 ### Eventos [Sección titulada «Eventos»](#eventos) | Evento | Descripción | | --------------------- | --------------------------- | | `onDocumentReady` | Documento listo para firmar | | `onDocumentCompleted` | Firma completada | | `onDocumentError` | Error en el proceso |

# 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 [Sección titulada «Instalación»](#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 [Sección titulada «Uso»](#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 [Sección titulada «Plantilla de Enlace Directo»](#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 [Sección titulada «Atributos»](#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 [Sección titulada «Token de Firma»](#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 [Sección titulada «Atributos»](#atributos-1) | 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 [Sección titulada «Creación vía JavaScript»](#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);
```