Passer au contenu principal

​
Vue d’ensemble

L’Éditeur HTML vous permet d’envoyer des e-mails entièrement personnalisés et de marque en utilisant votre propre HTML. Vous devriez utiliser l’Éditeur HTML lorsque vous :
  • Avez besoin d’un contrôle complet sur la mise en page, l’espacement et le style
  • Avez déjà des modèles d’e-mails HTML prêts pour la production
  • Êtes à l’aise pour travailler dans les limites des clients de messagerie
Les e-mails HTML ne sont pas identiques aux pages web. De nombreuses fonctionnalités HTML et CSS ne sont pas prises en charge ou sont rendues de manière incohérente entre les clients de messagerie.

​
Prérequis

Avant d’utiliser l’Éditeur HTML, assurez-vous de :
  • Avoir de l’expérience dans la création d’e-mails HTML responsifs
  • Héberger toutes les images sur des URL accessibles publiquement (votre site, CDN, S3, etc.)

​
Résultat attendu

Après la configuration, votre e-mail :
  • S’affiche de manière cohérente sur les principaux clients (Gmail, Outlook, Apple Mail)
  • Suit correctement les clics sur les liens
  • Inclut un mécanisme de désabonnement fonctionnel
  • Passe les vérifications de spam et de délivrabilité

​
Importez vos propres modèles

Si vous avez déjà des modèles d’e-mails HTML, vous pouvez les ajouter à OneSignal de l’une des manières suivantes :
  1. Utilisez le Transfert de modèles d’e-mails
  2. Créez des modèles par programmation en utilisant l’API Create Template
  3. Copiez-collez votre HTML dans l’Éditeur HTML
Commencez avec un modèle éprouvé plutôt que d’écrire du HTML à partir de zéro.
Erreurs courantes causant des problèmes de rendu ou de délivrabilité :
  • Lien de désabonnement manquant — obligatoire pour les e-mails marketing. Sans lui, les fournisseurs de messagerie sont plus susceptibles de signaler votre e-mail comme spam.
  • Utiliser des blocs <style> au lieu du CSS en ligne — la plupart des clients de messagerie suppriment les balises <style>. Intégrez toujours vos styles en ligne.
  • Pas de polices de secours — les polices web personnalisées ne se chargent que dans quelques clients. Déclarez toujours des polices système comme secours.
  • Images trop volumineuses — les e-mails de plus de 1 Mo se chargent lentement et peuvent être bloqués. Les images individuelles doivent faire moins de 200 Ko.
  • HTML non pris en charge — JavaScript, <iframe>, formulaires et médias intégrés sont supprimés par les clients de messagerie.

​
Utiliser l’Éditeur HTML

Lors de la création d’un message e-mail, sélectionnez Éditeur HTML comme type d’éditeur.
  1. Collez ou écrivez votre HTML dans l’éditeur.
  2. Utilisez Envoyer un e-mail de test pour prévisualiser le rendu sur les clients et appareils.
  3. Corrigez les problèmes de mise en page avant de programmer ou d’envoyer.
HTML editor with code input and live preview

​
Liens et suivi

Le suivi des liens est activé par défaut pour les e-mails HTML. Le suivi multi-liens est pris en charge, et les clics apparaissent dans les rapports de messages.

Liens

Configurez le suivi des liens, le suivi multi-liens et les analyses de clics pour les e-mails.

Liens profonds

Dirigez les destinataires vers des écrans spécifiques de votre application depuis les liens d’e-mail.

​
Liens de désabonnement

Tous les e-mails marketing doivent inclure un lien de désabonnement. Les e-mails sans option de désabonnement valide sont plus susceptibles de :
  • Être marqués comme spam
  • Nuire à la réputation de l’expéditeur
  • Être bloqués par les fournisseurs de boîtes de réception
Incluez l’espace réservé suivant n’importe où dans votre HTML (généralement dans le pied de page) :
HTML
<a href="[unsubscribe_url]">Se désabonner</a>
Lorsque cliqué, ce lien désabonne l’Abonnement e-mail du destinataire dans OneSignal.

