Skip to content

Créer un e-mail par glisser-déposer

L’éditeur par glisser-déposer vous permet de créer des e-mails entièrement personnalisés pour vos Campaigns ou Canvas, sans avoir à utiliser de HTML pour construire le corps de votre e-mail.

À propos de l’éditeur

L’éditeur par glisser-déposer utilise le Contenu et les Lignes comme deux composants clés pour simplifier votre flux de travail, sans recourir au HTML.

Contenu

Le Contenu comprend une série de tuiles représentant différents types de contenu que vous pouvez utiliser dans votre message. Elles sont organisées en trois catégories : basique, média et avancé.

Les blocs de base constituent la fondation de votre e-mail. Grâce à ces blocs, vous pouvez ajouter les éléments suivants dans le corps de votre e-mail :

  • Titre
  • Paragraphe
  • Liste
  • Bouton
  • Séparateur
  • Espacement

Les blocs média vous permettent d’ajouter différents contenus visuels tels que des images, des vidéos, des icônes et liens vers les réseaux sociaux, ainsi que des icônes personnalisables.

Bien que l’éditeur par glisser-déposer simplifie votre flux de travail avec ces blocs, vous pouvez également utiliser les blocs avancés pour insérer du HTML ou ajouter un menu dans le corps de votre e-mail. Notez que l’utilisation de votre propre HTML peut affecter le rendu du message.

Lignes

Les Lignes sont des unités structurelles qui définissent la composition horizontale d’une section du message à l’aide de colonnes. Vous pouvez utiliser des lignes vides ou des Content Blocks. L’utilisation de plusieurs colonnes vous permet de placer différents éléments de contenu côte à côte. Vous pouvez ainsi ajouter tous les éléments structurels nécessaires à votre message, quel que soit le modèle sélectionné au départ.

Style Cartes

Le Style Cartes est une propriété de ligne qui vous permet d’ajouter un espacement entre les colonnes et d’arrondir leurs coins. Avec le formatage en style carte, vous pouvez créer des mises en page plus attrayantes visuellement pour mettre en valeur votre contenu le plus important, comme les nouvelles fonctionnalités produit, les témoignages, les offres spéciales, les actualités, et bien plus encore.

Utiliser l’éditeur par glisser-déposer

Vous ne savez pas si votre e-mail doit être envoyé via une campagne ou un Canvas ? Les Campaigns sont plus adaptées aux envois de messages ciblés ponctuels, tandis que les Canvas conviennent mieux aux parcours utilisateur en plusieurs étapes.

Une fois que vous avez choisi où créer votre message, passons aux étapes de création d’un e-mail par glisser-déposer.

Étape 1 : Sélectionner votre modèle

Après avoir sélectionné l’éditeur par glisser-déposer comme expérience d’édition, vous pouvez choisir de :

  • Partir d’un modèle vierge.
  • Utiliser un modèle d’e-mail Braze prédéfini par glisser-déposer.
  • Utiliser un modèle d’e-mail par glisser-déposer enregistré.

Vous pouvez également accéder à tous les modèles depuis la section Modèles.

Après avoir sélectionné votre modèle, vous verrez un aperçu de votre e-mail sous Variantes d’e-mail qui inclut les informations d’envoi et le corps de l’e-mail.

Sélectionnez ensuite Modifier le corps de l’e-mail pour commencer à concevoir la structure de l’e-mail dans l’éditeur par glisser-déposer.

La section « Variantes d'e-mail » avec un exemple de corps d'e-mail.

Étape 2 : Créer votre e-mail

L’expérience d’édition par glisser-déposer est divisée en trois sections : Paramètres d’envoi, Contenu et Prévisualisation et test. La magie de la création du corps de votre e-mail se produit dans la section Contenu. Avant de créer votre e-mail, il est important de comprendre les composants clés qui guident votre expérience de création. Si vous avez besoin de les revoir, consultez À propos de l’éditeur.

