Personalización

Haz que la experiencia de firma se sienta parte de tu producto. Configura colores, logo, textos y idioma — tus usuarios nunca sabrán que AllSign está por detrás.

Dos niveles de personalización

Nivel	Dónde se configura	Alcance	Uso típico
Brand Profile	API o Dashboard	Todas las firmas de tu cuenta	Configuración base: logo, colores corporativos
Runtime Theme	JS SDK (`theme` option)	Una sesión específica	Override por sesión: textos, colores situacionales

El runtime theme tiene prioridad sobre el brand profile. Si defines primaryColor en ambos, el del SDK gana.

Brand Profiles (vía API)

Crea un perfil de marca que se aplica a todas las sesiones de firma embebida de tu cuenta.

POST

/v2/brand-profiles

curl -X POST "https://api.allsign.io/v2/brand-profiles" \
  -H "Authorization: Bearer allsign_live_sk_TU_API_KEY" \
  -H "Content-Type: multipart/form-data" \
  -F "name=Mi Empresa" \
  -F "logo=@logo.png" \
  -F "primary_color=#1a73e8" \
  -F "background_color=#f8f9fa" \
  -F "button_text_color=#ffffff" \
  -F "hide_allsign_branding=true"

Propiedades del Brand Profile

Propiedad	Tipo	Descripción
`name`	`string`	Nombre de tu empresa (se muestra en el header)
`logo`	`file`	Logo en PNG o SVG (máx 2MB, recomendado 200x60px)
`primary_color`	`string`	Color de botones y acentos (hex)
`background_color`	`string`	Color de fondo del widget
`button_text_color`	`string`	Color del texto en botones
`hide_allsign_branding`	`boolean`	Oculta "Powered by AllSign" del footer

Usar un Brand Profile al crear documentos

Asocia tu perfil de marca al crear un documento:

{
  "title": "Contrato de servicios",
  "signers": [{ "name": "Juan", "email": "juan@empresa.com", "embedded": true }],
  "brand_profile_id": "bp_550e8400-e29b-41d4-a716-446655440000"
}

Runtime Theme (vía JS SDK)

Overrides puntuales al montar el widget. Ideal para adaptar la experiencia por contexto (ej: un botón que diga "Aceptar contrato" en vez de "Firmar").

const session = AllSign.open({
  url: signingUrl,
  container: '#firma-container',
  theme: {
    primaryColor: '#e63946',        // Rojo para urgencia
    backgroundColor: '#f1faee',     // Fondo suave
    buttonText: 'Aceptar y firmar', // Texto contextual
    logo: 'https://mi-app.com/logo-dark.svg',
  }
});

Propiedades del Theme

Propiedad	Tipo	Descripción
`primaryColor`	`string`	Color principal — botones, links, acentos
`backgroundColor`	`string`	Fondo del widget de firma
`buttonText`	`string`	Texto del botón principal (default: "Firmar documento")
`logo`	`string`	URL del logo (override del brand profile)

El theme del SDK tiene prioridad sobre el Brand Profile. Úsalo para overrides situacionales, no como reemplazo de la configuración base.

Locale

El SDK soporta español (México) e inglés de forma nativa.

const session = AllSign.open({
  url: signingUrl,
  container: '#firma-container',
  locale: 'es-MX',  // o 'en-US'
});

Locale	Idioma	Textos incluidos
`es-MX`	Español (México)	Botones, instrucciones, errores, confirmaciones
`en-US`	English (US)	Buttons, instructions, errors, confirmations

El locale afecta todos los textos de la interfaz de firma, excepto los que tú defines en theme.buttonText.

Configuración desde el Dashboard

También puedes gestionar Brand Profiles desde el Dashboard de AllSign:

Ve a Configuración → Marca
Sube tu logo y define tus colores corporativos
Activa "Ocultar branding de AllSign" si lo deseas
El perfil se aplica automáticamente a todas las firmas embebidas

Ejemplo: White-label completo

Combinando Brand Profile + Runtime Theme para una experiencia completamente de marca blanca:

// Brand Profile ya configurado vía API con:
// - Logo de tu empresa
// - Colores corporativos
// - hide_allsign_branding: true

// Runtime: solo ajustes contextuales
const session = AllSign.open({
  url: signingUrl,
  container: '#firma-container',
  locale: 'es-MX',
  theme: {
    buttonText: 'Confirmar y firmar carta porte',  // Texto específico del contexto
  }
});

El resultado: tu usuario ve una interfaz con tu logo, tus colores, sin mención de AllSign, con un botón que dice "Confirmar y firmar carta porte". Detrás, AllSign genera la evidencia NOM-151, timestamps criptográficos y el PDF de evidencia.

Siguiente paso

Eventos y Callbacks — Reacciona a cada paso de la firma
Seguridad — Protege tus sesiones de firma