​
Meilleures pratiques pour les e-mails HTML

​
Utilisez toujours le CSS en ligne

La plupart des clients de messagerie suppriment les blocs <style> et les feuilles de style externes. Essayez cet outil : Responsive Email CSS Inliner

​
Style en mode sombre

De nombreux clients de messagerie appliquent une inversion automatique des couleurs lorsque le mode sombre est activé. Cela peut causer des résultats imprévisibles — les boutons peuvent apparaître avec un fond noir et du texte noir, ou les logos peuvent disparaître. Définissez explicitement comment votre e-mail doit apparaître en mode clair et sombre pour éviter ces problèmes.

​
Comment les clients de messagerie gèrent le mode sombre

ClientComportementRespecte le CSS prefers-color-scheme ?
Apple Mail (iOS/macOS)Inversion totale des couleursOui
Gmail (apps iOS/Android)Inversion partielle — change les fonds clairs mais pas toutes les couleursNon
Gmail (Web)Pas de rendu en mode sombreN/A
Outlook (Windows)Inversion totale avec le moteur de rendu WordNon — ignore la plupart des remplacements CSS
Outlook (Mac/iOS)Inversion partielleOui
Yahoo MailInversion partielleNon
Samsung MailInversion totaleNon

​
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 qui prennent en charge @media (prefers-color-scheme: dark) (Apple Mail, Outlook Mac/iOS) vous permettent de remplacer les styles pour le mode sombre.
  • Appliquez !important avec parcimonie. L’ajout de !important aux 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 le <head> de votre HTML pour réduire l’auto-inversion :
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
  • Évitez le blanc pur et le noir pur. Utilisez des blancs cassés et des gris foncés pour réduire l’impact des clients avec inversion totale.
  • Utilisez des PNG transparents avec précaution. Les logos sombres sur des fonds transparents deviennent invisibles sur des fonds sombres. Ajoutez un contour clair ou utilisez une version avec un fond intégré.
Pour une présentation étape par étape de l’ajout de CSS en mode sombre à l’aide de l’Éditeur Drag and Drop, consultez Style du mode sombre avec drag and drop.

​
Tailles d’image recommandées pour les e-mails

  • Images d’en-tête/bannière : 3:1 ou 4:1 (ex. : 600×200 ou 600×150)
  • Images hero : 16:9 ou 2:1 (ex. : 600×338 ou 600×300)
  • Images carrées : 1:1 (ex. : 300×300) — idéal pour les grilles de produits
  • Miniatures : 1:1 ou 4:3
  • Largeur maximale : 600–700px est le standard (la plupart des clients de messagerie)
  • Concevez en 2x pour les écrans Retina (ex. : 1200px de large, affiché en 600px)
  • Gardez les images individuelles sous 100–200 Ko
  • Taille totale de l’e-mail (images incluses) sous 1 Mo
  • Des images plus petites signifient des temps de chargement plus rapides et une meilleure délivrabilité
  • JPG — meilleur pour les photos
  • PNG — meilleur pour les graphiques, logos et images avec transparence
  • GIF — pour les animations simples (gardez la taille du fichier petite)
  • WebP — pas encore largement pris en charge dans les e-mails ; à éviter
  • Incluez toujours un texte alternatif pour l’accessibilité et lorsque les images ne se chargent pas
  • Utilisez du CSS en ligne pour les styles (de nombreux clients suppriment les balises <style>)
  • Évitez les images de fond (prise en charge incohérente entre clients)
  • Testez sur plusieurs clients — Gmail, Outlook et Apple Mail s’affichent tous différemment
  • Outlook ignore souvent les dimensions des images, alors définissez les attributs width et height en HTML

​
Ajoutez du texte alternatif aux images

