Vous pouvez utiliser le HTML pour créer des e-mails personnalisés dans Intercom. Vous avez trois options, chacune servant un but différent. Vous pouvez soit :

Créer un modèle d'e-mail réutilisable à partir de HTML recommandé
Envoyer un e-mail HTML complet ponctuel.
Formatez votre e-mail en utilisant des blocs HTML.

Créer un modèle réutilisable à partir de HTML

Intercom vous propose une sélection de trois modèles à utiliser pour vos e-mails. Mais si vous souhaitez créer un modèle stylisé qui correspond au design de votre marque, vous pouvez créer un modèle d'e-mail à partir de HTML. Votre nouveau modèle personnalisé sera enregistré comme modèle dans Intercom et vous pourrez l'utiliser autant de fois que vous le souhaitez.

Pourquoi créer un modèle personnalisé plutôt qu'un e-mail HTML ponctuel ?

Vous devriez créer un modèle personnalisé (et non un e-mail HTML ponctuel) si vous souhaitez un style personnalisé pour votre marque tout en profitant de la puissance et de la facilité d'utilisation du compositeur. Une fois que vous avez enregistré votre modèle personnalisé dans Intercom, vous pouvez le sélectionner comme modèle et rédiger votre e-mail sans avoir besoin d'utiliser le HTML.

Créez un modèle d'e-mail à partir de HTML si vous souhaitez :

Définir le style de votre e-mail, y compris le type de police, la taille et la couleur de fond.
Ajouter un en-tête, un pied de page ou une bordure personnalisés.
Utiliser le suivi des liens des URL modélisées.
Personnalisez le style de votre bouton Intercom. Pour ce faire, ajoutez des styles à la classe HTML .intercom-h2b-button.

Prêt à commencer ? Voici comment créer un modèle d'e-mail à partir de HTML dans Intercom.

Envoyer un e-mail HTML complet ponctuel

Vous pouvez également créer une mise en page de contenu personnalisée et envoyer un e-mail ponctuel conçu en HTML.

Note : Le suivi des liens des URL modélisées ne fonctionne pas dans les e-mails HTML ponctuels. Nous recommandons fortement d'utiliser un modèle d'e-mail personnalisé ou de créer un nouveau modèle à partir de HTML à la place.

Comment créer un e-mail HTML complet

Pour écrire vos messages en HTML complet, créez un nouveau message e-mail en utilisant n'importe quel modèle, puis cliquez sur </> Passer à l'éditeur HTML en bas à gauche du compositeur d'e-mails.

Le compositeur HTML s'ouvrira à droite et vous pourrez maintenant créer votre e-mail.

Au fur et à mesure que vous écrivez, vous pouvez voir comment votre message apparaîtra dans l'Aperçu du modèle.

Important : Vous ne pouvez pas revenir à l'éditeur visuel ni changer le type de message en in-app une fois que vous avez commencé à écrire votre e-mail en HTML complet.

Formatez votre e-mail en utilisant des blocs HTML

Lorsque vous devez sortir des options de formatage régulières offertes par le compositeur, vous pouvez utiliser des blocs HTML pour ajouter des éléments personnalisés à votre e-mail.

Vous pouvez utiliser des blocs HTML pour :

