Vue d’ensemble
L’éditeur HTML dans OneSignal vous permet de créer des e-mails hautement stylisés et de marque avec un contrôle total sur la mise en page et la conception pour ordinateur et mobile. Pour tirer le meilleur parti de la conception d’e-mails HTML, nous recommandons :- Assurez-vous que vous ou un coéquipier avez de l’expérience dans l’écriture d’e-mails HTML responsifs qui s’affichent bien sur différents clients et appareils.
- Hébergez toutes les images dans un emplacement accessible publiquement, comme votre site web, AWS ou d’autres plateformes d’hébergement fiables.
Importez vos propres modèles
Vous avez déjà des modèles d’e-mails ? Vous pouvez les ajouter à votre application OneSignal avec les options suivantes :- Transfert de modèles d’e-mails
- API Create Template
- Copiez-collez votre HTML dans l’éditeur HTML
Utilisation de l’éditeur HTML
Sélectionnez l’option HTML Editor lors de la configuration de votre message. Entrez votre code HTML dans le panneau de gauche. Vous pouvez utiliser la fonctionnalité Send Test Email pour vérifier comment votre e-mail s’affiche sur les clients mobiles et de bureau.
Image montrant l'éditeur HTML à côté de l'aperçu
Liens
Le suivi des liens est activé par défaut. Le suivi multi-liens est disponible. Consultez Liens et Liens profonds pour plus de détails.Liens de désabonnement
Tous les e-mails marketing doivent contenir un lien de désabonnement. Sans lien de désabonnement, vos e-mails auront plus de chances d’être marqués comme spam. Consultez Liens de désabonnement pour plus de détails. OneSignal fournit un lien de désabonnement par défaut qui, lorsqu’il est utilisé, désabonnera l’abonnement e-mail de l’utilisateur. Vous pouvez également inclure votre propre URL de désabonnement personnalisée si vous le souhaitez. Assurez-vous simplement de gérer correctement l’abonnement e-mail (détails dans Créer une page de désabonnement personnalisée). Ajoutez le[unsubscribe_url] par défaut de OneSignal dans vos e-mails via :
Meilleures pratiques
Configuration recommandée pour les e-mails HTML :Utilisez le CSS inline
De nombreux clients de messagerie suppriment les styles intégrés ou externes. Mettez toujours votre CSS en ligne pour garantir un rendu cohérent. Essayez cet outil : Responsive Email CSS InlinerStyle en mode sombre
De nombreux clients de messagerie appliquent une inversion automatique des couleurs lorsqu’un utilisateur a activé le mode sombre. Ce comportement peut provoquer des résultats imprévisibles, comme des boutons apparaissant avec un fond noir et du texte noir. Pour garantir un rendu cohérent, nous recommandons de définir explicitement comment votre e-mail doit apparaître en mode clair et sombre. Meilleures pratiques :- Définissez les styles de base en ligne. Définissez toujours les couleurs d’arrière-plan et de texte directement sur les éléments au lieu de vous fier aux valeurs par défaut ou à la transparence.
- Utilisez des requêtes média pour le mode sombre. Les clients comme Apple Mail et Outlook sur iOS prennent en charge
@media (prefers-color-scheme: dark)où vous pouvez remplacer les styles pour le mode sombre. - Appliquez
!importantavec parcimonie. L’ajout de!importantaux remplacements en mode sombre aide à empêcher les boîtes de réception d’empiler des règles d’inversion au-dessus de vos styles personnalisés. - Signalez le support de thème. Incluez les balises méta suivantes dans votre en-tête HTML pour réduire l’auto-inversion :
Testez sur tous les clients. Gmail (iOS, Android, web), Outlook et Apple Mail se comportent tous différemment. Les tests aident à détecter les problèmes tôt.
Ajoutez des balises alt aux images
Le texte alt améliore l’accessibilité et garantit que les informations sont transmises même si les images sont bloquées ou ne parviennent pas à se charger.| Client d’e-mail | Bloque les images ? | Affiche le texte alt | Style le texte alt |
|---|---|---|---|
| AOL | Oui | Oui | Oui |
| Gmail | Oui | Oui | Oui |
| Yahoo | Oui | Oui | Oui |
| Outlook | Parfois | Oui | Oui |
Nommez et formatez votre HTML
Utilisez du HTML sémantique et un nommage de balises significatif pour l’accessibilité. Cela aide les lecteurs d’écran à interpréter votre contenu plus précisément. De plus, utilisez des formats de couleur standard et une indentation appropriée pour la maintenabilité.Vérifiez les liens brisés
Les liens brisés réduisent la délivrabilité et peuvent signaler vos e-mails comme spam. Testez tous les liens minutieusement avant l’envoi.Évitez le HTML non pris en charge
La plupart des clients de messagerie ne prennent pas en charge les éléments suivants :- JavaScript ou Flash
- Audio ou vidéo intégrés
- Formulaires HTML
- Iframes
- Superposition de texte