manyao — Widget de Firmas

🧩 Widget de Firmas

Componente JavaScript embebible que muestra el estado de firma de un documento directamente en tu aplicación web, con actualización en tiempo real.

Scriptmanyao-widget.js

AuthBearer Token

PollingCada 5s (configurable)

✨¿Qué hace el Widget?

Estado de firma de cada firmante con barra de progreso
Código QR para que los firmantes escaneen desde su celular
Gestión de firmantes (agregar / eliminar) sin salir de tu app
Certificados de firma con foto, prueba de vida y datos biométricos
Visor y descarga del PDF original o firmado
Firma asistida — modal con cámara en la misma máquina

📡Flujo de Integración

sequenceDiagram participant F as Tu Frontend participant B as Tu Backend participant A as API Manyao participant W as Widget B->>A: POST /v1/auth/token (client_id + client_secret) A-->>B: access_token B->>A: POST /v1/documents (PDF + firmantes) A-->>B: document_uuid F->>B: GET /api/widget-token/:docId B-->>F: { token, documentId } F->>W: script data-document="UUID" data-token="TOKEN" W->>A: GET /v1/widget/{uuid} (polling cada 5s) A-->>W: estado actualizado Note over W: Se actualiza automáticamente cuando los firmantes firman

⚠️ Nunca expongas tu client_id/client_secret en el frontend. El token del widget lo debe obtener tu backend y pasarlo al frontend.

⚙️Instalación

Opción A — Carga estática (HTML)

<!-- Contenedor del widget -->
<div id="manyao-widget"></div>

<!-- Script del widget -->
<script src="https://manyao.pe/widget/manyao-widget.js"
        data-document="UUID_DEL_DOCUMENTO"
        data-token="BEARER_TOKEN"
        data-container="manyao-widget">
</script>

Opción B — Carga dinámica (JavaScript)

async function loadManyaoWidget(docUuid) {
  // 1. Tu backend obtiene el Bearer token
  const resp = await fetch('/tu-api/manyao-token');
  const { token } = await resp.json();

  // 2. Cargar widget dinámicamente
  const script = document.createElement('script');
  script.src = 'https://manyao.pe/widget/manyao-widget.js';
  script.dataset.document = docUuid;
  script.dataset.token = token;
  script.dataset.container = 'manyao-widget';
  document.body.appendChild(script);
}

loadManyaoWidget('tu-document-uuid');

🎛️Atributos de Configuración

Requeridos

Atributo	Tipo	Descripción
data-document	string	UUID del documento a mostrar
data-token	string	Bearer token de lectura — no crea documentos ni consume créditos

Configuración básica

Atributo	Tipo	Descripción	Default
data-container	string	ID del elemento HTML donde renderizar	`manyao-widget`
data-api	string	URL base de la API del widget	`https://manyao.pe/v1/widget`
data-sign-url	string	URL base para enlaces de firma y QR	`https://manyao.whatsign.com`
data-poll	number	Intervalo de polling en ms	`5000`

Apariencia visual

Atributo	Descripción	Default
data-accent	Color de acento CSS (hex, rgb…). Afecta botones, badges, bordes y panel QR	`#0F766E`
data-title-size	Tamaño de fuente del título del documento	inherit
data-title-color	Color del título del documento	inherit
data-subtitle-size	Tamaño de fuente del subtítulo / metadatos	inherit
data-subtitle-color	Color del subtítulo / metadatos	inherit

Visibilidad de controles

Atributo	Descripción	Default
data-qr-open	Panel QR abierto al cargar. `false` para empezar colapsado	`true`
data-show-add-signer	Mostrar botón "Agregar firmante"	`true`
data-show-remove-signer	Mostrar botón eliminar firmante en cada fila	`true`
data-show-reopen	Mostrar botón "Reabrir" en documentos expirados o parciales	`true`
data-show-partial	Mostrar botón de firma parcial cuando hay firmantes pendientes	`true`
data-show-powered-by	Mostrar el badge "Powered by Manyao" al pie del widget	`true`
data-show-metadata-value	Mostrar valores de `metadata` del firmante como badges junto al nombre	`false`

Etiquetas personalizables

Atributo	Descripción	Default
data-label-partial	Texto del botón de firma parcial	`Firma parcial`
data-label-reopen	Texto del botón reabrir documento	`Reabrir`
data-label-qr-tab	Texto del tab/panel del código QR	`Firmar participantes`

💻Backend — Endpoint del Token (Node.js)

// GET /api/widget-token/:docId
app.get('/api/widget-token/:docId', async (req, res) => {
  const auth = await fetch('https://api.manyao.pe/v1/auth/token', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      client_id: process.env.MANYAO_CLIENT_ID,
      client_secret: process.env.MANYAO_CLIENT_SECRET,
      grant_type: 'client_credentials'
    })
  });
  const { access_token } = await auth.json();
  res.json({ token: access_token, documentId: req.params.docId });
});

🐘Backend — Endpoint del Token (PHP)

// GET /api/widget-token.php?doc=UUID
$ch = curl_init('https://api.manyao.pe/v1/auth/token');
curl_setopt_array($ch, [
    CURLOPT_POST           => true,
    CURLOPT_POSTFIELDS     => json_encode([
        'client_id'     => getenv('MANYAO_CLIENT_ID'),
        'client_secret' => getenv('MANYAO_CLIENT_SECRET'),
        'grant_type'    => 'client_credentials'
    ]),
    CURLOPT_HTTPHEADER     => ['Content-Type: application/json'],
    CURLOPT_RETURNTRANSFER => true,
]);
$resp = json_decode(curl_exec($ch), true);

header('Content-Type: application/json');
echo json_encode([
    'token'      => $resp['access_token'],
    'documentId' => $_GET['doc']
]);

manyao.pe — Firma digital con validación biométrica