Développeurs

Modèle d’email de bienvenue : Guide du développeur pour MJML et Mailjet (2025)

Apprenez à coder un modèle d'email de bienvenue avec MJML et le templating language de Mailjet dans ce tutoriel pas à pas, avec des échantillons de code et des exemples.
Image pourModèle d’email de bienvenue : Guide du développeur pour MJML et Mailjet (2025)
octobre 3, 2025

Les emails de bienvenue sont votre première impression auprès des nouveaux utilisateurs. Ils arrivent au moment où l’engagement est le plus fort et dépassent régulièrement les campagnes habituelles en termes d’ouverture et de clics. Ce guide complet vous guidera dans la création d’un modèle d’email de bienvenue personnalisé et réactif en utilisant MJML et le puissant système de création de modèles de Mailjet.

À la fin de ce tutoriel, vous disposerez d’un flux de travail prêt pour la production qui comprend la création de modèles réutilisables, la mise en œuvre d’une personnalisation dynamique et le suivi des statistiques de performance, le tout grâce à l’API Mailjet.

Ce que vous allez concevoir

Voici ce que nous couvrons dans ce guide :

  • Modèle d’email en responsive design codé en MJML pour une compatibilité inter-clients
  • Personnalisation dynamique à l’aide du templating language de Mailjet
  • Flux de travail API prêt à la production pour la création, l’envoi et le suivi des emails
  • Suivi des performances avec des webhooks et des statistiques

Prérequis

Avant de commencer, assurez-vous d’avoir :

  • Un compte Mailjet avec des clés API
  • Un domaine d’expéditeur validé avec SPF/DKIM configuré dans Expéditeurs et Domaines
  • Facultatif : CLI ou éditeur MJML pour compiler le MJML en HTML

Démarrage rapide (TL;DR)

Pour les développeurs qui veulent se lancer directement :

  • Rédiger des mises en page en responsive design en MJML, puis les compiler en HTML
  • Créer des modèles réutilisables dans Mailjet en activant TemplateLanguage
  • Utilisez des variables comme {{data:firstname:"à vous"}} et {{var:plan}} pour la personnalisation
  • Envoyer via Send API v3.1 en utilisant TemplateID, Variables, CustomCampaign et URLTags
  • Tester en toute sécurité avec SandboxMode, suivre avec webhooks et évaluer avec statcounters
  • Vérifier votre domaine (SPF/DKIM) pour une délivrabilité optimale

Étape 1 : Créer votre modèle d’email de bienvenue MJML

MJML fournit une structure rapide, adaptée à la mobilité, qui se compile en un HTML à toute épreuve. Voici un modèle d’email de bienvenue allégé qui inclut des éléments de substitution pour la personnalisation :

                            

                                <mjml>
  <mj-head>
    <mj-title>Bienvenue sur {{data:brand:"notre"}} !</mj-title>
    <mj-preview>Nous vous aiderons à tout configurer en quelques minutes.</mj-preview>
  </mj-head>
  <mj-body background-color="#ffffff">
    <mj-section padding="24px 0">
      <mj-column width="100%">
        <mj-image src="https://assets.mailjet.com/logo.png" alt="{{data:brand:" brand="" logo="" width="120px"/>
        <mj-spacer height="12px"/>
        <mj-text font-size="22px" font-weight="700">
  Bonjour {{data:firstname :"à vous"}}, bienvenue à bord !
        </mj-text>
        <mj-text font-size="16px" line-height="1.6">
  Vous avez créé un compte {{var:plan:"gratuit"}}. Voici trois étapes rapides pour en tirer rapidement de la valeur :
        </mj-text>
        <mj-button href="%7B%7Bvar:primary_cta_url:" https:="" background-color="#0a84ff">
  Complétez votre profil
        </mj-button>
        <mj-text font-size="14px" color="#637381">
  Vous préférez la documentation ? Consultez notre guide de démarrage.
        </mj-text>
        <mj-button href="%7B%7Bvar:docs_url:" https:="" background-color="#1C1C1C">
  Lire la documentation
        </mj-button>
        <mj-divider border-color="#EAEAEA"/>
        <mj-text font-size="13px" color="#637381">
  Si vous n'avez pas créé ce compte, ignorez cet email ou contactez le support.
        </mj-text>
      </mj-column>
    </mj-section>
    <mj-section padding="0 0 24px">
      <mj-column>
        <mj-text font-size="12px" color="#98A2B3">
  Envoyé par {{data:brand:"Marque"}} • {{data:brand_address:"Ligne d'adresse"}} •  
  Gérez les préférences dans votre compte.
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

                            
                        

Comprendre la syntaxe de personnalisation

  • {{data:…}} : lit les propriétés du contact déjà stockées dans Mailjet (par exemple, le prénom, la marque).
  • {{var:…}} : lit les variables que vous transmettez dans l’appel de Send API (par exemple, plan, URL).
  • Valeurs alternatives : utilisez la syntaxe &quot;default&quot; pour fournir des valeurs alternatives sûres.

Étape 2 : stockez votre modèle à l’aide de l’API des modèles

Cette étape comporte deux volets.

Créer le conteneur de modèle

Tout d’abord, créez un conteneur de modèle dans Mailjet :

                            

                                POST https://api.mailjet.com/v3/REST/template
Content-Type: application/json
Authorization: Basic  {base64_encoded_api_key:secret_key}

{
  "Name": "Accompagnement – Bienvenue",
  "Locale": "fr_FR",
  "OwnerType": "user",
  "IsTextPartGenerationEnabled": "true",
  "Description": "Modèle de bienvenue MJML en responsive design avec personnalisation."
}

                            
                        

Ajoutez votre contenu HTML compilé

