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 s’appuie sur deux composants clés, le Contenu et les Lignes, pour simplifier votre travail sans recourir au HTML.

Composants Contenu et Lignes de l’éditeur

Contenu	Lignes

Contenu

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

• basique
• médias
• avancé

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. Avec plusieurs colonnes, vous pouvez placer différents éléments de contenu côte à côte. Vous ajoutez ainsi tous les éléments structurels dont votre message a besoin, quel que soit le modèle choisi au départ.

Imbriquer des images dans des blocs de texte

Dans l’éditeur par glisser-déposer, vous ne pouvez pas imbriquer une image dans un paragraphe ou un autre bloc de texte. Pour placer une image à côté ou au sein d’une mise en page textuelle, utilisez des colonnes dans une Ligne : par exemple, une ligne à plusieurs colonnes sur ordinateur avec l’option Masquer sur mobile activée pour cette ligne, et une ligne distincte réservée au mobile (avec Masquer sur ordinateur et Ne pas empiler sur mobile selon vos besoins), afin que l’image et le texte s’alignent proprement sur les petits écrans.

Style de cartes

Le Style de cartes est une propriété de ligne qui vous permet d’ajouter de l’espace entre les colonnes et d’arrondir leurs angles. Grâce à cette mise en forme, vous pouvez créer des mises en page plus attrayantes pour mettre en valeur vos contenus les plus importants, 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 hésitez entre une Campaign et un Canvas pour envoyer votre e-mail ? Les Campaigns conviennent mieux aux campagnes de communication ciblées et ponctuelles, tandis que les Canvas sont plus adaptés aux parcours utilisateur en plusieurs étapes.

Remarque

Vous ne pouvez pas enregistrer directement un e-mail par glisser-déposer créé dans une Campaign ou un Canvas en tant que modèle d’e-mail dans Modèles > Modèles d’e-mail. Créez d’abord votre e-mail dans Modèles, ou consultez Puis-je enregistrer mon e-mail par glisser-déposer comme modèle après l’avoir créé dans ma Campaign ou mon Canvas ? pour savoir comment recréer un modèle par glisser-déposer ou exporter le code HTML avec Télécharger le fichier.

Une fois que vous avez choisi où créer votre message, suivez ces étapes pour créer un e-mail par glisser-déposer.

Étape 1 : Sélectionnez votre modèle

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

• Commencer avec un modèle vierge.
• Utiliser un modèle d’e-mail par glisser-déposer préconçu de Braze.
• Utiliser un modèle d’e-mail par glisser-déposer enregistré.

Remarque

Pour utiliser un modèle HTML personnalisé existant ou des modèles créés par un tiers, vous devez recréer le modèle en accédant à Contenu > E-mail et en sélectionnant Éditeur par glisser-déposer comme expérience d’édition.

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

Une fois votre modèle sélectionné, un aperçu de votre e-mail s’affiche sous Variantes d’e-mail, avec 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.

Étape 2 : Créez votre e-mail

L’expérience d’édition par glisser-déposer se divise en trois sections : Paramètres d’envoi, Contenu et Aperçu et test. C’est dans la section Contenu que la magie opère pour créer le corps de votre e-mail. Avant de vous lancer, il est important de comprendre les composants clés qui guident la création de votre e-mail. Pour une piqûre de rappel, 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. Faites glisser les configurations de lignes dans l’éditeur principal. Cela définit la mise en page du contenu de votre e-mail.
   • Notez que les nouvelles configurations doivent être déposé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 s’affichent pour personnaliser davantage les couleurs d’arrière-plan, les images et la largeur des colonnes.
2. Sélectionnez le panneau Contenu. Faites glisser les tuiles de contenu souhaitées vers les composants de ligne.
   • Vous pouvez également faire glisser n’importe quelle tuile Contenu dans l’éditeur principal. Une ligne est alors créée pour cette tuile.
   • Vous pouvez affiner la tuile en la sélectionnant et en ajustant les champs dans Propriétés du contenu et Options de bloc, notamment l’espacement des lettres, la marge intérieure, 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 l’affichage ordinateur et mobile pour prévisualiser le rendu de votre message auprès de vos groupes d’utilisateurs. Vous vérifiez ainsi que votre contenu est responsive et pouvez apporter les ajustements nécessaires au fur et à mesure.

