Intercom propose trois modèles d'e-mails par défaut. Mais vous pouvez aussi personnaliser le vôtre avec le concepteur visuel de modèles, ou créer un nouveau modèle à partir de HTML, ce que nous expliquerons ci-dessous.

Pour y accéder, allez dans Paramètres > Sortant > Modèles d'e-mails et cliquez sur Nouveau modèle > Créer à partir de HTML.

Vous pouvez maintenant modifier le HTML pour que des éléments comme la taille, le type et la couleur de la police correspondent à votre marque. Vous pouvez aussi ajouter votre logo ou en-tête en haut. Vous pouvez également créer un nouveau modèle entièrement à partir de zéro avec le HTML ou le design que vous souhaitez.

Note :

Les espaces de travail sont limités à 100 modèles d'e-mails personnalisés.
La taille maximale du modèle est limitée à 200 000 caractères.

Une fois que vous êtes satisfait de votre modèle, donnez-lui un nom et enregistrez-le. Il sera alors disponible dans votre liste de modèles lorsque vous rédigerez un e-mail.

Important : Les modèles personnalisés ne doivent pas être utilisés comme un éditeur HTML complet (en insérant HTML, CSS + contenu), mais doivent se concentrer davantage sur les en-têtes, pieds de page et le style du contenu. Si vous mettez tout votre contenu dans le modèle personnalisé et l'envoyez sans modifier le message dans l'éditeur standard, vous obtiendrez une erreur lors de la mise en ligne du message.

Conseils pour l'utilisation des modèles HTML

1. Vous devez inclure ces balises dans le modèle :

La balise {{content}}
La balise {{unsubscribe_link}} ou {{unsubscribe_url}}

Note : L'URL de désabonnement doit être placée avant la balise </body> pour être détectée par nos contrôles de validation et pour que le message soit enregistré correctement.

La {{content}} balise

La balise {{content}} sera remplacée par le corps de votre e-mail. C'est le contenu qui changera à chaque fois que vous enverrez un nouveau message. Vous devez inclure cette balise même si vous ne comptez pas modifier le contenu de votre message.

La {{unsubscribe_link}} balise
Vous devez donner à vos users la possibilité de se désabonner de vos messages. La balise {{unsubscribe_link}} inclura un lien HTML complet avec un texte sur lequel l'utilisateur peut cliquer pour se désabonner. Vous pouvez inclure le lien lui-même dans l'e-mail :

{{unsubscribe_link}}

La {{unsubscribe_url}} balise

Si vous souhaitez fournir votre propre texte pour le lien de désabonnement, la balise {{unsubscribe_url}} inclura uniquement l'URL de désabonnement. Vous pouvez faire comme suit :

<a href="{{unsubscribe_url}}">VOTRE TEXTE DE DÉSABONNEMENT PERSONNALISÉ</a>

Important :

L'URL de désabonnement doit être placée avant la balise </body> pour être détectée par nos contrôles de validation et pour que le message soit enregistré correctement.
Pour le lien de désabonnement, il n'est pas possible de personnaliser l'URL elle-même (vous ne pouvez personnaliser que le texte du lien).

2. Lors de l'ajout de variables user, company ou author à votre modèle.

Variables user :

{{ first_name | fallback:"ENTER FALLBACK HERE" }}

Variables user personnalisées :

{{ custom_data.name_of_attribute | fallback:"ENTER FALLBACK HERE" }}

Entreprise

{{ company.name | fallback:"ENTER FALLBACK HERE" }}

ID de l'entreprise

 {{ company.remote_company_id | fallback:"ENTER FALLBACK HERE" }}

Variables personnalisées de l'entreprise :

{{ company.custom_data.name_of_attribute | fallback:"ENTER FALLBACK HERE" }}

Variables author et workspace

Pour inclure le prénom, le nom complet du coéquipier qui envoie ou le nom de votre workspace dans un modèle, vous pouvez utiliser l'une des variables suivantes :

{{ message.author.first_name }}
{{ message.author.name }}
{{ app.name }}

Cela utilisera le nom du coéquipier dans le champ « De » de tout message envoyé avec ce modèle.

3. Lors du collage de code provenant d'un autre fournisseur...

...comme MailChimp ou Campaign Monitor, sachez que vos balises personnalisées peuvent ne pas fonctionner, et vous devrez modifier le code pour qu'il fonctionne correctement.

4. Rendre vos modèles responsives

Pour garantir que vos e-mails soient responsives et s'affichent bien sur mobile, utilisez cette balise « Style » que nous avons incluse dans le modèle par défaut.

<style type="text/css" data-premailer="ignore">...</style>

5. Utilisation d'images dans votre modèle

