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 utilisation supplémentaire de HTML.

Composants de l'éditeur : Contenu et Lignes

Contenu	Lignes

Contenu

Le Contenu comprend une série de tuiles représentant différents types de contenu que vous pouvez utiliser dans votre message. Ceux-ci sont organisés en trois catégories : de base, médias et avancés.

• de base
• médias
• avancés

Lignes

Les Lignes sont des unités structurelles qui définissent la composition horizontale d’une section du message en utilisant des 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. De cette façon, vous pouvez ajouter tous les éléments structurels nécessaires à votre message, quel que soit le modèle que vous avez sélectionné au départ.

Imbriquer des images dans des blocs de texte

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

Style Cartes

Le Style Cartes est une propriété de ligne qui vous permet d’ajouter de l’espacement entre les colonnes et d’arrondir leurs coins. Avec le formatage en style carte, vous pouvez créer des mises en page plus visuellement attrayantes 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 Campaign ou un Canvas ? Les Campaigns sont plus adaptées aux campagnes de communication ciblées et ponctuelles, tandis que les Canvas sont plus adaptés 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 par glisser-déposer préconçu.
• 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.

Ensuite, sélectionnez 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é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 Aperçu 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 d’e-mail. 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 mise en page 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 une personnalisation plus poussée des couleurs d’arrière-plan, des images et des 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 dans l’éditeur principal. Cela crée 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’autres façons de personnaliser davantage 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 permettra de vérifier que votre contenu est responsive, et vous pourrez effectuer les ajustements nécessaires au fur et à mesure.

Étape 3 : Ajouter vos informations d’envoi

Une fois que vous avez terminé la conception et la création de votre e-mail, 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.

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 e-mail > Configuration d’envoi.

Ajouter des pièces jointes

Dans Paramètres d’envoi > Avancé, vous pouvez ajouter des pièces jointes à l’e-mail par les 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.

Consultez les Directives pour les e-mails pour les bonnes pratiques spécifiques à prendre en compte.

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

Sous Paramètres d’envoi, vous pouvez ajouter une 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 Aperçu et test. Ici, vous avez 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.

Aperçu et envoi test

Sous 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électionnera aléatoirement un utilisateur dans la base de données et prévisualisera l’e-mail en fonction de ses attributs ou informations d’événements.
• 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 des informations d’événements 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 saisir toutes les informations que vous souhaitez voir dans l’e-mail d’aperçu.

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 à quoi ressemblera 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 Campaigns d’e-mail du point de vue des clients de messagerie et des appareils mobiles. Pour tester votre e-mail à l’aide d’Inbox Vision, sélectionnez Inbox Vision dans la section Aperçu et test et 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 déconnexions entre les images, ou des clients tels que Windows Outlook peuvent ne pas afficher les images d’arrière-plan. L’utilisation d’Inbox Vision peut aider à identifier ces écarts entre les clients. Dans ce scénario, définissez une couleur d’arrière-plan de secours afin que ces images puissent s’afficher 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 Campaign 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 liés à la compression des fichiers HTML et au rendu.

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 de manière plus efficace.

• Migration d’une conception basée sur des éléments <div> vers un code standard formaté en <table aria-label="Utiliser Inbox Vision"> Utiliser Inbox Vision
• Les blocs éditeur (e-mail) 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 construisez vos e-mails par glisser-déposer, vous pouvez personnaliser davantage le corps de chaque 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 sur Largeur automatique. Pour ajuster ce paramètre, désactivez Largeur automatique et modifiez le pourcentage de largeur selon vos besoins.

Superposition de couleurs

Grâce à la superposition de couleurs, vous pouvez 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.

Espacement du contenu

Pour ajuster l’espacement, faites défiler jusqu’à Options de bloc et sélectionnez Plus d’options. Vous pouvez affiner votre espacement pour obtenir un e-mail au rendu parfait.

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 de design et de contenu visuel dans votre campagne d’e-mailing.

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.

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 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’images et les champs de type lien de bouton.

Images dynamiques

Vous pouvez choisir d’inclure des images dynamiques dans vos e-mails en intégrant 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 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.

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 dans les e-mails. Cela peut être particulièrement utile pour la personnalisation des messages, la segmentation et le style.

Un cas d’usage 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’usage courant consiste à signaler 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, y compris comment les clients de messagerie affichent le texte alternatif.

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. Le 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

Nom de la balise	Description	Exemple
base	Spécifie l’URL de base pour toutes les URL relatives dans le message.	<base href="https://example.com" target="_blank">
link	Définit les relations entre le message et les ressources externes.	<link href="styles.css" rel="stylesheet" type="text/css">
meta	Fournit des métadonnées telles que la description de la page ou les mots-clés.	<meta name="description" content="Free Web tutorials">
style	Intègre des styles CSS internes.	<style type="text/css" media="screen">body { font-size: 16px; }</style>
title	Définit le titre du document affiché dans les onglets du navigateur.	<title>StyleRyde</title>

Balise	Attribut	Description	Exemple
base	href	URL de base à utiliser pour les URL relatives.	<base href="https://braze.com">
base	target	Cible par défaut pour tous les hyperliens et formulaires.	<base target="_blank">
link	href	URL vers la ressource externe.	<link href="style.css">
link	rel	Définit les relations entre le message actuel et le message lié.	<link rel="stylesheet">
link	type	Type de la ressource liée.	<link type="text/css">
link	sizes	Spécifie les tailles des icônes.	<link rel="icon" sizes="32x32" href="favicon-32.png">
link	media	Spécifie le média ou l’appareil pour lequel les styles s’appliquent.	<link rel="stylesheet" media="screen" href="style.css">
meta	name	Définit le titre du document affiché dans les onglets du navigateur.	<meta name="viewport" content="width=device-width, initial-scale=1">
meta	content	Définit le titre du document affiché dans les onglets du navigateur.	<meta name="description" content="Page about our newest products">
meta	charset	Déclare l’encodage des caractères.	<meta charset="UTF-8">
meta	property	Définit le titre du document affiché dans les onglets du navigateur.	<meta property="og:title" content="Website title">
style	type	Type MIME du contenu de style.	<style type="text/css">p { color: red; }</style>
style	media	Spécifie le média ou l’appareil pour lequel les styles s’appliquent.	<style media="print">body { font-size: 12pt; }</style>
title	Aucun attribut	La balise title n’accepte aucun attribut.	<title>Kitchenerie</title>