Descripción general
El Editor HTML le permite enviar correos electrónicos completamente personalizados y con marca usando su propio HTML. Debe usar el Editor HTML cuando:- Necesite control completo sobre diseño, espaciado y estilo
- Ya tenga plantillas de correo electrónico HTML listas para producción
- Esté cómodo trabajando dentro de las limitaciones de los clientes de correo electrónico
Los correos electrónicos HTML no son iguales a las páginas web. Muchas características HTML y CSS no están soportadas o se renderizan inconsistentemente entre clientes de correo electrónico.
Prerrequisitos
Antes de usar el Editor HTML, asegúrese de:- Tener experiencia construyendo correos electrónicos HTML responsivos
- Alojar todas las imágenes en URLs accesibles públicamente (su sitio, CDN, S3, etc.)
Resultado esperado
Después de la configuración, su correo electrónico:- Se renderizará consistentemente en clientes principales (Gmail, Outlook, Apple Mail)
- Rastreará clics de enlaces correctamente
- Incluirá un mecanismo de cancelación de suscripción funcional
- Pasará verificaciones de spam y entregabilidad
Importar sus propias plantillas
Si ya tiene plantillas de correo electrónico HTML, puede agregarlas a OneSignal de cualquiera de las siguientes maneras:- Use Reenvío de plantillas de correo electrónico
- Cree plantillas programáticamente usando la API Create Template
- Copie y pegue su HTML en el Editor HTML
Recomendamos comenzar con una plantilla probada en lugar de escribir HTML desde cero.
Usar el Editor HTML
Al crear un mensaje de correo electrónico, seleccione Editor HTML como el tipo de editor.- Pegue o escriba su HTML en el editor.
- Use Enviar correo electrónico de prueba para previsualizar la renderización en clientes y dispositivos.
- Corrija problemas de diseño antes de programar o enviar.
Enlaces y seguimiento
El seguimiento de enlaces está habilitado por defecto para correos electrónicos HTML.- Se admite el seguimiento de múltiples enlaces
- Los clics aparecen en los informes de mensajes
Enlaces de cancelación de suscripción
Todos los correos electrónicos de marketing deben incluir un enlace de cancelación de suscripción. Los correos electrónicos sin una opción válida de cancelación de suscripción tienen más probabilidades de:- Ser marcados como spam
- Dañar la reputación del remitente
- Ser bloqueados por proveedores de bandeja de entrada
- Enlace de cancelación de suscripción predeterminado de OneSignal
- Usar una página de cancelación de suscripción personalizada (opcional)
Incluya el siguiente marcador de posición en cualquier lugar de su HTML (generalmente en el pie de página):Cuando se hace clic, este enlace cancelará la Suscripción de correo electrónico del usuario en OneSignal.
HTML
Mejores prácticas para correo electrónico HTML
Usar siempre CSS en línea
La mayoría de los clientes de correo electrónico eliminan bloques<style> y hojas de estilo externas.
Pruebe esta herramienta: Responsive Email CSS Inliner
Estilo de modo oscuro
Muchos clientes de correo electrónico aplican inversión de color automática cuando un usuario tiene el modo oscuro habilitado. Este comportamiento puede causar resultados impredecibles, como botones que aparecen con un fondo negro y texto negro. Para garantizar una renderización consistente, recomendamos definir explícitamente cómo debería verse su correo electrónico tanto en modos claro como oscuro. Mejores prácticas:- Definir estilos base en línea. Siempre establezca colores de fondo y texto directamente en los elementos en lugar de confiar en valores predeterminados o transparencia.
- Usar consultas de medios para modo oscuro. Clientes como Apple Mail y Outlook en iOS admiten
@media (prefers-color-scheme: dark)donde puede reemplazar estilos para modo oscuro. - Aplicar
!importantcon moderación. Agregar!importanta reemplazos de modo oscuro ayuda a prevenir que las bandejas de entrada apilen reglas de inversión sobre sus estilos personalizados. - Señalar soporte de tema. Incluya las siguientes etiquetas meta en el encabezado HTML para reducir la inversión automática:
Pruebe en todos los clientes. Gmail (iOS, Android, web), Outlook y Apple Mail se comportan de manera diferente. Las pruebas ayudan a detectar problemas temprano.
Tamaños de imagen recomendados para correo electrónico
Relaciones de aspecto:- Imágenes de encabezado/banner:
3:1o4:1(ej:600×200o600×150) - Imágenes hero:
16:9o2:1(ej:600×338o600×300) - Imágenes cuadradas:
1:1(ej:300×300) — bueno para cuadrículas de productos - Miniaturas:
1:1o4:3 - Ancho máximo:
600–700pxes estándar (mayoría de clientes de correo electrónico) - Diseñar en
2xpara pantallas retina (ej:1200pxde ancho, mostrado a600px)
- Mantener imágenes individuales bajo
100–200KB - Tamaño total del correo electrónico (incluidas imágenes) bajo
1MB - Más pequeño = tiempos de carga más rápidos y mejor entregabilidad
- JPG: Mejor para fotos
- PNG: Mejor para gráficos, logos, transparencia
- GIF: Para animaciones simples (mantener el tamaño de archivo pequeño)
- WebP: Aún no ampliamente soportado en correo electrónico — evitar
- Siempre incluir texto alt para accesibilidad y cuando las imágenes no cargan
- Usar CSS en línea para estilo (muchos clientes eliminan etiquetas
<style>) - Evitar imágenes de fondo (soporte inconsistente)
- Probar en clientes (Gmail, Outlook, Apple Mail todos renderizan diferente)
- Outlook a menudo ignora dimensiones de imagen, así que establecer tanto atributos width como height en HTML
Agregar etiquetas alt a las imágenes
El texto alternativo mejora la accesibilidad y garantiza que la información se transmita incluso si las imágenes están bloqueadas o fallan al cargar.| Cliente de correo electrónico | ¿Bloquea imágenes? | ¿Muestra texto alt? | ¿Estiliza texto alt? |
|---|---|---|---|
| AOL | Sí | Sí | Sí |
| Gmail | Sí | Sí | Sí |
| Yahoo | Sí | Sí | Sí |
| Outlook | A veces | Sí | Sí |
Nombrar y formatear su HTML
Use HTML semántico y nombres de etiquetas significativos para accesibilidad. Esto ayuda a los lectores de pantalla a interpretar su contenido con mayor precisión. Además, use formatos de color estándar y sangría adecuada para mantenibilidad.Verificar enlaces rotos
Los enlaces rotos reducen la entregabilidad y pueden marcar sus correos electrónicos como spam. Pruebe todos los enlaces exhaustivamente antes de enviar.Usar solo HTML compatible
Los clientes de correo electrónico no soportan:- JavaScript
<iframe>- Formularios HTML
- Audio o video incrustado
- Flash
- Trucos de posicionamiento o capas CSS
Validar antes de enviar
Antes de enviar, valide su correo electrónico:- Probando todos los enlaces
- Verificando comportamiento de cancelación de suscripción
- Enviando correos electrónicos de prueba a Gmail, Outlook y Apple Mail
- Revisando renderización de modo oscuro
Si su correo electrónico se renderiza correctamente en clientes principales y la cancelación de suscripción funciona, está listo para enviar.