Conseil

Besoin d’aide pour rédiger un texte percutant ? Essayez l’assistant de rédaction IA. Saisissez un nom ou une description de produit, et l’IA générera un texte marketing au ton naturel à utiliser dans vos messages.

Étape 3 : Ajoutez 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. Pour ajouter un espace après l’accroche, cochez la case Ajouter un espace après l’accroche.

Conseil

Vous pouvez utiliser Liquid dans les champs From Display Name + Address et Reply-To Address pour générer dynamiquement ces valeurs à partir d’attributs personnalisés. Cela vous permet d’envoyer des messages depuis différentes marques, régions ou départements à l’aide d’une seule Campaign par e-mail ou d’une seule étape du Canvas.

Un aperçu s’affiche dans le panneau de droite avec les informations d’envoi que vous avez ajoutées. Vous pouvez également modifier ces informations en accédant à Paramètres > Préférences e-mail > Configuration de l’envoi.

Ajouter des pièces jointes

Dans Paramètres d’envoi > Avancé, vous pouvez ajouter des pièces jointes à l’aide des méthodes suivantes :

• Téléverser un fichier : Glissez-déposez ou parcourez vos fichiers pour téléverser un fichier directement depuis votre ordinateur vers l’e-mail. Braze valide le type et la taille du fichier (jusqu’à 2 Mo par défaut) avant le téléversement, puis ces fichiers sont téléversés dans la bibliothèque multimédia. Les fichiers dépassant la limite de 2 Mo ne peuvent pas être téléversés.
• Utiliser la bibliothèque multimédia : Parcourez et sélectionnez des ressources déjà stockées dans la bibliothèque multimédia. Les fichiers PDF, les documents Word, les fichiers Excel et les présentations PowerPoint sont tous pris en charge.
• Ajouter depuis une URL : Saisissez une URL pointant vers le fichier et indiquez un nom d’affichage pour le fichier. Comme Braze ne peut pas interroger des URL arbitraires pour vérifier la taille lors de la composition de l’e-mail, la taille du fichier est vérifiée au moment de l’envoi.

Remarque

Liquid n’est pas pris en charge dans le champ Ajouter depuis une URL.

Consultez les Consignes relatives aux e-mails pour connaître les bonnes pratiques à prendre en compte.

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

Dans Paramètres d’envoi, vous pouvez personnaliser les en-têtes 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. Personnaliser l’en-tête d’un e-mail, par exemple en y incluant le nom du destinataire, peut aussi augmenter les chances que votre e-mail soit ouvert.

Remarque

Les fonctionnalités avancées apparaissent dans l’éditeur de Campaign ou de Canvas. Vous pouvez y modifier votre paramètre d’insertion CSS et saisir un en-tête ou des paires clé-valeur supplémentaires (si elles sont configurées).

Étape 4 : Testez votre e-mail

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

Conseil

Si l’e-mail s’affiche différemment dans l’éditeur et dans l’aperçu ou l’envoi test, vérifiez que toutes les balises sont fermées, que les attributs d’image ont des valeurs et que les images d’arrière-plan ne sont pas floues sur les bords.

Accédez à la section Aperçu et test. Vous pouvez y prévisualiser votre e-mail en tant qu’utilisateur ou envoyer un message test. Cette section comprend également Inbox Vision, qui vous permet de vérifier que votre e-mail s’affiche correctement sur différents clients mobiles et web.

Conseil

Vous pouvez aussi utiliser le bouton Aperçu du mode sombre dans le panneau d’aperçu pour afficher le corps de votre e-mail en mode sombre et l’ajuster si nécessaire.

Comme vous pouvez consulter trois versions différentes du même e-mail (dans l’éditeur, dans Inbox Vision et sous forme d’e-mail test), il est important d’harmoniser les détails sur l’ensemble de vos plateformes.