Le texte alternatif améliore l’accessibilité et garantit que les informations sont transmises même lorsque les images sont bloquées ou ne parviennent pas à se charger. La plupart des principaux clients de messagerie affichent et stylisent le texte alternatif :
Client d’e-mailBloque les images ?Affiche le texte altStyle le texte alt
AOLOuiOuiOui
GmailOuiOuiOui
YahooOuiOuiOui
OutlookParfoisOuiOui

​
Utilisez uniquement du HTML pris en charge

Les clients de messagerie ne prennent pas en charge :
  • JavaScript
  • <iframe>
  • Formulaires HTML
  • Audio ou vidéo intégrés
  • Astuces de positionnement ou de superposition CSS
Utilisez des liens vers des pages externes pour le contenu interactif ou multimédia.

​
Validez avant d’envoyer

Avant d’envoyer, vérifiez les points suivants :
  • Tous les liens fonctionnent (les liens brisés nuisent à la délivrabilité et peuvent déclencher des filtres anti-spam)
  • Le lien de désabonnement fonctionne correctement
  • Les e-mails de test s’affichent dans Gmail, Outlook et Apple Mail
  • Le rendu en mode sombre est acceptable
  • Le HTML utilise des balises sémantiques et une indentation correcte pour l’accessibilité et la maintenabilité
Si votre e-mail s’affiche correctement dans les principaux clients et que le désabonnement fonctionne, il est prêt à être envoyé.

​
Personnalisation

Utilisez les modèles Liquid pour insérer du contenu spécifique à l’abonné comme les noms, les tags ou les valeurs de secours directement dans votre HTML. Exemple : {{ first_name | default: "there" }}

Personnalisation des messages

Variables de personnalisation disponibles et comment les utiliser.

Utilisation de la syntaxe Liquid

Conditions, filtres, boucles et modèles Liquid avancés.

​
FAQ

​
Puis-je réutiliser mes modèles d’e-mails existants ?

Oui. Transférez-les à OneSignal via le Transfert de modèles d’e-mails, téléchargez-les avec l’API Create Template, ou copiez-collez le HTML directement dans l’éditeur.

​
Puis-je utiliser des polices personnalisées ?

Oui, mais la prise en charge varie. Déclarez les polices personnalisées avec @font-face et incluez toujours des polices système de secours. Outlook sur Windows ignore complètement les polices web et revient aux polices système par défaut.

​
Pourquoi mon e-mail s’affiche-t-il différemment en mode sombre ?

Chaque client de messagerie applique le mode sombre différemment — certains inversent totalement les couleurs, d’autres partiellement, et Gmail web n’applique pas du tout le mode sombre. Consultez le tableau de comportement des clients ci-dessus pour les détails. Définissez des styles explicites de mode clair et sombre pour contrôler le rendu.

​
Quelles fonctionnalités HTML et CSS ne sont pas prises en charge dans les e-mails ?

JavaScript, <iframe>, formulaires HTML, audio/vidéo intégrés et le positionnement CSS ne sont pas pris en charge. Utilisez du CSS en ligne pour tous les styles — la plupart des clients suppriment les blocs <style> et les feuilles de style externes.

​
Quelle est la taille maximale d’un e-mail ?

Gardez la taille totale de l’e-mail (HTML + images) sous 1 Mo. Les e-mails de plus de 102 Ko de HTML sont tronqués par Gmail, qui masque le contenu sous un lien “Afficher le message entier”.

​
Pages associées

Concevoir des e-mails avec glisser-déposer

Constructeur d’e-mails visuel pour concevoir des e-mails sans écrire de HTML complet.

Vue d'ensemble des e-mails

Guide complet pour envoyer des e-mails avec OneSignal.

Modèles d'e-mails

Enregistrez et réutilisez des conceptions d’e-mails entre les campagnes.

Liens de désabonnement

Ajoutez des liens de désabonnement par défaut ou personnalisés pour la conformité.

Personnalisation des messages

Personnalisez les e-mails avec des tags, la syntaxe Liquid et du contenu dynamique.

Transfert de modèles d'e-mails

Importez des modèles d’e-mails HTML existants dans OneSignal.