Simplifiez votre marketing avec des modèles d'e-mail SendGrid personnalisables

5 fonctionnalités qui font de Blocks l'outil parfait pour créer vos modèles d'e-mail SendGrid

Vous avez encore du mal à créer des modèles d'e-mail SendGrid impeccables en utilisant le moins de ressources possible ? Blocks est la solution parfaite pour vous. Notre éditeur d'e-mail glisser-déposer, sans code, vous aide à accélérer la production d'e-mails sans perdre en qualité. Voici 5 fonctionnalités de Blocks qui le prouvent. Vous verrez ci-dessous pourquoi nos modèles d'e-mail pour SendGrid sont un excellent point de départ.

1. Choisissez entre code et no-code

Blocks est un éditeur d'e-mail no-code, ce qui signifie que vous pouvez le maîtriser sans aucune compétence en code. Pour créer un modèle d'e-mail SendGrid impeccable, utilisez un modèle prêt à l'emploi ou construisez le vôtre à l'aide de structures et d'éléments : Blocks écrit le code lui-même. 

Ne vous inquiétez pas pour la qualité du code : il ne contiendra ni éléments étranges ni éléments superflus. Nos modèles d'e-mail SendGrid sont entièrement compatibles avec toutes les plateformes qui prennent en charge le HTML.

Mais si vous préférez modifier le code vous-même, c'est tout à fait possible. Il vous suffit d'ouvrir la section Code, et le tour est joué.

2. Des structures et éléments prêts à l'emploi 

Pour adapter le modèle prêt à l'emploi à vos besoins ou pour construire votre propre modèle d'e-mail SendGrid, utilisez les structures et éléments prêts à l'emploi. Vous y trouverez tous les composants nécessaires à un modèle SendGrid parfait : en-têtes, pieds de page, boutons, éléments de texte, images, etc. 

Faites glisser les éléments pour changer leur position dans l'e-mail et personnalisez leur style comme vous le souhaitez. 

3. Tous vos projets au même endroit

C'est une fonctionnalité redoutable pour tous ceux qui en ont assez de perdre du temps et de l'énergie à chercher les éléments nécessaires à leurs projets. Blocks vous permet de stocker vos projets sur nos serveurs sécurisés : rangez tout dans des dossiers pour une meilleure navigation, déplacez des modèles d'e-mail d'un dossier à l'autre, et bien plus encore. 

4. Des modèles d'e-mail SendGrid adaptés aux mobiles

Si vous choisissez de créer votre modèle d'e-mail SendGrid dans Blocks, vous pouvez être certain que vos e-mails seront tout aussi beaux sur tous les appareils, qu'il s'agisse d'un mobile, d'une tablette ou d'un ordinateur. Blocks propose aussi une fonction d'aperçu qui montre le rendu de votre e-mail en version mobile et bureau :

5. Des éléments dynamiques pour vos modèles d'e-mail SendGrid

Vous voulez personnaliser vos modèles d'e-mail SendGrid avec des éléments dynamiques ? Aucun problème ! Blocks vous permet d'ajouter des éléments dynamiques au modèle et de les adapter à vos besoins. Restez dans l'air du temps et utilisez des éléments dynamiques dans vos modèles d'e-mail SendGrid avec Blocks !

Comment transformer un modèle Blocks en Dynamic Template SendGrid

SendGrid conserve les designs transactionnels sous forme de modèles dynamiques et les remplit avec les données de votre requête API. Blocks ne propose pas d'export direct vers SendGrid : vous copiez donc le HTML de votre e-mail et le collez vous-même dans le modèle.

Où placer le modèle

Dans SendGrid, ouvrez Email API > Dynamic Templates, créez un modèle et cliquez sur Add Version. Choisissez un design de départ, sélectionnez le Code Editor et collez-y le HTML exporté. Votre code fera référence au modèle par son identifiant, qui commence par d-. La procédure complète figure dans le guide SendGrid sur les modèles dynamiques.

Quelles variables utiliser

Les modèles dynamiques s'écrivent en Handlebars : remplacez le texte d'exemple par {{first_name}}, répétez les lignes de tableau avec {{#each}} et placez {{subject}} dans la ligne d'objet de la version. Lorsqu'une valeur peut contenir des guillemets ou une esperluette, utilisez des triples accolades, comme dans {{{subject}}}.

<p>Hi {{first_name}},</p>
<table>
  {{#each items}}
  <tr><td>{{this.name}}</td><td>{{this.price}}</td></tr>
  {{/each}}
</table>

Votre application envoie ensuite l'identifiant du modèle avec les données de ses balises, ici avec la bibliothèque officielle Node.js :

const sgMail = require('@sendgrid/mail');
sgMail.setApiKey(process.env.SENDGRID_API_KEY);

sgMail.send({
  to: 'customer@example.com',
  from: 'shop@example.com', // a verified sender
  templateId: process.env.SENDGRID_TEMPLATE_ID, // d-...
  dynamicTemplateData: {
    subject: 'Your order has shipped',
    first_name: 'Anna',
    items: [{ name: 'T-shirt', price: '$20' }],
  },
});

Comment tester l'e-mail

Avant le premier envoi, cliquez sur Preview dans l'éditeur, ouvrez Show Test Data et collez un exemple JSON avec les mêmes clés que dans votre code. Vérifiez que chaque balise est bien remplie : SendGrid prend en charge la plupart des fonctionnalités de Handlebars, mais pas toutes, et mieux vaut tester les conditions sur des données d'exemple. Après un envoi réel, le flux Activity montre ce qu'il est advenu de chaque message.

Pour conclure

Accélérer la production d'e-mails et en réduire le coût, c'est notre nouvelle réalité. Si vous voulez garder une longueur d'avance sur vos concurrents, adoptez Blocks, un éditeur d'e-mail glisser-déposer sans code. Cela va tout changer.