Presentamos el soporte de incrustación para Documenso

Cuando lanzamos Documenso por primera vez, una de las características más solicitadas fue la incorporación. Sabíamos que era importante y estaba alineado con nuestro deseo de no ser solo una aplicación de firma electrónica, sino de proporcionar la infraestructura de firma electrónica para la web y más allá.

Dicho esto, decidimos esperar inicialmente para poder concentrarnos en construir una aplicación central sólida y bien equipada. Mirando atrás, esta fue definitivamente la decisión correcta. La incorporación es tan buena como las características que la respaldan, y no queríamos lanzar algo que no estaba listo para cumplir las expectativas de los usuarios y desarrolladores.

Durante el último año, hemos estado ocupados añadiendo toneladas de nuevas características y alcanzando nuevos niveles de cumplimiento, como la Parte 11 del 21 CFR. También hemos introducido nuevos campos, desarrollado una API, agregado webhooks, integraciones con Zapier, y mucho más.

Ahora que hemos establecido una base sólida, finalmente es hora de centrarnos en la incorporación, la característica más solicitada tanto por nuestros usuarios como por aquellos que alojan nuestra plataforma de forma independiente.

Por qué la incorporación tomó tiempo

En proyectos anteriores, a menudo he visto la incorporación construida mediante la agrupación de componentes para su uso en el sitio web o la aplicación de un cliente. Este método brinda a los usuarios la máxima flexibilidad en cuanto a diseño y comportamiento, mientras evita ciertos problemas de origen cruzado. Sin embargo, también puede introducir problemas como conflictos de código o cuellos de botella en el rendimiento. Por ejemplo, herramientas de terceros como Google Tag Manager (GTM) u otros scripts de marketing pueden interferir con tu SDK. Además, el SDK debe permanecer ligero para evitar ralentizar la página del cliente.

Para Documenso, decidimos explorar un enfoque diferente. Después de investigar cuidadosamente nuestras opciones, optamos por una solución basada en iframe. Aunque los iframes son típicamente menos flexibles—especialmente en lo que respecta a la temática o el paso de datos prellenados que contienen información de identificación personal (PII)—identificamos formas de mitigar estas preocupaciones.

Uno de los mayores desafíos fue garantizar que pudiéramos pasar datos sensibles, como correos electrónicos para prellenar formularios, sin exponer la PII a nuestro servidor. Para resolver esto, utilizamos identificadores de fragmento en la URL, que se procesan del lado del cliente y nunca se envían en solicitudes de red. Este método asegura que la PII esté protegida y no registrada por nuestro servidor ni por ningún servicio web intermedio.

Usando la API de PostMessage para la comunicación

Para mantener un alto nivel de interactividad, nuestros iframes se comunican con la ventana principal utilizando la API postMessage. Esto nos permite notificar a la aplicación principal cuando ocurren eventos específicos dentro del iframe, creando una experiencia de usuario más dinámica y cerrando la brecha entre nuestra solución basada en iframes y los SDKs típicos.

Además, las props se pasan al iframe a través del identificador de fragmento de la URL. Esto evita la necesidad de una sincronización de datos bidireccional compleja entre los cuadros superior e inferior, haciendo que el sistema sea estable y más confiable.

Construyendo las incrustaciones con Mitosis

Dado que nuestra solución de iframe es bastante ligera, vimos esto como una gran oportunidad para experimentar con Mitosis, lo que nos permitiría hacer algo verdaderamente especial. Para aquellos que no están familiarizados, Mitosis es un proyecto de Builder.io que te permite escribir componentes una vez y luego transpilaros a una variedad de frameworks como React, Vue y Svelte.

Usamos Mitosis para construir dos componentes clave: una incrustación de plantilla directa y una incrustación de firma de documentos. La plantilla directa permite a los usuarios utilizar una plantilla como si fuera un documento perenne, lo que significa que, cuando alguien completa la plantilla, se genera automáticamente un nuevo documento. Este es el caso de uso que esperamos que la mayoría de los usuarios adopten para la incorporación. Para flujos de trabajo más avanzados, también ofrecemos una incrustación de firma de documentos, que puede manejar flujos de trabajo de múltiples destinatarios y otros escenarios complejos destinados a su uso en integraciones más profundas y ricas.

Mitosis nos permitió dirigirse rápidamente a varios frameworks populares, incluyendo React, Preact, Vue, Svelte, y SolidJS.

También tenía la esperanza de incluir Angular, pero aunque Mitosis facilita enormemente la transpiralción de componentes, aún tenemos que encargarnos nosotros mismos de agrupar y empaquetar el componente resultante. Mientras que los frameworks anteriores pueden agruparse utilizando Vite.js, Angular aún tiene su propio conjunto de herramientas que tendríamos que aprender y usar. Dada esta limitación, optamos por poner Angular en espera por ahora mientras esperamos que el soporte más nuevo de Vite.js madure.

Desafíos y lecciones con Mitosis y más

Aunque nuestra experiencia con Mitosis fue en gran medida positiva, hubo algunos desafíos en el camino. Por ejemplo, ciertas propiedades de estado con los mismos nombres que las props causaron problemas durante el proceso de transpiración, provocando errores de tipo y resultados de transpiración inesperados con algunos objetivos.

Este también fue un desafío, ya que nuestra implementación inicial de los dos componentes tenía una separación de preocupaciones menor que también resultó en algunos problemas de transpiralción con algunos objetivos. Abordamos esto eliminando la separación de preocupaciones por ahora, ya que era principalmente por mostrar en lugar de por necesidad.

Además, empaquetar y publicar las incrustaciones planteó su propio conjunto de desafíos, particularmente dado la creciente complejidad de la gestión de paquetes de JavaScript. Herramientas como Publint ayudaron a agilizar el proceso al asegurar que siguiéramos las mejores prácticas para los formatos CommonJS y ESM.

Hacia el futuro, la plataforma Documenso

Con la función de incorporación ahora en su lugar, estamos emocionados de seguir expandiendo las capacidades de Documenso. Las incrustaciones son solo el comienzo de lo que llamamos la plataforma Documenso. A través de nuestra investigación de usuarios, hemos aprendido que aunque muchas empresas aprecian tener una solución de firma electrónica flexible, están aún más interesadas en utilizar nuestras herramientas para construir funcionalidad de firma directamente en sus propias aplicaciones—sin preocuparse por las complejidades técnicas del cumplimiento y la seguridad que acompañan a la firma electrónica.

En los próximos meses, estaremos trabajando en mejorar nuestra API, fortaleciendo las integraciones con herramientas como Zapier y mejorando nuestro sistema de webhook. Nuestro objetivo es dar a los usuarios la capacidad de incrustar firmas electrónicas y gestión de documentos donde las necessiten, ya sea a través de autoalojamiento o utilizando Documenso como una plataforma. ¡No podemos esperar a ver cómo nuestros usuarios y quienes se autoalojan aprovechan estas nuevas capacidades!

¿Listo para comenzar?

Si estás listo para incrustar la firma de documentos en tu propia aplicación o sitio web, consulta nuestra documentación de incorporación para ver lo fácil que es comenzar. ¡Encontrarás todo lo que necesitas para comenzar hoy!

¡Siempre estamos aquí para ayudar! Si tienes preguntas o necesitas soporte, únete a nuestro Discord o reserva una demo. Nos encantaría saber cómo estás usando Documenso o queriendo usar Documenso para mejorar tu flujo de trabajo.

¡Mantente atento a más actualizaciones mientras continuamos evolucionando la plataforma Documenso y hacemos que sea aún más fácil incorporar la firma de documentos en tus flujos de trabajo!