 | Important : cet article requiert que vous utilisiez du code HTML. |
Nous vous proposons de nombreux modèles conçus par des professionnels dans notre éditeur à fonction glisser-déposer, mais si vous possédez votre propre design pour votre e-mail, vous pouvez utiliser votre code HTML pour créer un e-mail dans notre éditeur de code personnalisé.
Consignes pour la conception d’e-mails HTML personnalisés
Voici quelques éléments à prendre en compte lorsque vous créez votre code HTML :
- Le suivi des ouvertures et des liens est automatique. Par défaut, l’e-mail contient un pixel de suivi des ouvertures. Si [[trackingImage]] (l’image de suivi) est supprimée, le suivi des ouvertures ne sera pas assuré !
- Les feuilles de style externe ne sont pas prises en charge.
- Vous pouvez ajouter les styles au code situé au-dessus de l’e-mail. Ils seront automatiquement positionnés lors de l’envoi de l’e-mail. Vous pouvez également utiliser des styles intralignes.
- Les iFrames et les codes de formulaire sont pris en charge, mais ils sont généralement supprimés par le client de messagerie.
- Les balises HTML non standards générées par des logiciels propriétaires, tels que Microsoft Publisher ou Frontpage, ne s’affichent pas correctement dans de nombreux navigateurs et clients mail :
- <v:shape>
- <o:column>
- <b: Xl>
- ![endif]
- Le langage JavaScript ne s’affichera probablement pas, car la plupart des clients de messagerie le désactivent par mesure de sécurité.
- Nous vous invitons à ne pas utiliser le mappage d’image (ajout de plusieurs liens pour une seule image) pour les raisons suivantes :
- Le mappage d’image brise notre fonctionnalité de suivi des liens, ce qui fait que les clics sur ces liens ne seront pas pris en compte dans les rapports de clics :
- il s’agit d’une pratique passée de mode, et de nombreuses versions d’Outlook et d’autres clients de messagerie ne le prennent pas correctement en charge.
- Les images cliquables ne sont pas adaptées aux appareils mobiles. Le mappage d’image permet de définir l’endroit de votre e-mail où vous pourrez cliquer en définissant des coordonnées, mais sur un appareil mobile les éléments de votre e-mail peuvent se déplacer pour que l’e-mail s’affiche correctement. Par conséquent, les coordonnées que vous avez mappées pourraient être modifiées.
Créer et nommer votre e-mail HTML
- Cliquez sur Marketing channels (Canaux marketing) > Email (E-mails).
- Cliquez sur le bouton + Create an email (+ Créer un e-mail).
- Placez votre curseur sur l’option Build with HTML (Créer en HTML) et cliquez sur Select (Sélectionner). Si vous utilisez un appareil à écran tactile, vous pouvez appuyer dessus.
- Cliquez n’importe où sur le nom de l’e-mail pour le renommer.
- Saisissez un nom unique que vous pourrez facilement reconnaître dans votre compte ultérieurement. Vos contacts ne verront pas ce nom, mais seulement votre ligne d’objet.
- Cliquez sur le bouton Save (Enregistrer).
Personnaliser l’en-tête de votre e-mail
 | Le saviez-vous ? Un pied de page incluant votre adresse physique est toujours ajouté en bas de votre e-mail au format code personnalisé conformément à la loi CAN-SPAM de 2003. Vous pouvez modifier l’adresse physique qui apparaît dans le pied de page quand vous programmez et envoyez votre e-mail. |
- Cliquez sur Email settings (Paramètre d’e-mail) pour modifier l’en-tête de l’e-mail.
- Mettez votre ligne d’objet à jour. Vous pouvez ajouter des émojis et personnaliser votre ligne d’objet afin d’y inclure des informations sur le contact et des champs personnalisés !
- Saisissez un nom d’expéditeur. Veillez à utiliser un nom qui permettra à vos contacts de vous reconnaître facilement.
- Sélectionnez votre adresse d’expédition dans le menu déroulant.
- Sélectionnez une adresse de réponse dans le menu déroulant.
Remarque : si vous avez besoin de faire vérifier une nouvelle adresse e-mail en guise d’adresse d’expédition ou d’adresse de destination, sélectionnez l’option « Add another email » (Ajouter une autre adresse e-mail) dans chaque menu déroulant. Une fois l’adresse vérifiée, elle apparaît dans le menu déroulant. - Cliquez sur le bouton Save (Enregistrer).
- (Facultatif) Si vous souhaitez utiliser un en-tête dans votre ligne d’objet, ajoutez le texte suivant après la balise <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/></head><body> dans votre code HTML, puis mettez le « Texte de l’en-tête » à jour :
<div id="preheader" style="display: none; font-size: 1px; color: transparent; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;"> Preheader Text</div>
Ajouter du code à votre e-mail
 | Astuce de conception : pour obtenir les meilleurs résultats dans la plupart des clients mail, concevez votre code pour un e-mail, pas pour une page Web. |