Après avoir compilé votre MJML en HTML, ajoutez-le en tant que contenu de modèle :

                            

                                POST https://api.mailjet.com/v3/REST/template/{TEMPLATE_ID}/detailcontent
Content-Type: application/json

{
  &quot;Html-part&quot;: &quot;<!-- paste your compiled HTML here -->&quot;,
  "Test-part": "Bonjour {{data:firstname:\"à vous\"}}, bienvenue sur {{data:brand:\"notre\"}}...",
  "Headers": {
  &quot;From&quot;: &quot;\&quot;Réussite client\&quot; <hello@yourdomain.com>&quot;,
  "Subject": "Bienvenue {{data:firstname:\"à vous\"}} — Procédons à la configuration",
  "Reply-to": "support@yourdomain.com"
 }
}

                            
                        

Conseil de pro : utilisez les en-têtes de detailcontent pour définir les valeurs par défaut de From/Subject/Reply-To. Vous pouvez toujours les remplacer au moment de l’envoi.

Étape 3 : Mettez en œuvre une personnalisation dynamique

Le templating language de Mailjet vous permet de créer des expériences d’email hautement personnalisées :

Modèles de personnalisation courants

  • Contenu basé sur le lieu : enregistrez le lieu dans les contacts et transmettez des URL spécifiques aux lieux via des variables.
  • Variations des niveaux d’abonnement : utilisez {{var:plan}} pour les variantes de texte (« Essai Pro », « Abonnement gratuit », etc.)
  • Des solutions alternatives sûres : {{data:firstname :&quot;à vous&quot;}} permet d’éviter les salutations problématiques du type « Bonjour , »

Activation du templating language

Définissez TemplateLanguage: true dans votre appel d’envoi pour le rendu de toutes les variables et propriétés des contacts.

Étape 4 : Envoyez des emails avec Send API v3.1

Une fois que vous êtes prêt, vous pouvez maintenant effectuer un :

Envoi en production avec personnalisation complète

                            

                                POST https://api.mailjet.com/v3.1/send
Content-Type: application/json

{
  "Messages": [
 {
  "From": {  
  "Email": "hello@yourdomain.com",  
  "Name": "Réussite client"  
 },
  "To": [{  
  "Email": "new.user@example.com",  
  "Name": "Nouvel utilisateur"  
  }],
  "TemplateID": TEMPLATE_ID,
  "TemplateLanguage": true,
  "Subject": "Bienvenue {{data:firstname:\"à vous\"}} — Procédons à la configuration",
  "Variables": {
  "plan": "gratuit",
  "primary_cta_url": "https://www.example.com/start",
  "docs_url": "https://dev.mailjet.com/email/guides/getting-started/"
 },
  "CustomCampaign": "onboarding_welcome",
  "DeduplicateCampaign": true,
  "URLTags": "utm_source=welcome&utm_medium=email&utm_campaign=onboarding",
  "CustomID": "welcome_0001",
  "EventPayload": "new_signup,region=US,plan=free"
 }
  ]
}
                            
                        

Test en toute sécurité avec le mode bac à sable (sandbox)

Pour tester sans envoyer de vrais emails, ajoutez « SandboxMode »: true :

                            

                                {
  "SandboxMode": true,
  "Messages": [
    // ... your message configuration
  ]
}
                            
                        

Cela valide votre charge utile et renvoie les erreurs éventuelles sans envoyer l’email.

Étape 5 : Configurez l’authentification et la délivrabilité

Vérification du domaine

  1. Ajoutez votre domaine dans la section Expéditeurs et Domaines de Mailjet
  2. Configurez les enregistrements SPF et DKIM dans votre DNS
  3. Vérifiez la configuration en utilisant le point de terminaison /dns/{domain}/check
                            

                                GET https://api.mailjet.com/v3/REST/dns/{domain}/check
                            
                        

Une authentification correcte du domaine améliore considérablement le classement des emails de bienvenue dans la boîte de réception.

Étape 6 : Suivez les performances et optimisez

Nous vous recommandons également de mettre en œuvre les éléments suivants :

Suivi des événements en temps réel

Configurer les webhooks pour recevoir les événements de livraison :

                            

                                POST https://api.mailjet.com/v3/REST/eventcallbackurl
{
  "Url": "https://your-app.com/mailjet-webhook",
  "EventType": "sent,open,click,bounce,blocked,spam,unsub"
}
                            
                        

Utilisez CustomID ou EventPayload dans vos envois pour établir une corrélation entre les événements et les utilisateurs de votre système.

Statistiques de performances

Récupérer les statistiques agrégées par voie programmatique :

                            

                                GET https://api.mailjet.com/v3/REST/statcounters
?CounterSource=APIKey
&CounterTiming=Message
&CounterResolution=Lifetime

                            
                        

Suivre des statistiques clés telles que

  • MessageSentCount
  • MessageOpenedCount
  • MessageClickedCount

Résumé

Vous disposez désormais d’un flux de travail complet pour créer, personnaliser et suivre les emails de bienvenue à grande échelle. Cette approche combine les capacités de responsive design de MJML avec les puissantes fonctions de modélisation et de statistiques de Mailjet.

Prochaines étapes

  1. Compiler votre modèle MJML en HTML
  2. Créer et stocker votre modèle via l’API de modèle
  3. Effectuer un test complet en mode bac à sable (sandbox)
  4. Configurer les webhooks pour le suivi des événements en temps réel
  5. Contrôler les performances et procéder à des ajustements sur la base des statistiques

Grâce à cette base, vous pouvez créer des expériences d’email sophistiquées qui s’adaptent aux préférences des utilisateurs, aux types d’abonnements et aux étapes du cycle de vie, le tout à partir d’un modèle unique et facile à gérer.