Lorsque vous êtes prêt, utilisez les blocs de contenu par glisser-déposer pour créer votre e-mail.

  1. Sélectionnez le panneau Lignes. Glissez et déposez les configurations de lignes dans l’éditeur principal. Cela définira la disposition du contenu de votre e-mail.
    • Notez que les nouvelles configurations doivent être glissées en haut ou en bas d’une section existante.
    • Lorsque vous sélectionnez une configuration de ligne, les paramètres Propriétés de la ligne apparaissent pour personnaliser davantage les couleurs d’arrière-plan, les images et les tailles de colonnes personnalisées.
  2. Sélectionnez le panneau Contenu. Glissez et déposez les tuiles de contenu souhaitées dans les composants de ligne.
    • Vous pouvez également glisser n’importe quelle tuile de Contenu directement dans l’éditeur principal. Cela crée automatiquement une ligne pour la tuile.
    • Vous pouvez affiner davantage la tuile en la sélectionnant et en ajustant les champs dans Propriétés du contenu et Options du bloc. Cela inclut la modification de l’espacement des lettres, du remplissage, de la hauteur de ligne, et plus encore.

Consultez Autres personnalisations pour découvrir d’autres façons de personnaliser votre e-mail par glisser-déposer.

Pendant la création de votre e-mail, vous pouvez basculer entre une vue bureau et mobile pour prévisualiser l’apparence de votre e-mail pour vos groupes d’utilisateurs. Cela vous permet de vérifier que votre contenu est responsive et d’effectuer les ajustements nécessaires au fur et à mesure.

Étape 3 : Ajouter vos informations d’envoi

Une fois la conception et la création de votre e-mail terminées, il est temps d’ajouter vos informations d’envoi dans la section Paramètres d’envoi.

  1. Sous Informations d’envoi, sélectionnez un e-mail comme Nom d’affichage de l’expéditeur + Adresse. Vous pouvez également personnaliser cela en sélectionnant Personnaliser le nom d’affichage de l’expéditeur + Adresse.
  2. Sélectionnez un e-mail comme Adresse de réponse. Vous pouvez également personnaliser cela en sélectionnant Personnaliser l’adresse de réponse.
  3. Ensuite, sélectionnez un e-mail comme Adresse CCI pour rendre votre e-mail visible à cette adresse.
  4. Ajoutez une ligne d’objet à votre e-mail. Vous pouvez également ajouter une accroche et un espace blanc après l’accroche.

Un aperçu dans le panneau de droite se remplira avec les informations d’envoi que vous avez ajoutées. Ces informations peuvent également être mises à jour en accédant à Paramètres > Préférences des e-mails > Configuration de l’envoi.

Personnaliser l’en-tête de votre e-mail (avancé)

Sous Paramètres d’envoi, vous pouvez ajouter de la personnalisation pour les en-têtes d’e-mail et les extras d’e-mail, ce qui vous permet de renvoyer des données supplémentaires à d’autres fournisseurs de services d’e-mailing. La personnalisation d’un en-tête d’e-mail, comme l’inclusion du nom du destinataire, peut également contribuer à augmenter la probabilité que votre e-mail soit ouvert.

Étape 4 : Tester votre e-mail

Après avoir ajouté vos informations d’envoi, il est enfin temps de tester votre e-mail.

Accédez à la section Prévisualisation et test. Vous avez ici la possibilité de prévisualiser votre e-mail en tant qu’utilisateur ou d’envoyer un message test. Cette section inclut également Inbox Vision, qui vous permet de vérifier que votre e-mail s’affiche correctement sur différents clients mobiles et web.

Comme vous pouvez visualiser trois versions différentes du même e-mail dans l’éditeur, dans Inbox Vision et en tant qu’e-mail test réel, il est important d’aligner les détails sur toutes vos plateformes.

Prévisualisation et envoi test

Sous l’onglet Prévisualiser en tant qu’utilisateur, vous pouvez sélectionner les types d’utilisateurs suivants pour prévisualiser votre message.

  • Utilisateur aléatoire : Braze sélectionnera aléatoirement un utilisateur de la base de données et prévisualisera l’e-mail en fonction de ses attributs ou informations d’événement.
  • Sélectionner un utilisateur : Vous pouvez sélectionner un utilisateur spécifique en fonction de son adresse e-mail ou de son ID externe. L’e-mail sera prévisualisé en fonction des attributs et informations d’événement de cet utilisateur.
  • Utilisateur personnalisé : Vous pouvez personnaliser un utilisateur. Braze proposera des champs de saisie pour tous les attributs et événements disponibles. Vous pouvez entrer les informations que vous souhaitez voir dans l’e-mail de prévisualisation.

