JS SDK Reference

npm install @allsign/embedded

<script src="https://js.allsign.io/v1/embed.js" async></script>

import { AllSign } from '@allsign/embedded';

const session = AllSign.init({
  clientSecret: 'as_sess_xxx_secret_yyy',
  // callbacks y opciones (ver tabla más abajo)
});

const session = AllSign.init({
  clientSecret: 'as_sess_xxx_secret_yyy',
  locale: 'es-MX',
  theme: { primaryColor: '#1a73e8' },
  onSuccess: (result) => { /* firmado */ },
  onExit: (metadata) => { /* cerró */ },
  onEvent: (event) => { /* progreso */ },
});

session.modal();

const session = AllSign.init({
  clientSecret: 'as_sess_xxx_secret_yyy',
  locale: 'es-MX',
  values: { nombre: 'Juan', rfc: 'ABC123' },
  onSuccess: (result) => { /* firmado */ },
});

session.inline('#firma-container');

<div id="firma-container" style="width: 100%; height: 600px;"></div>

const session = AllSign.init({
  clientSecret: 'as_sess_xxx_secret_yyy',
  onSuccess: (result) => { /* firmado */ },
});

session.slider({
  position: 'right',  // 'left' o 'right'
  width: 600,         // ancho en px (default: 500)
});

npm install @allsign/embedded

import { useAllSignLink } from '@allsign/embedded/react';

function SignButton({ clientSecret }) {
  const { open, ready, error } = useAllSignLink({
    clientSecret,
    mode: 'modal',  // 'modal' | 'inline' | 'slider'

    onSuccess: (result) => {
      // result.signatureId — UUID de la firma
      // result.documentId  — UUID del documento
      // result.signedAt    — timestamp ISO-8601
      console.log('Firmado:', result.signatureId);
    },

    onExit: (metadata) => {
      // metadata.reason — 'completed' | 'cancelled' | 'expired' | 'error'
      // metadata.lastStep — último paso completado ('otp', 'id_scan', 'signature')
      console.log('Salió en:', metadata.lastStep);
    },

    onEvent: (event) => {
      // Eventos granulares para analytics y UI
      // event.name — 'OTP_SENT', 'OTP_VERIFIED', 'ID_SCAN_STARTED',
      //              'ID_SCAN_COMPLETED', 'DOCUMENT_VIEWED',
      //              'SIGNATURE_DRAWN', 'SIGNATURE_SUBMITTED'
      // event.timestamp — ISO-8601
      // event.metadata — datos adicionales del paso
      console.log('Evento:', event.name);
    },
  });

  if (error) return <p>Error: {error.message}</p>;

  return (
    <button onClick={open} disabled={!ready}>
      Firmar documento
    </button>
  );
}

interface SigningResult {
  signatureId: string;    // UUID de la firma
  documentId: string;     // UUID del documento
  signerEmail: string;    // Email del firmante
  signedAt: string;       // Timestamp ISO-8601
}

interface ExitMetadata {
  reason: 'completed' | 'cancelled' | 'expired' | 'error';
  lastStep: 'otp' | 'id_scan' | 'variables' | 'document_view' | 'signature' | null;
  sessionId: string;
  documentId: string;
  error?: {
    code: string;
    message: string;
  };
}

interface SigningEvent {
  name: string;        // Nombre del evento
  timestamp: string;   // ISO-8601
  metadata: Record<string, any>;
}

const session = AllSign.init({ clientSecret: '...' });
session.inline('#container');

// Después...
session.close();

useEffect(() => {
  const session = AllSign.init({ clientSecret });
  session.inline('#container');
  return () => session.unmount();
}, [clientSecret]);

<div
  data-allsign-session="as_sess_xxx_secret_yyy"
  data-allsign-mode="inline"
  data-allsign-locale="es-MX"
  data-allsign-theme-primary="#1a73e8"
  data-allsign-theme-button-text="Firmar contrato"
  style="width: 100%; height: 600px;">
</div>

<script src="https://js.allsign.io/v1/embed.js" async></script>

document.addEventListener('allsign:success', (e) => {
  console.log('Firmado:', e.detail.signatureId);
});

document.addEventListener('allsign:exit', (e) => {
  console.log('Razón:', e.detail.reason);
});

import type {
  AllSignSession,
  AllSignInitOptions,
  SigningResult,
  ExitMetadata,
  SigningEvent,
  ThemeOptions,
} from '@allsign/embedded';

import type {
  UseAllSignLinkOptions,
  UseAllSignLinkReturn,
} from '@allsign/embedded/react';

const session = AllSign.init({
  clientSecret: '...',
  onExit: (metadata) => {
    if (metadata.reason === 'error') {
      switch (metadata.error?.code) {
        case 'SESSION_EXPIRED':
          // El client_secret expiró — genera uno nuevo en tu backend
          refreshSession();
          break;
        case 'SESSION_INVALID':
          // Token inválido o ya consumido
          showError('Esta sesión de firma ya no es válida.');
          break;
        case 'NETWORK_ERROR':
          // Error de red
          showError('Error de conexión. Intenta de nuevo.');
          break;
        case 'DOCUMENT_NOT_FOUND':
          showError('El documento ya no está disponible.');
          break;
        case 'DOCUMENT_COMPLETED':
          showInfo('Este documento ya fue firmado.');
          break;
        case 'DOCUMENT_CANCELLED':
          showError('Este documento fue anulado.');
          break;
      }
    }
  },
});