Modèles d'e-mails transactionnels open source

Lorsque vous configurez un nouveau compte SendGrid, la création d'un ensemble de modèles d'e-mails pour votre compte est l'une des tâches les plus importantes à accomplir. Si vous prévoyez d'envoyer des e-mails via notre API pour votre application ou service, vous aurez probablement besoin de plusieurs types de modèles d'e-mails différents. Certains des plus courants sont les réinitialisations de mot de passe, les confirmations par e-mail et les reçus.

Bien qu'il existe une vaste sélection de modèles d'e-mails prédéfinis sur le Web, il n'est pas toujours facile de trouver un ensemble facile à personnaliser pour correspondre à votre marque.

Il est également important de tester minutieusement les modèles dans les clients de messagerie courants. Ce processus peut prendre du temps et ralentir le processus de configuration de votre compte SendGrid et de démarrage de l'envoi d'e-mails.

J'ai réalisé que l'équipe de SendGrid pouvait apporter de la valeur à nos clients en créant un ensemble open source de modèles d'e-mails que les utilisateurs pourraient exploiter pour couvrir ces cas d'utilisation courants. Non seulement les modèles sont faciles à personnaliser, mais vous serez prêt à envoyer rapidement !

Notre ensemble de modèles, que nous appelons "Coller", couvre 5 cas d'utilisation :

• Réinitialisation du mot de passe
• Confirmation de l'émail
• Lettres de bienvenue
• Reçus
• Résumés (quotidiens, hebdomadaires ou mensuels)

Téléchargez les modèles sur GitHub

Pour commencer avec nos modèles de collage, rendez-vous sur GitHub et clonez le référentiel ou téléchargez le dossier de modèles de collage. Il convient également de mentionner que ces modèles résident dans un référentiel open source de modèles d'e-mails auxquels d'autres utilisateurs de SendGrid ont contribué lors de notre dernier Hacktoberfest.

Personnalisation des modèles de collage

Une fois que vous avez une copie locale des modèles de collage, ouvrez-les dans votre éditeur de code préféré (je recommanderais VSCode ou Atom ; ils sont tous les deux gratuits).

Je vous recommande de commencer par base.html car il contient la plupart des composants réutilisables trouvés dans de nombreux autres modèles. Ces modèles partagent tous une structure commune pour le HTML, et bien qu'il existe quelques styles de base dans le document, la majorité des styles se trouvent en ligne.

Au fur et à mesure que vous parcourez le code HTML, vous remarquerez de nombreux commentaires HTML pour indiquer où les blocs commencent et se terminent. Ce sont des notes importantes qui vous aideront à parcourir les modèles et à commencer à les modifier.

Vous remarquerez également des styles sur les éléments HTML pour les couleurs d'arrière-plan, la typographie, l'espacement, etc. Je vous encourage à les expérimenter pour avoir une idée de la façon dont ils modifient l'apparence de ces modèles.

Ajoutez votre logo aux modèles

L'une des premières choses à faire est de remplacer le logo Coller les modèles par le vôtre. Vous pouvez trouver rapidement le bloc logo en recherchant son commentaire HTML, indiquant son point de départ :

Dans ce bloc, vous souhaiterez localiser la balise d'ancrage (<a> ) et remplacer le HREF par votre URL. Le modèle doit être lié à la page d'accueil de SendGrid par défaut.

Après avoir ajusté l'URL, remplaçons le logo Coller par le vôtre. Je vous recommande de stocker votre logo dans un endroit auquel vous pouvez facilement vous connecter, comme votre serveur Web ou un CDN. Une fois que vous avez remplacé le logo src, ajustez les styles en ligne afin que la largeur/hauteur soit correcte. Cela dépendra du rapport hauteur/largeur de votre logo. Par défaut, le logo Coller est carré de 48 pixels, nous avons donc défini les styles de largeur sur 48 pixels.

Exemple:

Dans cet exemple, l'URL du logo Coller est référencée avec certains styles de largeur pour la définir à la taille souhaitée de 48 pixels. Ajustez ces valeurs pour votre propre logo pour vous assurer qu'il est net.

Personnalisation des couleurs d'arrière-plan