Si vous utilisez des images dans votre modèle, vous devrez utiliser une application telle que Imgur ou Zight pour les héberger. Ensuite, il suffit de coller l'URL dans le code de votre modèle et l'image s'affichera.

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.

6. Utilisation de CSS dans votre modèle

Vous pouvez utiliser tout le CSS que vous souhaitez, nous intégrerons automatiquement tous les styles sauf si vous mettez l'attribut data-premailer="ignore" dans l'attribut style dans l'en-tête de votre modèle personnalisé. L'ignore peut être utile lorsque vous avez une mise en page responsive et que l'intégration du CSS casserait cette mise en page.

Note : Lorsque vous stylisez la zone de contenu principale de votre modèle, n'appliquez pas la règle overflow: hidden; car cela affectera l'expérience d'édition du compositeur de message. Appliquer cette règle cachera les composants de l'interface utilisateur du compositeur, par exemple le formateur de texte, l'insertion d'attributs, etc., comme ceci :

7. Rédaction de votre message

Pour utiliser votre modèle, sélectionnez-le dans le menu déroulant de la fenêtre du compositeur de message la prochaine fois que vous souhaitez envoyer un e-mail. Vous pouvez ensuite styliser le contenu avec un HTML basique, et il s'affichera à la place de la balise {{ content }} que vous avez incluse dans votre modèle.

8. Styliser les boutons

Si vous créez un modèle d'e-mail personnalisé, sachez que les boutons insérés par le Compositeur auront des styles minimaux appliqués. Vous pouvez personnaliser les boutons en ciblant la classe HTML .intercom-h2b-button et le balisage suivant :

<a href="http://test.com" class="intercom-h2b-button">Texte du bouton</a>

9. Testez vos modèles personnalisés dans différents clients e-mail

Chaque fournisseur d'e-mails a tendance à afficher les e-mails un peu différemment. Nos modèles par défaut sont conçus pour fonctionner au mieux avec le plus grand nombre possible de clients e-mail.

Si vous utilisez un modèle personnalisé, nous vous recommandons de vérifier le rendu de votre e-mail dans plusieurs clients e-mail différents. Cela peut se faire en utilisant l'option « Envoyer un e-mail test » de chaque message pour tester l'envoi vers différents clients e-mail.

Une autre option est d'utiliser un outil tiers pour avoir une vue complète de la façon dont votre e-mail sera rendu dans une grande variété de clients — Litmus, 250ok et Email on Acid sont quelques exemples d'outils qui font cela.

E-mails ponctuels en HTML complet

Si vous souhaitez envoyer un message ponctuel écrit en HTML, au lieu de créer un modèle réutilisable, cliquez simplement sur </> Passer à l'éditeur HTML lors de la rédaction d'un nouveau message.

FAQ

`dir="rtl"` est supprimé du modèle, est-ce intentionnel ?

Oui, c'est le comportement attendu. Il existe une solution pour ajouter rtl dans un modèle personnalisé, qui consiste à utiliser l'alternative CSS : style="direction: rtl;". Cela n'est pas supprimé de nos modèles.

Je veux commencer la ligne d'objet de leur e-mail par un `#`, mais il est supprimé - comment faire ?

Si vous ajoutez un antislash \ avant le #, il s'affichera correctement. Par exemple, si vous envoyez votre ligne d'objet comme #HashtagsAreGreat, cela sera supprimé en HastagsAreGreat. Cependant, si vous envoyez \#HashtagsAreGreat, cela sera supprimé en #HashtagsAreGreat.

Pourquoi une image ne s'affiche-t-elle pas dans l'aperçu de l'e-mail HTML ?

Si vous utilisez des images dans votre e-mail HTML, vous devez utiliser des URL https pour voir l'aperçu du message. Nous ne supportons pas les images brutes avec une URL http, donc l'image apparaîtra cassée dans l'aperçu (mais sera correctement affichée lorsqu'elle sera envoyée au client). Pour résoudre ce problème, vous devez héberger votre image sur une URL https.

Je veux charger dynamiquement le nom de l'auteur du message et le nom de l'application directement depuis un modèle personnalisé, est-ce possible ?

Vous le pouvez en effet. Voici un modèle HTML personnalisé que vous pouvez utiliser.

<table>
 <tbody>
 <tr> 
 <td width="40" class="space"> </td>
 
 <td valign="middle" width="50" style="color: #272727;" align="left">
 <img src="example-image.com" height="40" width="40" class="avatar" alt="intercomavatar">
 </td>

 <td class="admin_name" style="color: #999999">
 <p> {{ message.author.first_name }} from {{ app.name }} </p> 
 </td>
 </tr>
 </tbody>
</table>

Note : Vous devez remplacer le src="example-image.com" de la balise img par un lien réel vers une image que vous souhaitez utiliser.