Solución de problemas de correos electrónicos HTML

Usa esta página para resolver problemas comunes del editor de correos electrónicos HTML y de los envíos de prueba. Para Inbox Vision y capacidad de entrega, consulta Inbox Vision y Configuración de correo electrónico.

Empieza aquí: identifica tu síntoma

Busca tu síntoma en la tabla para navegar a la sección correspondiente.

Ruta de investigación estándar

Usa este flujo de trabajo cuando el renderizado del correo electrónico HTML o el comportamiento del editor no coincida con lo que esperas. Empieza en el paso 1.

1. Valida tu marcado HTML en el editor o en un validador externo.
2. Envía un correo electrónico de prueba y anota qué clientes de correo electrónico o navegadores muestran el problema.
3. Previsualiza con Inbox Vision para comparar el renderizado en distintos clientes.
4. Descarta conflictos de extensiones del navegador si el propio editor se comporta de forma incorrecta.
5. Si el problema persiste, abre un ticket de soporte con capturas de pantalla de Inbox Vision y de los clientes afectados.

El HTML se renderiza incorrectamente en los correos electrónicos de prueba

Síntoma: Un correo electrónico de prueba no se ve como esperas desde el editor.

Revisa primero tu configuración HTML y después consulta conflictos de extensiones, renderizado de correo electrónico, inlining de CSS y espacio en blanco debajo de las imágenes.

Conflictos de extensiones

Ciertas extensiones del navegador pueden causar problemas con el editor de correo electrónico. Un ejemplo es Grammarly cuando se usa con Google Chrome. Si estás usando una de estas extensiones, deberías:

• Editar los correos electrónicos de Braze en un navegador que no tenga Grammarly como extensión del navegador.
• Ponerte en contacto con tu director de cuentas de Braze y solicitar cambiar tus editores de correo electrónico a solo HTML o texto plano.

La vista de texto plano elimina tu editor WYSIWYG (lo que ves es lo que obtienes), así que primero deberías confirmar que todos los miembros del equipo se sienten cómodos con HTML antes de hacer esta solicitud.

Renderizado de correo electrónico

Los correos electrónicos se renderizan de forma diferente según los navegadores y los clientes de correo electrónico, así que toma nota de con qué navegadores y clientes de correo electrónico estás experimentando problemas.

• Previsualiza tus correos electrónicos usando Inbox Vision para ver cómo se ven en diferentes navegadores y clientes de correo electrónico.
• Una vez que hayas identificado qué navegadores o clientes de correo electrónico están causando problemas, informa a tu equipo de desarrolladores de que necesitarán modificar su HTML y hacer ajustes para adaptarse a esos navegadores o clientes de correo electrónico.

Inlining de CSS

Hay ocasiones en las que las vistas previas en Inbox Vision aún no coinciden con lo que se envía con Braze. Esto puede deberse a la diferencia en el inlining de CSS realizado por Braze y por otras herramientas. Si sospechas que este es el caso, desactiva el inlining de CSS.

Espacio en blanco debajo de las imágenes

Síntoma: Aparecen espacios en blanco o líneas después de las imágenes en los correos electrónicos de prueba.

Si notas espacios en blanco o líneas que aparecen después de las imágenes en tus correos electrónicos de prueba, esto suele deberse a cómo los clientes de correo electrónico renderizan los elementos de nivel inline. Las imágenes son de nivel inline de forma predeterminada y se alinean con la línea base, lo que permite a los navegadores acomodar los descendentes (la parte de letras como «g» o «y» que se extiende por debajo de la línea base). Esto crea un pequeño espacio que aparece como espacio en blanco.

Para solucionarlo, añade display: block; al CSS de tu imagen:

1
2
3
4
5
<style>
  img {
    display: block;
  }
</style>

Alternativamente, aplica el estilo directamente a imágenes específicas:

1
<img src="https://example.com/image.jpg" style="display: block;" alt="Image description" />