Vous pouvez également sélectionner Copier le lien de prévisualisation pour générer et copier un lien de prévisualisation partageable qui montre à quoi ressemblera l’e-mail pour un utilisateur aléatoire. Le lien sera valide pendant sept jours avant de devoir être régénéré.

Notez que les modifications apportées à un modèle d’e-mail ne seront pas reflétées dans un lien généré précédemment. Vous devrez générer un nouveau lien de prévisualisation pour voir les modifications.

Prévisualisation d'e-mail avec un bouton « Copier le lien de prévisualisation » et copier le lien généré.

Utiliser Inbox Vision

Inbox Vision vous permet de visualiser vos campagnes d’e-mail du point de vue des clients de messagerie et des appareils mobiles. Pour tester votre e-mail avec Inbox Vision, sélectionnez Inbox Vision dans la section Prévisualisation et test puis sélectionnez Lancer Inbox Vision.

Il est important de tester et de vérifier les détails les plus fins de votre e-mail. Par exemple, les images d’arrière-plan dans les e-mails peuvent parfois provoquer l’apparition de lignes blanches ou de coupures entre les images, ou des clients comme Windows Outlook peuvent ne pas afficher les images d’arrière-plan. Inbox Vision peut vous aider à identifier ces différences entre les clients. Dans ce cas, définissez une couleur d’arrière-plan de secours pour que ces images s’affichent comme prévu.

Pour plus d’informations, consultez Envoyer des messages test.

Après avoir utilisé l’éditeur par glisser-déposer pour concevoir et créer votre e-mail, continuez à créer le reste de votre campagne ou Canvas.

À propos du moteur HTML mis à jour

Le moteur sous-jacent qui produit le HTML à partir de l’éditeur par glisser-déposer a été optimisé et mis à jour, offrant des avantages en termes de compression et de rendu des fichiers HTML.

La taille moyenne de nos données HTML exportées a été réduite, ce qui entraîne un chargement et un rendu plus rapides, une réduction du rognage sur mobile et une consommation de bande passante réduite.

Le rendu HTML a été amélioré grâce aux mises à jour suivantes qui minimisent le nombre de commentaires conditionnels et de requêtes média CSS. En conséquence, les fichiers HTML sont plus petits et codés plus efficacement.

  • Migration d’une conception basée sur des éléments <div> vers une base de code formatée en <table> standard
  • Les blocs éditeur ont été recodés pour plus de concision
  • Le code HTML final est compressé pour supprimer les espaces entre les balises
  • Les séparateurs transparents sont automatiquement convertis en remplissage de contenu

Autres personnalisations

Au fur et à mesure que vous créez vos e-mails par glisser-déposer, vous pouvez personnaliser davantage chaque corps d’e-mail en utilisant une combinaison de ces détails créatifs pour capter l’attention et l’intérêt de votre audience.

Images en largeur automatique

Les images ajoutées à votre e-mail seront automatiquement définies en Largeur automatique. Pour ajuster ce paramètre, désactivez Largeur automatique et modifiez le pourcentage de largeur selon vos besoins.

Option de largeur automatique dans l'onglet Contenu de l'éditeur par glisser-déposer.

Superposition de couleurs

La superposition de couleurs vous permet de modifier la couleur de l’arrière-plan de l’e-mail, de la zone de contenu et des différents composants de contenu. L’ordre des couleurs de l’avant vers l’arrière est : couleur du composant de contenu, couleur d’arrière-plan de la zone de contenu et couleur d’arrière-plan.

Exemple de superposition de couleurs dans l'éditeur par glisser-déposer.

Remplissage du contenu

Options du bloc pour l'éditeur par glisser-déposer.

Pour ajuster le remplissage, faites défiler jusqu’à Options du bloc et sélectionnez Plus d’options. Vous pouvez affiner votre remplissage pour obtenir un e-mail parfaitement ajusté.

Arrière-plan du contenu

Vous pouvez ajouter une image d’arrière-plan à votre configuration de ligne, ce qui vous permet d’intégrer davantage de design et de contenu visuel dans votre campagne d’e-mail.

