Un editor de email integrado que se sienta nativo

Un editor de email integrado puede utilizar tu color de marca y seguir pareciendo una salida de tu producto. Los usuarios perciben una navegación diferente, estados de guardado desconocidos o cambios de idioma que parecen alterar su trabajo.

Una experiencia nativa se construye con continuidad. Encaja primero el editor en la tarea y después utiliza las opciones visuales disponibles para que la transición resulte coherente.

Integra el editor en la tarea del usuario

Imagina a un cliente preparando un anuncio desde la pantalla Campañas de tu aplicación. Espera reconocer el nombre de la campaña, saber si sus cambios están guardados y regresar a esa misma campaña al terminar.

Mantén visibles esas responsabilidades del producto anfitrión. Evita dos barras de navegación que parezcan controlar todo el recorrido. Distingue la edición del mensaje de la selección de destinatarios y la autorización del envío, aunque estén cerca en la interfaz.

Usa los términos que tu aplicación ya enseña. Si llama «borrador» al trabajo pendiente, una referencia inesperada a «proyecto» introduce otro concepto. Un poco de coherencia verbal suele aportar más que igualar perfectamente el radio de todas las esquinas.

Relaciona los roles visuales con ajustes compatibles

Empieza por los roles de tu sistema de diseño: acción principal, fondo de trabajo, superficie de paneles, fondo de controles y texto. Asigna esos roles deliberadamente en lugar de repetir el mismo color de marca en todos los ajustes.

El tema de Weavour incluye primaryColor, backgroundColor, surfaceColor, shellColor, inputColor, colores de texto, cornerRadius, density y fontFamily. Utiliza valores admitidos y verifica el resultado. Una iframe es un documento independiente; aplicar estilos a su contenedor no implica acceso arbitrario a los controles internos.

Una aplicación con paneles claros y campos más oscuros puede configurar por separado la superficie general y los controles. Mantén independientes los colores del email exportado. Cambiar la apariencia del editor no debería rediseñar el anuncio de un cliente a mitad de la edición.

Haz predecibles los cambios de idioma

El idioma de interfaz y el idioma del mensaje responden a necesidades diferentes. Un autor hispanohablante puede preparar un anuncio en inglés. Cambiar los controles al español debe ayudarle a trabajar sin traducir el contenido que ya ha aprobado.

Weavour ofrece etiquetas de interfaz en inglés, francés y español. Su método updateConfig permite cambiar el idioma y los ajustes de presentación compatibles sin sustituir el documento. Incluye esa distinción en la política lingüística de tu aplicación y pruébala con contenido real.

Decide también qué mensajes pertenecen al anfitrión: errores de autenticación, fallos de persistencia, validación de audiencia y aprobación de envío. Localízalos junto al resto del producto. Un editor traducido rodeado de errores sin traducir sigue produciendo una experiencia fragmentada.

Conserva la utilidad en distintos temas y tamaños

Una paleta coordinada solo sirve si permite leer y operar. Revisa texto normal, etiquetas secundarias, selecciones, errores e indicadores de foco sobre sus superficies reales. La guía del W3C sobre contraste mínimo explica los requisitos para el texto.

Prueba también el aumento de tamaño. La guía del W3C sobre ampliación del texto ofrece una referencia útil. Las etiquetas traducidas más largas pueden revelar recortes que no aparecen en una captura breve en inglés.

Comprueba todo el recorrido en pantallas estrechas, incluidos los diálogos y el regreso a la aplicación. Quizá necesites otra disposición del anfitrión. Ocultar acciones esenciales no sustituye decidir cómo debe realizarse la tarea en una pantalla pequeña.

Verifica los cambios mientras se está editando

Utiliza un anuncio parcialmente redactado para la prueba. Modifica una frase, cambia tema e idioma y continúa trabajando. Comprueba que se conservan el contenido y el comportamiento esperado de deshacer, sin recrear el editor como atajo para aplicar los ajustes.

• Entra con teclado y localiza las acciones principales.
• Abre y cierra un diálogo, revisando el retorno del foco.
• Alterna temas claro y oscuro con trabajo pendiente de guardar.
• Prueba etiquetas largas en francés y español.
• Amplía el texto y examina la disposición del anfitrión.
• Sal de la pantalla, destruye la instancia y recupera el borrador.

Cambiar la identidad es distinto de cambiar la presentación: modificar el contexto de editor, usuario u organización exige destruir y volver a montar el SDK de Weavour. Trátalo como un nuevo contexto y gestiona expresamente el trabajo sin guardar.

Empieza la revisión por la continuidad de la tarea y después afina tipografía y color. Explora Weavour usando una pantalla real de tu aplicación como referencia para la integración.