Placer un tableau dans votre e-mail.
Afficher des données dans des tableaux HTML pour une visualisation plus facile.
Insérer des images HiDPI retina dans votre e-mail.
Créer des citations en bloc.
Ajouter un bouton personnalisé (vous devez d'abord créer votre style de bouton dans un modèle personnalisé, mais vous pouvez définir la classe en utilisant un bloc HTML).
Ajouter une colonne (c'est pratique pour placer des images côte à côte).

Pour ajouter un bloc HTML à votre e-mail, survolez simplement le compositeur et sélectionnez l'icône + pour insérer du </> HTML.

4 conseils à retenir lors de l'utilisation des blocs HTML dans vos e-mails

Utilisez HTTPS (et non HTTP) pour les images afin de éviter tout avertissement de contenu mixte. Les images HTTP ne s'afficheront pas dans l'aperçu de votre e-mail dans Intercom.
Prenez soin de prévisualiser votre message, surtout lors de l'envoi par e-mail. Vous pouvez toujours ajuster les messages in-app, mais une fois qu'un e-mail est envoyé, il n'y a pas de retour en arrière.
Bien que les vidéos intégrées fonctionnent bien pour les messages in-app, nous ne supportons pas les iframes et vos vidéos intégrées ne seront pas affichées.
N'oubliez pas que tous les styles et attributs ID que vous incluez dans le corps du message seront supprimés.

Si vous souhaitez appliquer un style spécial au HTML dans vos blocs HTML, vous pouvez créer un modèle d'e-mail à partir de HTML avec vos styles spécifiques dans le <head> puis référencer les classes dans le bloc HTML. Ces styles seront intégrés lors de l'envoi de l'e-mail.

Balises et attributs HTML pris en charge par Intercom

Nous prenons en charge deux sous-ensembles de HTML dans Intercom. Vous pouvez voir ci-dessous les balises et attributs que nous supportons pour les e-mails HTML complets et les modèles personnalisés. Et vous verrez les balises et attributs que nous supportons pour les blocs HTML.

Éléments pris en charge en mode HTML (pour les e-mails HTML complets et les modèles personnalisés) :

Éléments structurels : article, aside, blockquote, body, br, div, figcaption, figure, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, main, p, section, wbr
Éléments d'en-tête : meta, title
Éléments de liste : dd, dl, dt, li, ol, ul
Éléments de mise en forme du texte : a, abbr, address, b, bdi, bdo, center, cite, code, del, dfn, em, i, ins, kbd, mark, pre, q, rp, rt, ruby, s, samp, small, span, strike, strong, sub, sup, time, u, var
Éléments média : img
Éléments de tableau : caption, col, colgroup, table, tbody, td, tfoot, th, thead, tr

Attributs pris en charge en mode HTML (pour les e-mails HTML complets et les modèles personnalisés) :

Tous les attributs supportent : align, bgcolor, class, dir, height, id, lang, style, title, width
Le tag a supporte : href, name, target
Le tag blockquote supporte : cite
Le tag col supporte : span, valign
Le tag colgroup supporte : span, valign
Le tag del supporte : xmlns
Le tag html supporte : href, name, target
Le tag img supporte : alt, src
Le tag ins supporte : cite, datetime
Le tag meta supporte : content, http-equiv, name
Le tag ol supporte : reversed, start, type
Le tag q supporte : cite
Le tag style supporte : data-premailer, type
Le tag table supporte : border, cellpadding, cellspacing, summary
Le tag tbody supporte : valign
Le tag td supporte : abbr, axis, colspan, rowspan, valign
Le tag tfoot supporte : valign
Le tag th supporte : abbr, axis, colspan, rowspan, scope, valign
Le tag thead supporte : valign
Le tag time supporte : datetime, pubdate
Le tag tr supporte : valign
Le tag ul supporte : type

Voici les différents tags HTML que nous supportons pour les blocs HTML :

Titres : h1, h2, h3, h4, h5, h6
Tags de mise en forme du texte tels que strong, em, sub, sup, small, code, pre, strike
Tags pour créer des tableaux : table, thead, tbody, tfoot, th, tr, td
Listes : ol, ul
Hyperliens utilisant l'élément ancre
Images

Voici les attributs HTML que nous supportons pour les blocs HTML :

TOUS les tags permettent dir, lang, title, width, height, id, class, align
a permet href, target, name
blockquote permet cite
col permet span, width, valign
colgroup permet span, width, valign
del permet cite, datetime
img permet align, alt, height, src, width, title
ins permet cite, datetime
ol permet start, reversed, type
q permet cite
table permet summary, width, border, cellspacing, cellpadding
tbody permet valign
tfoot permet valign
thead permet valign
td permet abbr, axis, colspan, rowspan, width, valign
th permet abbr, azis, colspan, rowspan, scope, width, valign
thead permet tr
time permet datetime, pubdate
ul permet type

Bonnes pratiques pour utiliser HTML dans Intercom

Que vous envoyiez un email HTML ponctuel ou que vous créiez un modèle d'email personnalisé réutilisable, les meilleures pratiques suivantes s'appliquent :

Intégrez vos styles CSS en ligne

La plupart des clients email exigent que vous intégriez vos styles CSS en ligne, ce qui peut rendre le développement moins agréable. En effet, pour ajouter un style, vous devez le mettre dans chaque balise <p> individuellement. Et si vous souhaitez modifier ce style, il faut le changer pour chaque balise <p> séparément. Cependant, dans Intercom, vous pouvez (et devez) écrire votre HTML et vos styles avec des balises style et des classes comme d'habitude. Ensuite, lors de l'envoi de l'email, Intercom intégrera tous vos styles CSS en ligne aux éléments appropriés.

Les styles responsives ne doivent pas être intégrés en ligne

Une exception est que vous ne devez pas intégrer en ligne les styles responsives (ceux dans un bloc @media() {}). S'ils sont intégrés en ligne, ils s'appliqueront par défaut plutôt qu'à une largeur d'écran spécifique. Ils doivent plutôt être placés dans une balise style avec l'incantation spéciale data-premailer="ignore". Cela signifie que ces styles responsives ne seront pas intégrés en ligne. Les navigateurs qui comprennent les media queries appliqueront ces styles selon la taille de l'écran.

Ajoutez les bons attributs de données

Lors de la création d'un modèle personnalisé, nous exigeons que vous ayez une seule balise {{content}}. Vous pouvez la placer n'importe où dans la balise <body>. Actuellement, nous ne supportons qu'une seule balise {{content}} par email, ce qui signifie que vous ne pouvez pas avoir plus d'une zone de contenu par email.
Lors de la création d'un modèle personnalisé ou en écrivant du HTML complet dans Intercom, vous devez inclure soit un {{unsubscribe_url}} soit un {{unsubscribe_link}} pour respecter les lois anti-spam. Vous pouvez le placer n'importe où dans la balise <body> Voici comment.

Maîtrisez les bases du HTML

Enfin, nous ne pouvions pas nous empêcher de partager quelques conseils fondamentaux pour créer de meilleurs emails HTML :

Créez vos mises en page en utilisant des tableaux pour garantir que votre email s'affiche correctement sur tous les clients email. Par exemple, si vous souhaitez placer un espace de 20px sous un paragraphe, il est préférable d'ajouter une ligne avec un attribut height="20". N'utilisez pas de padding, marges ou flottants car ils ne fonctionnent pas toujours (notamment avec certaines versions d'Outlook).
Intégrez tous les styles dans votre email pour garantir que chaque client email applique vos styles et que votre design s'affiche correctement lors de l'envoi, facilitant ainsi votre flux de travail. Intercom vous aide pour cela.
Vous pouvez utiliser des polices web hébergées personnalisées provenant d'un service de polices open source comme Google Fonts. Il vous suffit d'intégrer le code dans votre modèle d'email. Cependant, notez que si votre client email ne supporte pas cela, le texte de vos emails utilisera une police web sûre par défaut.
Pour créer un design responsive, votre largeur doit être d'au moins 320px mais pas plus de 600px. Il est préférable d'utiliser une largeur maximale de 600px comme vue par défaut. Il est aussi important d'utiliser des media queries pour transformer votre modèle en une seule colonne sur des écrans plus petits.
Pour la taille des fichiers image, essayez de garder vos images aussi petites que possible (maximum 1 Mo). Télécharger de grandes images offrira une expérience sous-optimale à vos users, surtout ceux qui consultent votre email sur des appareils mobiles, car les images peuvent mettre du temps à s'afficher.
Utilisez un outil de test d'email comme Litmus pour tester vos emails sur tous vos clients email et navigateurs cibles. Il ne suffit pas de regarder votre email dans un navigateur classique ou dans un ou deux clients email. Ils produisent tous des résultats différents. Des outils comme Litmus vous donnent une visibilité complète de l'apparence de votre email partout.

Maintenant que vous avez appris à créer de meilleurs emails HTML dans Intercom, vous voudrez vous assurer qu'ils soient livrés et ouverts.

Créer des e-mails HTML