- (Facultatif) Cliquez sur l’interrupteur Live Preview (Aperçu en direct) pour voir à quoi votre code HTML ressemble au fur et à mesure que vous l’écrivez. Vous pouvez l’activer et le désactiver au fur et à mesure de l’écriture.
Remarque : lorsque l’aperçu est activé, le code s’adapte automatiquement pour rentrer dans la fenêtre d’aperçu. Cependant, vous pouvez cliquer sur le bouton d’alignement situé à gauche de l’éditeur pour qu’il s’étende sur toute la largeur de l’éditeur. Si l’aperçu est activé lorsque votre code est étendu, utilisez la barre de défilement située en bas de l’éditeur pour afficher l’intégralité de la ligne de code. - Tapez ou collez votre code HTML entre les balises <body>.
- Utilisez le menu déroulant Insert (Insérer) pour ajouter facilement un des éléments suivants, quel que soit l’emplacement du code ou votre curseur se trouve :
| Le saviez-vous ? Les balises « Span id », dont la valeur est un réseau social tel que Facebook ou LinkedIn, transforment le texte en un lien qui permet aux destinataires de votre e-mail de partager ce dernier sur leur profil de réseaux sociaux. Par exemple : <span id="Facebook"> Partager sur Facebook</span> |
Mettre l’arrière-plan de votre e-mail à jour
Pour mettre l’arrière-plan de votre modèle d’e-mail HTML à jour, vous pouvez ajouter le code suivant à la balise <BODY>.
style="background-image: url(’IMAGE-URL’);"
Remplacez IMAGE-URL par le lien vers votre image. Par défaut, votre image est plus petite que votre e-mail. Elle apparaîtra plusieurs fois horizontalement et verticalement, jusqu’à ce qu’elle remplisse tout l’arrière-plan de votre e-mail. Pour éviter ceci, enregistrez votre image dans un format plus grand ou ajoutez la propriété background-repeat « no-repeat; » à votre code HTML.
style="background-image: url(’IMAGE-URL’); background-repeat: no-repeat;"
Maintenant que votre image n’apparaîtra qu’une seule fois, vous pourrez faire en sorte qu’elle recouvre toute la largeur de votre e-mail grâce à la propriété background-size « cover »
style="background-image: url(’IMAGE-URL’); background-repeat: no-repeat; background-size: cover;"
Voici à quoi le code ressemble lorsqu’il est associé à la balise BODY dans votre e-mail.
L’aperçu en direct n’affichera peut-être pas l’arrière-plan, mais vous pourrez le voir dans la section « Check & Preview » (Vérifier et prévisualiser) Sans code supplémentaire, l’image ne recouvrira pas le pied de page de votre e-mail. Pour obtenir plus d’aide pour le code et la conception, songez à faire appel aux services de notre équipe de professionnels.
 | Important : nous vous recommandons d’utiliser l’outil de prévisualisation avant d’envoyer votre e-mail à votre/vos liste(s), afin que vous puissiez voir à quoi votre e-mail ressemble avant de l’envoyer à vos destinataires. Envoyer des e-mails de test vous permettra également de savoir à quoi votre e-mail ressemblera. |
Vérifier qu’il n’y a pas d’erreurs dans votre code
Notre éditeur de code personnalisé détecte automatiquement les erreurs de code qui pourraient vous empêcher d’envoyer votre e-mail ou qui pourraient l’empêcher de s’afficher correctement. Au cours de votre travail, des indicateurs visuels vous avertiront. Chaque erreur de code est surlignée, afin d’attirer votre attention. Vous pourrez également voir une liste détaillée des erreurs ainsi que des suggestions de correction en cliquant sur la bannière d’erreurs située dans la partie supérieure de l’éditeur d’e-mail.
- Cliquez sur le message d’avertissement pour voir des informations détaillées sur les problèmes trouvés dans votre code HTML. Vous pouvez corriger les erreurs vous-même ou, en fonction de l’erreur, vous pouvez cliquer sur le bouton Fix errors for me (Corriger les erreurs pour moi). Le code contenant des erreurs est mis à jour ou supprimé. Vérifiez attentivement votre travail, car il n’y a pas d’option d’annulation.
Remarque : si vous ne voyez pas de bannière d’erreurs, vous pouvez cliquer sur Check & Preview (Vérifier et prévisualiser) > Check for Errors (Rechercher des erreurs) pour lancer la vérification manuellement.
- (Facultatif) Cliquez sur Check & Preview (Vérifier et prévisualiser) pour afficher un aperçu de votre e-mail ou pour envoyer une version de test de votre e-mail à des relecteurs.
- Une fois que vous êtes prêt à programmer l’envoi de votre e-mail à vos contacts, cliquez sur le bouton Continue (Continuer).
Une fois l’envoi de l’e-mail programmé, vous pouvez le partager sur vos réseaux sociaux afin d’étendre sa portée. Donnez à vos contacts le temps d’ouvrir votre e-mail, puis vérifiez ses performances dans le rapport.