Aperçu et envoi test

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

• Utilisateur aléatoire : Braze sélectionne aléatoirement un utilisateur dans la base de données et prévisualise l’e-mail en fonction de ses attributs ou de ses informations d’événement.
• Sélectionner un utilisateur : Vous pouvez sélectionner un utilisateur précis à partir de son adresse e-mail ou de son ID externe. L’e-mail est prévisualisé en fonction des attributs et des informations d’événement de cet utilisateur.
• Utilisateur personnalisé : Vous pouvez personnaliser un utilisateur. Braze propose des champs pour tous les attributs et événements disponibles. Saisissez les informations que vous souhaitez voir dans l’aperçu de l’e-mail.

Remarque

L’utilisateur aléatoire ne fait pas forcément partie de vos critères de segmentation. La segmentation étant sélectionnée ensuite, Braze ne connaît pas encore votre audience cible à ce stade.

Vous pouvez également sélectionner Copier le lien d’aperçu pour générer et copier un lien d’aperçu partageable qui montre le rendu de l’e-mail pour un utilisateur aléatoire. Pour plus d’informations, consultez Aperçu partageable.

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 Aperçu et test, puis Exécuter Inbox Vision.

Il est important de tester et de vérifier les moindres détails de votre e-mail. Par exemple, les images d’arrière-plan peuvent parfois faire apparaître des lignes blanches ou des décalages entre les images, et certains clients comme Windows Outlook peuvent ne pas afficher du tout les images d’arrière-plan. Inbox Vision vous aide à repérer ces différences entre 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 conçu et créé votre e-mail dans l’éditeur par glisser-déposer, poursuivez la création du reste de votre Campaign ou de votre Canvas.

Autres personnalisations

Au fil de la création de vos e-mails par glisser-déposer, vous pouvez personnaliser davantage chaque corps d’e-mail en combinant les détails créatifs suivants pour capter l’attention de votre audience et susciter son intérêt pour votre message.

Conseil

Vous pouvez créer un thème personnalisé pour votre éditeur par glisser-déposer à l’aide des paramètres de style globaux.

Images à largeur automatique

Les images ajoutées à votre e-mail sont automatiquement réglées sur Largeur automatique. Pour modifier ce paramètre, désactivez Largeur automatique et ajustez le pourcentage de largeur selon vos besoins.

Superposition des couleurs

La superposition des 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, du premier plan vers l’arrière-plan, est le suivant : couleur du composant de contenu, couleur d’arrière-plan de la zone de contenu, puis couleur d’arrière-plan.

Marge intérieure du contenu

Pour ajuster la marge intérieure, faites défiler jusqu’à Options de bloc et sélectionnez Plus d’options. Vous pouvez affiner la marge intérieure pour donner à votre e-mail exactement l’apparence souhaitée.

Arrière-plan du contenu

Vous pouvez ajouter une image d’arrière-plan à la configuration de votre ligne, ce qui vous permet d’intégrer davantage d’éléments de design et de contenu visuel dans votre Campaign par 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 dont la langue est définie de manière dynamique.

Personnalisation

Le Liquid de base est pris en charge dans l’éditeur d’e-mails 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 de code 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 ni pour les champs de type lien de bouton.

Images dynamiques

Vous pouvez inclure des images dynamiques dans vos e-mails en ajoutant du contenu connecté ou du 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 intégrer le prénom de l’utilisateur dans l’image. Vos e-mails sont ainsi personnalisés pour chaque utilisateur.

Important

L’URL de votre image doit commencer par https://. L’utilisation de http:// entraîne le plantage de votre application.

Direction du texte

Lorsque vous rédigez votre message, vous pouvez basculer la direction du texte entre gauche à droite et droite à gauche en sélectionnant le bouton Direction du texte correspondant. Cette option est utile pour créer des messages dans des langues comme l’arabe ou l’hébreu.

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 connaître 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

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 de vos e-mails. Cela s’avère particulièrement utile pour la personnalisation, la segmentation et la mise en forme des messages.

