Modèle d’email de bienvenue : Guide du développeur pour MJML et Mailjet (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.

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

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

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

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>

                            
                        

• {{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 "default" pour fournir des valeurs alternatives sûres.

Cette étape comporte deux volets.

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."
}

                            
                        

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.

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

• 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 :"à vous"}} permet d’éviter les salutations problématiques du type « Bonjour , »

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

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

                            

                                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"
 }
  ]
}
                            
                        

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.

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.

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

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.

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

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.

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.

Auteur: Dale Hart Responsable du marketing de contenus chez Sinch Mailjet