Firma electrónica multilingüe: cómo localizar la firma integrada en 15 idiomas

Si va a integrar la experiencia de firma de Firma.dev en su aplicación, es probable que desee que coincida con el idioma de su usuario. Esta guía explica cómo gestiona Firma.dev la localización y cómo controlarla en su integración.

Cómo detecta el idioma Firma.dev

Firma.dev utiliza un sistema de detección de 3 niveles, comprobados en este orden:

1. Parámetro de URL (?lang=xx): Máxima prioridad. Si incluye un código de idioma en la URL, eso es lo que verá el usuario.

2. Almacenamiento local: En las visitas recurrentes, Firma.dev comprueba si existe una preferencia de idioma en caché. Esto permite seleccionar el idioma al instante sin necesidad de realizar una petición de red.

3. Detección del navegador: Recurre a la configuración de idioma del navegador o del sistema del usuario.

Si el idioma detectado no es uno de los 15 idiomas admitidos, Firma.dev utiliza el inglés de forma predeterminada.

Idiomas admitidos

Firma.dev admite estos idiomas de forma nativa:

Todos los elementos de la interfaz de usuario, botones, etiquetas, notificaciones, correos electrónicos y mensajes de error están totalmente traducidos en cada idioma.

Control del idioma en la firma integrada

Cuando se integra el flujo de firma en un iframe, la detección del navegador no funciona de manera fiable. El iframe hereda el contexto de la página principal, no la configuración del navegador del usuario. Es necesario pasar el idioma de forma explícita.

Añada el parámetro ?lang= a la URL de firma:

<iframe
  src="https://app.firma.dev/signing/{signing_request_user_id}?lang=es"
  style="width:100%;height:900px;border:0;"
  allow="camera;microphone;clipboard-write"
  title="Firmar Documento"
></iframe>

<iframe
  src="https://app.firma.dev/signing/{signing_request_user_id}?lang=es"
  style="width:100%;height:900px;border:0;"
  allow="camera;microphone;clipboard-write"
  title="Firmar Documento"
></iframe>

<iframe
  src="https://app.firma.dev/signing/{signing_request_user_id}?lang=es"
  style="width:100%;height:900px;border:0;"
  allow="camera;microphone;clipboard-write"
  title="Firmar Documento"
></iframe>

Fuente: Guía de localización

Esto fuerza que la interfaz de firma se muestre en español, independientemente de la configuración del navegador del usuario.

Obtención de URLs de firma y renderizado del iframe

A continuación se muestra cómo obtener la URL de firma desde la API y renderizarla dinámicamente:

// fetch signing request
const r = await fetch('/internal/signing-request/' + signingRequestId)
const json = await r.json()

// get recipient signing URL
const recipient = json.recipients[0]
const signingUrl = recipient.signing_url || `https://app.firma.dev/signing/${recipient.id}`

// render iframe
const iframe = document.createElement('iframe')
iframe.src = signingUrl
iframe.style.width = '100%'
iframe.style.height = '900px'
iframe.frameBorder = '0'
iframe.allow = 'camera;microphone;clipboard-write'
document.getElementById('signing-root').appendChild(iframe)

// fetch signing request
const r = await fetch('/internal/signing-request/' + signingRequestId)
const json = await r.json()

// get recipient signing URL
const recipient = json.recipients[0]
const signingUrl = recipient.signing_url || `https://app.firma.dev/signing/${recipient.id}`

// render iframe
const iframe = document.createElement('iframe')
iframe.src = signingUrl
iframe.style.width = '100%'
iframe.style.height = '900px'
iframe.frameBorder = '0'
iframe.allow = 'camera;microphone;clipboard-write'
document.getElementById('signing-root').appendChild(iframe)

// fetch signing request
const r = await fetch('/internal/signing-request/' + signingRequestId)
const json = await r.json()

// get recipient signing URL
const recipient = json.recipients[0]
const signingUrl = recipient.signing_url || `https://app.firma.dev/signing/${recipient.id}`

// render iframe
const iframe = document.createElement('iframe')
iframe.src = signingUrl
iframe.style.width = '100%'
iframe.style.height = '900px'
iframe.frameBorder = '0'
iframe.allow = 'camera;microphone;clipboard-write'
document.getElementById('signing-root').appendChild(iframe)

Fuente: Guía para enviar una solicitud de firma

Para que coincida con la configuración regional de su aplicación, añada el parámetro de idioma al definir la fuente del iframe:

const userLocale = getCurrentUserLocale() // returns 'es', 'de', 'fr', etc.
iframe.src = `${signingUrl}?lang=${userLocale}`

const userLocale = getCurrentUserLocale() // returns 'es', 'de', 'fr', etc.
iframe.src = `${signingUrl}?lang=${userLocale}`

const userLocale = getCurrentUserLocale() // returns 'es', 'de', 'fr', etc.
iframe.src = `${signingUrl}?lang=${userLocale}`

Esto mantiene la experiencia de firma coherente con el resto de su aplicación.

Buenas prácticas

Estas directrices proceden directamente de la documentación de Firma.dev:

• Utilice el parámetro lang en la firma integrada: No confíe en la detección del navegador en contextos de iframe. Indique el idioma de forma explícita para garantizar una experiencia uniforme.

• Haga coincidir la configuración regional de su aplicación: Al integrar Firma.dev, pase la misma configuración regional que utiliza su aplicación para que la experiencia de firma sea totalmente fluida.

• Permita que los usuarios elijan: Para los enlaces directos de Firma.dev (por ejemplo, en correos electrónicos), omita el parámetro lang y deje que la detección automática de Firma.dev se encargue de ello. Los usuarios que hayan establecido una preferencia verán el idioma elegido.

Fuente: Guía de localización

Firma.dev traduce la interfaz de firma y sus correos electrónicos, y su documento aparece exactamente tal y como lo subió. Un firmante en Madrid verá los botones y las instrucciones en español alrededor de cualquier idioma en el que esté redactado el contrato. Si sus firmantes leen en otro idioma, traduzca el archivo antes de subirlo. Un traductor profesional con IA como Lara Translate le proporciona un borrador rápidamente y le permite añadir contexto para guiar la traducción. En el caso de contratos y otros documentos delicados, haga que un revisor cualificado —idealmente alguien que conozca el derecho contractual del país del firmante— revise la versión traducida antes de enviarla a firmar.

Localización en otros componentes integrables

El parámetro ?lang= funciona de la misma manera para los demás componentes integrables de Firma.dev:

• Editor de plantillas integrable: Para crear y editar plantillas de documentos

• Editor de solicitudes de firma integrable: Para configurar destinatarios y opciones de envío

Ambos utilizan autenticación JWT y admiten los 15 idiomas. Consulte la Guía del editor de solicitudes de firma integrable para obtener más información sobre su implementación.

Una nota sobre la infraestructura

Firma.dev está alojado en la UE (región de AWS París), lo que se complementa perfectamente con el soporte multilingüe si atiende a mercados europeos. La plataforma cumple con el RGPD y eIDAS (niveles SES y AdES) para responder a las necesidades normativas regionales.

Próximos pasos

Para consultar la referencia técnica completa, revise la Guía de localización en la documentación. En ella se tratan casos específicos como equipos con varios idiomas y el comportamiento de persistencia del idioma.

¿Listo para empezar a desarrollar? Obtener clave API y comience a integrar firmas electrónicas localizadas. No se requiere tarjeta de crédito.