Un cas d’usage courant consiste à désactiver le suivi des clics pour des liens spécifiques lors de l’envoi via Braze. Vous pouvez le faire de deux manières :

• Utiliser les attributs du module de lien : Sélectionnez un élément de lien (comme un module de bouton ou de lien), puis utilisez Ajouter un nouvel attribut sous Attributs pour ajouter :
  • Pour SendGrid, clicktracking comme nom et off comme valeur.
  • Pour SparkPost, data-msys-clicktrack comme nom et 0 comme valeur.
• Utiliser un bloc HTML : Insérez un bloc HTML et incluez l’attribut de suivi des clics directement dans le code de votre balise d’ancrage :
  • Pour SendGrid, utilisez <a href="your-url" clicktracking="off">Link text</a>.
  • Pour SparkPost, utilisez <a href="your-url" data-msys-clicktrack="0">Link text</a>.

Un autre cas d’usage courant consiste à marquer certains liens comme liens universels. Les liens universels redirigent vers votre application et offrent ainsi une expérience intégrée à vos utilisateurs.

• 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 vous 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 vous aider à rendre votre message accessible. Pour en savoir plus, consultez notre article dédié Créer des messages accessibles dans Braze, notamment la section sur l’affichage du texte alternatif dans les clients de messagerie.

Balises head personnalisées

Utilisez les balises <head> pour ajouter du CSS et des métadonnées à 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 élément ajouté en dehors des balises <head> sera inséré après la balise <body> de votre e-mail. Autrement dit, le contenu ajouté s’affichera dans l’e-mail.

Balises et attributs autorisés par balise

Remarque

Les noms de liens peuvent comporter jusqu’à 63 octets et sont automatiquement tronqués s’ils dépassent cette limite.

Sélection dynamique de la police

Si vous avez besoin d’une police différente pour chaque utilisateur au moment de l’envoi, vous pouvez définir dynamiquement la police du texte d’un e-mail avec Liquid en fonction des attributs utilisateur. Pour utiliser une seule police personnalisée statique dans tous vos messages, configurez plutôt une police personnalisée dans vos paramètres de style globaux.

De nombreux clients de messagerie, comme Gmail, suppriment les polices personnalisées et utilisent par défaut la police système. La sélection dynamique de la police ne fonctionne que dans certains clients de messagerie (comme Apple Mail).

Important

Si vous réutilisez ce modèle dans l’éditeur HTML, désactivez d’abord Activer le CSS en ligne. Ce paramètre n’est pas disponible pour les e-mails par glisser-déposer, pour lesquels l’insertion CSS est déjà désactivée. Lorsque l’insertion CSS s’exécute avant Liquid, les conditions autour d’un bloc <style> peuvent ne plus fonctionner. Pour en savoir plus, consultez Insertion CSS.

Pour configurer la sélection dynamique de la police :

1. Dans Paramètres d’envoi, ouvrez la section des balises head personnalisées et importez la police personnalisée avec une balise <link> pointant vers l’URL de l’API Google Fonts ou vers une autre URL hébergeant le fichier CSS de la police.
2. Utilisez une instruction Liquid if pour vérifier l’attribut utilisateur.
3. Ajoutez une balise <style> qui applique la police aux éléments de texte de l’e-mail lorsque l’utilisateur remplit la condition Liquid :
   • Ajoutez une pile de polices de secours compatibles avec le web, comme Arial, après la police personnalisée.
   • Utilisez !important pour que la police personnalisée remplace la police de secours Arial par défaut de Braze, uniquement pour les sélecteurs concernés.

Par exemple, pour changer la police lorsque l’attribut de langue d’un utilisateur est le japonais :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
{% if ${language} == 'ja' %}
<style type="text/css">
  body,
  td,
  div,
  p,
  span,
  a,
  li,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: "Noto Sans JP", Arial, sans-serif !important;
  }
</style>
{% endif %}

Remarque

Si une partie du texte utilise encore la mauvaise police, inspectez le HTML exporté de votre message. Les e-mails par glisser-déposer encapsulent souvent le texte dans des éléments td et div qu’une liste de sélecteurs plus courte risque de manquer.