Descripción general
El Editor HTML en OneSignal le permite crear correos electrónicos altamente estilizados y de marca con control completo sobre el diseño y la presentación tanto para escritorio como para móvil. Para aprovechar al máximo el diseño de correos electrónicos HTML, recomendamos:- Asegurarse de que usted o un compañero de equipo tenga experiencia escribiendo correos electrónicos HTML responsivos que se rendericen bien en diferentes clientes y dispositivos.
- Alojar todas las imágenes en una ubicación accesible públicamente, como su sitio web, AWS u otras plataformas de alojamiento confiables.
Importar sus propias plantillas
¿Ya tiene plantillas de correo electrónico? Puede agregarlas a su aplicación de OneSignal con las siguientes opciones:- Reenvío de plantillas de correo electrónico
- API de crear plantilla
- Copiar y pegar su HTML en el Editor HTML
Usar el editor HTML
Seleccione la opción HTML Editor al configurar su mensaje. Ingrese su código HTML en el panel izquierdo. Puede usar la función Send Test Email para verificar cómo se renderiza su correo electrónico en clientes móviles y de escritorio.
Imagen que muestra el editor HTML junto a la vista previa
Enlaces
El seguimiento de enlaces está habilitado de forma predeterminada. El seguimiento de múltiples enlaces está disponible. Consulte Enlaces y Deep Linking para más detalles.Enlaces de cancelación de suscripción
Todos los correos electrónicos de marketing deben contener un enlace de cancelación de suscripción. Sin un enlace de cancelación de suscripción, sus correos electrónicos tendrán una mayor probabilidad de ser marcados como spam. Consulte Enlaces de cancelación de suscripción para más detalles. OneSignal proporciona un enlace de cancelación de suscripción predeterminado que, cuando se usa, cancelará la suscripción de la Suscripción de correo electrónico del usuario. También puede incluir su propia URL de cancelación de suscripción personalizada si lo desea. Solo asegúrese de administrar correctamente la Suscripción de correo electrónico (detalles en Crear una página de cancelación de suscripción personalizada). Agregue el[unsubscribe_url] predeterminado de OneSignal en sus correos electrónicos mediante:
Mejores prácticas
Configuración recomendada para correos electrónicos HTML:Usar CSS en línea
Muchos clientes de correo electrónico eliminan estilos incrustados o externos. Siempre ponga su CSS en línea para garantizar una renderización consistente. Pruebe esta herramienta: Responsive Email CSS InlinerEstilo 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.
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 no se cargan.| 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.Evitar HTML no compatible
La mayoría de los clientes de correo electrónico no admiten lo siguiente:- JavaScript o Flash
- Audio o video incrustado
- Formularios HTML
- Iframes
- Capas de texto