Attribut de langue

Vous pouvez définir l’attribut de langue en accédant à l’onglet Paramètres et en sélectionnant la langue souhaitée. Vous pouvez également cibler l’attribut utilisateur {{${language}}} si le message est destiné à des utilisateurs avec des valeurs de langue dynamiques.

Définition de la valeur « Langue » pour un e-mail.

Personnalisation

Options d'ajout de personnalisation pour l'éditeur par glisser-déposer.

Le Liquid de base est pris en charge dans l’éditeur d’e-mail par glisser-déposer. Pour ajouter de la personnalisation à votre e-mail :

  1. Sélectionnez Personnalisation dans la section Contenu.
  2. Sélectionnez le type de personnalisation. Cela inclut les attributs par défaut (standard), les attributs d’appareil, les attributs personnalisés, et plus encore.
  3. Recherchez l’attribut à ajouter.
  4. Copiez l’extrait Liquid généré et collez-le dans le corps de votre e-mail.

La personnalisation Liquid n’est pas prise en charge pour les blocs d’image et les champs de type lien de bouton.

Images dynamiques

Vous pouvez choisir d’inclure des images dynamiques dans vos e-mails en utilisant le Contenu connecté ou Liquid dans l’attribut source de votre image. Par exemple, au lieu d’une image statique, vous pouvez insérer https://example.com/images/?imageBanner={{first_name}} comme URL d’image pour inclure le prénom d’un utilisateur dans l’image. Cela permet de personnaliser vos e-mails pour chaque utilisateur.

Direction du texte

Lors de la rédaction de votre message, vous pouvez basculer la direction du texte entre gauche-à-droite et droite-à-gauche en sélectionnant le bouton Direction du texte correspondant. Vous pouvez utiliser cette option lors de la création de messages dans des langues comme l’arabe et l’hébreu.

Menu de l'éditeur d'e-mail par glisser-déposer avec un bouton pour basculer l'alignement du texte entre droite-à-gauche et gauche-à-droite.

L’apparence finale des messages de droite à gauche dépend en grande partie de la façon dont les fournisseurs de services les affichent. Pour les bonnes pratiques de création de messages de droite à gauche qui s’affichent aussi fidèlement que possible, consultez Créer des messages de droite à gauche.

HTML

Attributs HTML pour les liens

La section « Attributs » avec l'attribut « clicktracking » désactivé pour un lien.

Lorsque vous utilisez des liens, des boutons, des images et des vidéos dans l’éditeur par glisser-déposer, sélectionnez Ajouter un nouvel attribut sous Attributs dans la section Contenu pour ajouter des informations supplémentaires aux balises HTML dans les e-mails. Cela peut être particulièrement utile pour la personnalisation des messages, la segmentation et le style.

Un cas d’utilisation courant consiste à insérer un attribut dans votre balise d’ancrage pour désactiver le suivi des clics lors de l’envoi via Braze.

  • SendGrid : clicktracking = "off"
  • SparkPost : data-msys-clicktrack = "0"

Un autre cas d’utilisation courant consiste à marquer des liens spécifiques comme liens universels. Les liens universels sont des liens qui redirigent vers votre application, offrant à vos utilisateurs une expérience intégrée.

  • SendGrid : universal = "true"
  • SparkPost : data-msys-sublink = "open-in-app" (un sous-chemin personnalisé doit être configuré)

Pour configurer les liens universels, consultez Liens universels et App Links.

Vous pouvez également intégrer l’un de nos partenaires d’attribution, comme Branch ou AppsFlyer, pour gérer les liens universels.

Enfin, des attributs prédéfinis sont disponibles pour rendre votre message accessible. Pour en savoir plus, consultez notre article dédié Créer des messages accessibles dans Braze.

Balises head personnalisées

Utilisez les balises <head> pour ajouter du CSS et des métadonnées dans votre e-mail. Par exemple, vous pouvez utiliser ces balises pour ajouter une feuille de style ou un favicon. Liquid est pris en charge dans les balises <head>.

Tout ce qui est ajouté en dehors des balises <head> sera ajouté après la balise <body> dans votre e-mail. Cela signifie que le contenu ajouté s’affichera dans l’e-mail.

Balises et attributs autorisés par balise
New Stuff!