Comme mentionné ci-dessus, la couleur d'arrière-plan est définie sur une variété de blocs pour établir le style par défaut des modèles de collage (gris et blancs). Vous pouvez facilement changer cela (et vous devriez) pour correspondre aux couleurs de votre marque.

Le moyen le plus simple de passer d'un style à l'autre consiste à utiliser votre éditeur pour rechercher les styles en ligne, bgcolor et la couleur d'arrière-plan. La valeur de ces propriétés peut être remplacée par des valeurs hexadécimales (par exemple #000000) ou des noms de couleur (par exemple noir). Au fur et à mesure que vous travaillez sur ces modifications, il est facile de garder un œil sur les choses si vous ouvrez l'un des modèles dans votre navigateur préféré et actualisez au fur et à mesure que vous apportez des modifications.

Exemple:

Dans cet exemple, la balise body est stylisée avec une couleur d'arrière-plan gris clair. Cette valeur de couleur et d'autres dans le modèle doivent être personnalisées pour correspondre à votre marque.

Personnalisation des boutons

Les boutons sont l'un des composants d'interface les plus courants dans les modèles d'e-mail. Vous les utiliserez comme un appel à l'action, en mettant en évidence l'action la plus importante que vous souhaitez qu'un utilisateur effectue, comme la confirmation de son adresse e-mail.

Par défaut, les boutons de Paste sont conçus comme des blocs bleus avec un subtil rayon de bordure pour arrondir les coins. La personnalisation de ces boutons en fonction de votre marque est similaire aux modifications que nous avons déjà apportées à la couleur d'arrière-plan de notre modèle. Recherchez le bloc à l'aide du commentaire HTML que nous avons ajouté pour vous :

Nous avons plusieurs cellules de tableau qui ont des arrière-plans blancs appliqués (#ffffff) pour créer le bloc autour du bouton, mais vous voudrez trouver la cellule de tableau qui a les styles suivants ci-dessous.

Exemple:

Dans cet exemple, le <td> a un bgcolor qui est utilisé pour définir la couleur du bouton, ainsi qu'un border-radius pour arrondir subtilement les coins. Expérimentez avec ces styles pour obtenir un look unique pour vos boutons qui correspondent à votre marque.

La deuxième partie de notre bouton est l'ancre (<a> ) dans la cellule du tableau ci-dessus.

Cette ancre contrôle l'URL où votre bouton ira une fois cliqué, mais aussi les styles de texte pour l'étiquette. Vous pouvez ajuster les styles pour ajuster l'étiquette en fonction de vos préférences et de ce qui correspond à votre marque.

Personnaliser la typographie

Par défaut, les modèles de collage se chargent dans la police Web, Source Sans Pro, via Google Fonts. Vous pouvez utiliser une police Web différente de la collection de Google ou utiliser l'ensemble standard de polices que l'on trouve sur la plupart des ordinateurs de nos jours (Arial, Georgia, Times, etc.).

Si vous envisagez d'utiliser une police Web différente, consultez mes conseils et astuces sur le développement d'e-mails pour obtenir des conseils utiles. Assurez-vous de parcourir le HTML pour tous les styles en ligne qui font référence à la famille de polices et ajustez-les en fonction de vos préférences.

Exemple:

Dans cet exemple, le <td> a un style de famille de polices défini pour utiliser Source Sans Pro, avec quelques recours à des polices plus standard dans le cas où la police Web ne se charge pas.

Mettre fin aux pensées

J'espère que ces pointeurs vous aideront à personnaliser ces modèles en fonction de votre marque et à vous permettre d'être opérationnel sur la plate-forme SendGrid. À l'avenir, j'espère étendre notre référentiel de modèles d'e-mails avec plus de modèles, mais aussi un outil de construction qui rendra le processus de personnalisation beaucoup plus rapide.

Si vous rencontrez des problèmes en cours de route, veuillez soumettre un problème contre le référentiel GitHub, et si vous souhaitez contribuer, veuillez soumettre une demande d'extraction. Vous cherchez plus de modèles à expérimenter ? Essayez les modèles d'e-mail HTML réactifs gratuits de SendGrid.