Blocs de l’éditeur par glisser-déposer
Les blocs éditeur sont les tuiles que vous glissez dans les lignes et les colonnes de l’éditeur par glisser-déposer.
Sélectionnez l’éditeur que vous utilisez :
Blocs éditeur pour les e-mails
Les blocs éditeur se trouvent dans la section Contenu pour les e-mails. Glissez un bloc dans une colonne de l’éditeur par glisser-déposer ; il s’ajuste automatiquement à la largeur de la colonne.
Pour plus d’informations sur la création d’e-mails dans l’éditeur par glisser-déposer, consultez Créer un e-mail par glisser-déposer et Autres personnalisations dans cet article.

Vous pouvez également ajouter des attributs personnalisés à n’importe quelle URL dans les blocs éditeur Image, Button ou Text.
Titre
Ajoute du texte pour les en-têtes dans l’e-mail.
| Propriété | Description |
|---|---|
| Titre | Sélectionne le style de titre. |
| Famille de polices | Le style de police pour votre titre. |
| Graisse de police | La graisse globale de la police. |
| Taille de police | Détermine la taille de votre texte. |
| Couleur du texte | Modifie la couleur du titre. |
| Couleur du lien | Modifie la couleur du lien. |
| Alignement | Déplace le titre pour qu’il soit aligné à gauche, au centre ou à droite. |
| Hauteur de ligne | Modifie la distance entre les lignes de texte. |
| Espacement des lettres | Modifie la distance entre chaque caractère. |
| Direction du texte | Par défaut de gauche à droite, mais peut être modifié pour être de droite à gauche. |
Paragraphe
Insère du texte dans le message. Une barre d’outils aide à la mise en forme de la police et du texte.
| Propriété | Description |
|---|---|
| Famille de polices | Le style de police pour le texte de votre paragraphe. |
| Graisse de police | La graisse globale de la police. |
| Taille de police | Détermine la taille de votre texte. |
| Couleur du texte | Modifie la couleur du texte. |
| Couleur du lien | Modifie la couleur du lien. |
| Alignement | Déplace le texte pour qu’il soit aligné à gauche, au centre ou à droite. |
| Espacement des paragraphes | Modifie l’espace entre les paragraphes. |
| Hauteur de ligne | Modifie la distance entre les lignes de texte. |
| Espacement des lettres | Modifie la distance entre chaque caractère. |
| Direction du texte | Par défaut de gauche à droite, mais peut être modifié pour être de droite à gauche. |
Liste
Ajoute une liste à puces.
| Propriété | Description |
|---|---|
| Type de liste | Le type de liste. Peut être à puces ou numérotée. |
| Style de liste | Détermine le style de votre liste. |
| Commencer la liste à partir de | Détermine le numéro de départ de votre liste. |
| Famille de polices | Le style de police pour le texte de votre paragraphe. |
| Graisse de police | La graisse globale de la police. |
| Taille de police | Détermine la taille de votre texte. |
| Couleur du texte | Modifie la couleur du texte. |
| Couleur du lien | Modifie la couleur du lien. |
| Alignement | Déplace le texte pour qu’il soit aligné à gauche, au centre ou à droite. |
| Espacement des éléments de liste | Modifie l’espace entre les éléments de la liste. |
| Indentation des éléments de liste | Modifie l’indentation des éléments de la liste. |
| Hauteur de ligne | Modifie la distance entre les lignes de texte. |
| Espacement des lettres | Modifie la distance entre chaque caractère. |
| Direction du texte | Par défaut de gauche à droite, mais peut être modifié pour être de droite à gauche. |
Bouton
Ajoute un bouton standard. Les propriétés permettent de modifier le style et de définir le comportement du lien.
| Propriété | Description |
|---|---|
| Options du bouton | Définit diverses options du bouton, telles que la police, la taille, la largeur, la couleur et le remplissage. |
| Survol du bouton | Le style du bouton lorsqu’un utilisateur le survole avec une souris ou un pavé tactile. Inclut la couleur d’arrière-plan du bouton, la couleur de la police et les styles de bordure. |
Comportement au clic
| Propriété | Description |
|---|---|
| Type de lien | Détermine l’action lors du clic sur le bouton et définit le protocole approprié. |
| URL | Dynamique en fonction du type de lien Ouvrir une page web. |
| Destinataire, objet et corps | Pour le type de lien Envoyer un e-mail, définit l’adresse e-mail du destinataire, l’objet et le contenu qui seront pré-remplis dans un brouillon d’e-mail lorsque l’utilisateur sélectionne le bouton. |
| Tél | Pour les types de lien Passer un appel et Envoyer un SMS, définit le numéro de téléphone que l’utilisateur appellera ou auquel il enverra un SMS en sélectionnant le bouton. |
| Message | Pour le type de lien Envoyer un SMS, définit le contenu qui sera pré-rempli dans un brouillon de SMS lorsque l’utilisateur sélectionne le bouton. |
Séparateur
Insère une ligne continue, pointillée ou en tirets pour aider à l’espacement.
| Propriété | Description |
|---|---|
| Transparent | Si activé, les options de ligne et de largeur sont supprimées. |
| Ligne | Les différents formats de ligne, qu’ils soient pointillés, en tirets ou continus. Vous pouvez également modifier l’épaisseur et la couleur de la ligne de séparation. |
| Largeur | Ajuste l’étendue du séparateur par incréments de 5. |
| Alignement | Déplace la ligne pour qu’elle soit alignée à gauche, au centre ou à droite. |
Espacement
Ajoute de l’espace ou du remplissage entre les autres blocs.
| Propriété | Description |
|---|---|
| Hauteur | Ajuste la hauteur du bloc d’espacement. La valeur par défaut est 60 px. |
Image
Insère une image depuis la bibliothèque multimédia. Pour les images dynamiques (images avec Liquid ou contenu connecté), vous devez définir une image de secours pour utiliser les paramètres de largeur automatique. Pour les spécifications d’image, consultez les spécifications d’image pour les e-mails.

Si vous intégrez des images via le contenu connecté ou Liquid, assurez-vous que l’URL de votre image commence par https://. L’utilisation de http:// provoquera le plantage de votre application.
| Propriété | Description |
|---|---|
| Largeur automatique | Modifie la largeur de l’image en pixels. |
| Alignement | Définit l’alignement de l’image à gauche, au centre ou à droite dans le bloc. |
| Image avec Liquid | Utilise la logique Liquid pour définir dynamiquement différentes images dans le même bloc de contenu. |
| URL | Définit une image en utilisant l’adresse de son hébergement. |
| Texte alternatif | Une courte description de l’image qui fournit aux utilisateurs les mêmes informations que celles affichées dans l’image. Essentiel pour l’accessibilité des lecteurs d’écran ou lorsque l’image ne se charge pas. |
| Image avec coins arrondis | Affiche l’image avec des coins arrondis. Par défaut, les images sont affichées avec des coins carrés. |
| Action | Déclenche une action lorsque l’utilisateur clique sur l’image. |
| Options du bloc | Définit le remplissage autour du bloc d’image. |

Pour la largeur automatique, le redimensionnement automatique de l’image choisit la meilleure taille pour l’image en fonction d’une combinaison de la largeur de l’image et de l’espace disponible dans la mise en page :
- Les images plus larges que l’espace disponible sont définies à 100 % de largeur et conservent ce ratio sur mobile, utilisant toute la largeur d’affichage de l’appareil.
- Les images plus petites que l’espace disponible utilisent la taille naturelle de l’image pour éviter les effets de distorsion ou les images floues.
Comportement du bouton de téléchargement Gmail
Gmail ajoute automatiquement un bouton de téléchargement aux images qui n’ont pas de lien hypertexte (href) associé. Cependant, si le rapport hauteur/largeur de l’image est de 299 x 524 px ou moins, Gmail n’affichera pas le bouton de téléchargement.
Pour empêcher le bouton de téléchargement d’apparaître sur les images plus grandes, vous pouvez appliquer la solution de contournement avec le lien « # » :
- Sélectionnez le bloc Image.
- Dans le panneau Options du bloc, accédez à la section Lien.
- Définissez le Type de lien sur Ouvrir une page web.
- Saisissez un signe dièse (
#) dans le champ de saisie URL.
L’ajout de ce lien empêche Gmail d’afficher le bouton de téléchargement sans affecter l’expérience utilisateur.
Vidéo
Crée un lien vers du contenu vidéo. Seuls YouTube et Vimeo sont pris en charge.
| Propriété | Description |
|---|---|
| URL | L’URL de la vidéo. |
| Titre | Généré automatiquement à partir des métadonnées de la vidéo ou peut être personnalisé. |
| Style de l’icône de lecture | Inclut différentes options pour le bouton de lecture situé en haut d’une image vidéo. |
| Couleur de l’icône de lecture | Option pour sélectionner Clair ou Foncé pour le bouton de lecture. |
| Taille de l’icône de lecture | Choisissez la taille en pixels du bouton de lecture. Plage prédéfinie de 50 px à 80 px (par incréments de 5 px). |

Les vidéos hébergées par Vimeo ne fonctionnent que si elles sont définies comme publiques. Tous les autres paramètres de sécurité disponibles dans Vimeo (par exemple, « Masquer de Vimeo.com ») génèrent un format de lien différent qui n’est pas pris en charge par ce Content Block. Ces types de liens sont modifiés par le générateur, ce qui empêche Braze de générer une miniature.
Réseaux sociaux
Insère des icônes de plateformes de réseaux sociaux. Vous pouvez télécharger des images personnalisées pour des icônes spécifiques à votre marque.
| Propriété | Description |
|---|---|
| Sélectionner la collection d’icônes | Définit le style de votre collection d’icônes. |
| Configurer la collection d’icônes | Définit l’URL pour chaque icône de réseau social. Inclut le bouton bascule Plus d’options pour modifier le titre et le texte alternatif. |
| Alignement | Déplace l’icône de réseau social pour qu’elle soit alignée à gauche, au centre ou à droite. |
| Espacement des icônes | Détermine l’espacement entre chaque icône de réseau social. |
Icônes
Insère une icône. Vous pouvez télécharger des images personnalisées. Braze utilise une icône de marque substitutive surdimensionnée jusqu’à ce que vous téléchargiez une image.
| Propriété | Description |
|---|---|
| Famille de polices | Le style de police pour le texte de votre paragraphe. |
| Graisse de police | La graisse globale de la police. |
| Taille de police | Détermine la taille de votre texte. |
| Couleur du texte | Modifie la couleur du titre. |
| Couleur du lien | Modifie la couleur du lien. |
| Alignement | Déplace l’icône pour qu’elle soit alignée à gauche, au centre ou à droite. |
| Espacement des lettres | Modifie la distance entre chaque caractère. |
| Taille de l’icône | Détermine la taille de votre icône. |
| Espacement de l’icône | Modifie l’espacement de l’icône. |
| Remplissage de l’icône | Modifie le remplissage de l’icône. |
HTML
Insère du HTML brut. Recommandé pour Liquid, comme le contenu connecté ou les instructions conditionnelles.
| Propriété | Description |
|---|---|
| HTML | Ajoutez ou modifiez du HTML brut, y compris Liquid pour la personnalisation ou la logique conditionnelle. |
Menu
Crée un menu flexible pour le message que vous concevez.
| Propriété | Description |
|---|---|
| Configurer les éléments du menu | Ajouter un élément de menu. |
| Famille de polices | Le style de police pour le menu. |
| Taille de police | La taille de votre menu. |
| Couleur du texte | Modifie la couleur du menu. |
| Couleur du lien | Modifie la couleur du texte du menu. |
| Alignement | Déplace le menu pour qu’il soit aligné à gauche, au centre ou à droite. |
| Espacement des lettres | Modifie la distance entre chaque caractère. |
| Disposition | Détermine si la disposition est horizontale ou verticale. |
| Séparateur | Ajoute un ou plusieurs caractères entre les options du menu. |
| Menu mobile | Inclut des options pour modifier la taille de l’icône, la couleur et le type d’icône lorsqu’il est affiché sur un appareil mobile. |
| Remplissage des éléments | Modifie le remplissage en utilisant les boutons + ou -, ou en saisissant un nombre spécifique. |
| Tous les côtés | Définit un remplissage uniforme si le remplissage des éléments est désactivé. |
Produit
Affiche des lignes de produits à partir d’un catalogue de produits, soit sous forme d’éléments statiques à partir d’une sélection de catalogue (jusqu’à 12), soit sous forme de produits dynamiques pilotés par un déclencheur eCommerce Canvas (jusqu’à 24).
| Propriété | Description |
|---|---|
| Type de contenu | Définit si les produits proviennent d’une sélection de catalogue fixe (Statique, jusqu’à 12 produits) ou d’un déclencheur de recommandation eCommerce Canvas (Dynamique, jusqu’à 24 produits). Dynamique n’est disponible que dans les étapes de message Canvas. |
| Catalogue | Sélectionne le catalogue de produits qui fournit les données et les mappages de champs des produits. |
| Sélection | (Statique uniquement) Sélectionne l’ensemble filtré du catalogue qui définit les produits affichés. |
| Afficher les détails de la source | Active le texte d’aide affichant le catalogue sous-jacent ou le champ d’événement mappé à chaque champ de produit. |
| Image de la variante | Affiche ou masque l’image de la variante pour chaque tuile de produit. |
| Titre du produit | Affiche ou masque le titre du produit pour chaque tuile. |
| Prix | Affiche ou masque le prix du produit. |
| Bouton pour l’URL du produit | Affiche ou masque un bouton d’appel à l’action renvoyant vers l’URL du produit. |
| Quantité | (Dynamique, Canvas uniquement, lorsque le déclencheur d’entrée n’est pas un événement de consultation de produit) Affiche ou masque la quantité du produit provenant de l’événement déclencheur. |
| Orientation du produit | Définit la position de l’image dans chaque tuile : Image à gauche, Image au centre ou Image à droite. |
| Alignement | Définit l’alignement horizontal du contenu dans chaque tuile. |
| Nombre max. de produits par ligne | Définit le nombre de produits affichés par ligne : 1, 2 ou 3 (3 n’est disponible que lorsque l’orientation est Image au centre). |
| Espacement des produits | Définit l’espacement entre les produits : Auto ou Personnalisé. |
| Espacement personnalisé | (Lorsque Personnalisé est sélectionné) Définit l’écart en pixels entre les produits. |
Personnalisation
Vous pouvez ajouter de la personnalisation à votre e-mail en utilisant Liquid ou le contenu connecté.
- Liquid : Sous Contenu > Personnalisation, sélectionnez un attribut, copiez l’extrait de code et collez-le dans un bloc HTML. Bien que les extraits Liquid de base puissent fonctionner dans les blocs Titre, Paragraphe et Liste, placer du Liquid dans ces blocs peut provoquer un comportement inattendu et des problèmes de mise en page. Pour éviter les problèmes, utilisez les blocs HTML pour toute logique Liquid. Notez que Liquid n’est pas pris en charge dans les blocs d’image ni dans les champs d’URL des boutons.
- Contenu connecté : Ajoutez un bloc HTML et placez-y votre appel
{% connected_content %}.
Blocs éditeur pour les pages de destination
Les blocs éditeur pour les pages de destination se trouvent dans la section Créer de l’éditeur par glisser-déposer, sous Lignes et les catégories de blocs. Glissez un bloc dans une colonne de ligne ; il s’ajuste automatiquement à la largeur de la colonne. Sélectionnez un bloc pour modifier ses paramètres dans le panneau de propriétés latéral droit.
Pour plus d’informations sur la création et la publication de pages de destination, consultez Créer des pages de destination.
Titre et paragraphe
Ajoute du texte de titre ou de corps. Utile pour structurer les sections et améliorer la lisibilité.
| Propriété | Description |
|---|---|
| Famille de polices | Le style de police du texte. |
| Graisse de police | Détermine l’épaisseur du texte. |
| Taille de police | Détermine la taille du texte. |
| Hauteur de ligne | Modifie la distance entre les lignes de texte. |
| Espacement des lettres | Modifie la distance entre chaque caractère. |
| Alignement du texte | Permet d’aligner le texte à gauche, au centre, à droite ou en justifié. |
| Couleur du texte | Modifie la couleur du texte. |
Bouton
Ajoute un élément cliquable pour des actions telles que l’ouverture d’un lien ou la soumission d’un formulaire.
| Propriété | Description |
|---|---|
| Largeur du bouton | Modifie la largeur du bouton de manière automatique ou manuelle. |
| Famille de polices | Le style de police du texte. |
| Graisse de la police | Détermine l’épaisseur du texte. |
| Taille de la police | Détermine la taille du texte. |
| Espacement des lettres | Modifie la distance entre chaque caractère. |
| Alignement du bouton | Déplace le bouton pour l’orienter à gauche, au centre ou à droite. |
| Couleur du texte du bouton | Modifie la couleur du texte sur le bouton. |
| Couleur d’arrière-plan | Modifie la couleur de l’arrière-plan du bouton. |
| Style de bordure | Détermine le style de la bordure du bouton. |
| Rayon de bordure | Détermine l’arrondi des coins. |
Comportement au clic
| Action | Description |
|---|---|
| Envoyer le formulaire lorsque le bouton est cliqué | Envoie le formulaire et exécute le comportement au clic sélectionné. Désactivez cette option pour exécuter uniquement le comportement au clic. |
| Définir des comportements distincts pour chaque plateforme | Personnalise le comportement du bouton pour chaque plateforme séparément. |
| Comportement au clic | Détermine l’action lorsque l’utilisateur clique sur le bouton, comme fermer le message, ouvrir une URL web, créer un lien profond vers une page spécifique de l’application, accéder à une autre page ou demander l’autorisation push. |
| Enregistrer des attributs personnalisés ou des événements | Détermine si le clic sur le bouton met à jour le profil de l’utilisateur avec des données personnalisées. Vous pouvez également sélectionner l’identifiant pour le reporting. |

Si vous configurez un bouton avec Soumettre le formulaire lorsque le bouton est cliqué et ouvrez une URL web dans un nouvel onglet, iOS Safari peut bloquer la navigation. Ouvrez l’URL post-soumission dans le même onglet lors de la soumission de formulaires. Pour plus d’informations, consultez Créer des pages de destination.
Bouton radio
Ajoute une liste d’options parmi lesquelles les utilisateurs peuvent en sélectionner une. Utilisez le panneau de propriétés pour configurer les options disponibles et l’attribut personnalisé qui reçoit la valeur sélectionnée. Le profil utilisateur enregistre la valeur sélectionnée en tant qu’attribut personnalisé de type chaîne de caractères lors de la soumission du formulaire. Les attributs personnalisés avec d’autres types de données ne sont pas enregistrés dans le profil utilisateur.
| Propriété | Description |
|---|---|
| Nom de l’attribut personnalisé | Sélectionne l’attribut personnalisé utilisateur qui stocke l’option sélectionnée par l’utilisateur lorsque le formulaire est envoyé. |
| Nombre total de choix | La liste des options ; chaque option possède un texte de libellé (ce que les utilisateurs voient) et une valeur d’attribut (ce qui est stocké). Vous pouvez ajouter jusqu’à 15 choix, avec un minimum de 2. |
| Famille de polices | Police de caractères pour le texte du groupe de boutons radio. |
| Graisse de la police | Épaisseur (comme légère, normale ou grasse) du texte. |
| Taille de la police | Taille du texte. |
| Hauteur de ligne | Espacement vertical entre les lignes de texte. |
| Couleur du texte | Couleur du texte du libellé de l’option. |
| Espacement des lettres | Espacement horizontal entre les caractères. |
| Alignement | Alignement horizontal des choix dans le bloc. |
| Couleur d’accentuation | Couleur utilisée pour les contrôles des boutons radio (comme l’indicateur de l’état sélectionné). |
| Marge intérieure | Espacement autour du bloc. |
Image
Affiche une image à partir d’un téléchargement ou d’une URL externe.

Si vous intégrez des images via le contenu connecté ou Liquid, assurez-vous que l’URL de votre image commence par https://. L’utilisation de http:// provoquera le plantage de votre application.
| Propriété | Description |
|---|---|
| URL | L’adresse hébergée de l’image. |
| Alignement | Déplace l’image pour qu’elle soit orientée à gauche, au centre ou à droite. |
| Couleur d’arrière-plan | Modifie la couleur de l’arrière-plan de l’image. |
| Style de bordure | Détermine le style de la bordure de l’image. |
| Rayon de bordure | Détermine l’arrondi des coins de l’image. |
Comportement au clic
| Action | Description |
|---|---|
| Texte alternatif | Le texte qui s’affiche à la place d’une image si celle-ci ne se charge pas. Les lecteurs d’écran lisent le texte alternatif pour décrire les images : utilisez donc un langage simple pour fournir les informations clés sur une image. |
| Envoyer le formulaire lorsque l’image est cliquée | Envoie le formulaire et exécute le comportement au clic sélectionné. Désactivez cette option pour exécuter uniquement le comportement au clic. |
| Définir des comportements distincts pour chaque plateforme | Personnalise le comportement de l’image pour chaque plateforme séparément. |
| Comportement au clic | Détermine l’action lorsque l’utilisateur clique sur l’image, comme fermer le message, ouvrir une URL web, créer un lien profond vers une page spécifique de l’application, accéder à une autre page ou demander l’autorisation push. |
| Enregistrer des attributs personnalisés ou des événements | Détermine si le clic sur l’image met à jour le profil de l’utilisateur avec des données personnalisées. Vous pouvez également sélectionner l’identifiant pour le reporting. |
Lien
Ajoute un lien hypertexte que les utilisateurs peuvent sélectionner pour accéder à une URL. Peut être intégré dans du texte ou autonome.
| Propriété | Description |
|---|---|
| Famille de polices | Le style de police du texte. |
| Graisse de police | Détermine l’épaisseur du texte. |
| Espacement des lettres | Modifie la distance entre chaque caractère. |
| Couleur du texte | Modifie la couleur du texte. |
Comportement au clic
| Action | Description |
|---|---|
| URL | Le lien hypertexte vers lequel naviguer. |
| Identifiant pour le rapport | Détermine l’identifiant utilisé pour le rapport. |
Espacement
Ajoute un espacement vertical entre les éléments.
| Propriété | Description |
|---|---|
| Couleur d’arrière-plan | Modifie la couleur d’arrière-plan de l’espaceur. |
| Hauteur | Modifie la hauteur de l’espaceur. Vous pouvez également modifier cette valeur à l’aide des poignées de redimensionnement sur l’espaceur. |
Code personnalisé
Insère du HTML, CSS ou JavaScript personnalisé pour une personnalisation avancée, comme Google Tag Manager.
| Propriété | Description |
|---|---|
| Code personnalisé | Vous permet d’ajouter, de modifier ou de supprimer du HTML, du CSS et du JavaScript. |
Capture d’e-mail
Ajoute un champ de formulaire pour les adresses e-mail. Lors de la soumission, l’adresse est enregistrée dans le profil Braze de l’utilisateur.
| Propriété | Description |
|---|---|
| Famille de polices | Le style de police du texte. |
| Graisse de police | Détermine l’épaisseur du texte. |
| Taille de police | Détermine la taille du texte. |
| Hauteur de ligne | Modifie la distance entre les lignes de texte. |
| Couleur du texte | Modifie la couleur du texte. |
| Espacement des lettres | Modifie la distance entre chaque caractère. |
| Alignement du texte | Déplace le texte pour l’aligner à gauche, au centre, à droite ou en justifié. |
| Texte de la marque substitutive | Une adresse e-mail de marque substitutive à afficher. |
Capture de téléphone
Ajoute un champ de formulaire pour les numéros de téléphone. Lors de la soumission, l’utilisateur est abonné au groupe d’abonnement SMS ou WhatsApp que vous avez sélectionné.
| Propriété | Description |
|---|---|
| Groupe d’abonnement | Le groupe d’abonnement SMS ou WhatsApp auquel l’utilisateur s’abonne lors de l’envoi. Inclut une option pour collecter les numéros de téléphone de tous les pays. |
| Alignement du texte | Permet d’aligner le texte à gauche, au centre, à droite ou en mode justifié. |
| Texte de la marque substitutive | Un numéro de téléphone de marque substitutive à afficher. |
Champ de saisie
Ajoute un champ de formulaire pour les attributs standard (par exemple, le prénom ou le nom) ou une chaîne d’attribut personnalisé.
| Propriété | Description |
|---|---|
| Champ de saisie requis | Indique si le champ doit être rempli avant que le formulaire puisse être envoyé. |
| Nombre maximum de caractères | Limite le nombre de caractères qu’un utilisateur peut saisir (les attributs personnalisés de type chaîne de caractères sont plafonnés à 255). |
| Texte de marque substitutive | Texte affiché dans le champ de saisie tant que l’utilisateur n’a pas commencé à écrire. |
| Attribut | Enregistre la valeur envoyée en tant que Prénom, Nom ou Attribut personnalisé sur le profil utilisateur. |
| Nom de l’attribut personnalisé | Sélectionne l’attribut personnalisé de type chaîne de caractères qui reçoit la valeur envoyée (disponible lorsque Attribut est défini sur Attribut personnalisé). |
| Famille de polices | Police de caractères utilisée pour le texte saisi. |
| Graisse de la police | Épaisseur (par exemple légère, normale ou grasse) du texte saisi. |
| Taille de la police | Taille du texte saisi. |
| Hauteur de ligne | Espacement vertical entre les lignes de texte. |
| Espacement des lettres | Espacement horizontal entre les caractères. |
| Couleur | Couleur du texte saisi dans le champ. |
| Alignement du texte | Alignement horizontal du texte saisi dans le champ. |
| Marge intérieure | Espacement autour du bloc. |
Liste déroulante
Une liste prédéfinie d’éléments ; les utilisateurs en choisissent un. Vous pouvez mapper les valeurs à des chaînes d’attribut personnalisé.
| Propriété | Description |
|---|---|
| Champ de saisie requis | Indique si l’utilisateur doit sélectionner une option avant de pouvoir envoyer le formulaire. |
| Texte de la marque substitutive | Texte affiché dans le menu déroulant jusqu’à ce qu’un utilisateur sélectionne une option. |
| Nom de l’attribut personnalisé | Sélectionne l’attribut personnalisé de l’utilisateur qui reçoit la valeur sélectionnée. |
| Total des options | La liste des options ; chaque option possède un libellé d’option (ce que les utilisateurs voient) et une valeur d’attribut (ce qui est enregistré). |
| Famille de polices | Police de caractères pour le texte du menu déroulant. |
| Graisse de la police | Épaisseur (par exemple light, normal ou bold) du texte. |
| Taille de la police | Taille du texte. |
| Hauteur de ligne | Espacement vertical entre les lignes. |
| Couleur du texte | Couleur du texte du menu déroulant. |
| Espacement des lettres | Espacement horizontal entre les caractères. |
| Alignement | Alignement horizontal du menu déroulant (gauche ou centre). |
| Marge intérieure | Espacement autour du bloc. |
Case à cocher
Lorsqu’elle est cochée, définit l’attribut personnalisé booléen du bloc sur true ; lorsqu’elle n’est pas cochée, sur false.
| Propriété | Description |
|---|---|
| Champ de saisie requis | Indique si la case doit être cochée avant que le formulaire puisse être envoyé. |
| Nom de l’attribut personnalisé | Sélectionne quel attribut personnalisé booléen reçoit true lorsque la case est cochée ou false lorsqu’elle ne l’est pas. |
| Couleur d’accentuation | Couleur utilisée pour le style du contrôle de la case à cocher. |
| Marge intérieure | Espacement autour du bloc. |
Groupe de cases à cocher
Les utilisateurs choisissent plusieurs options ; les valeurs sont définies ou ajoutées à un attribut personnalisé de type tableau défini.
| Propriété | Description |
|---|---|
| Champ de saisie requis | Indique si l’utilisateur doit sélectionner au moins le nombre minimum d’options avant d’envoyer. |
| Choix minimum | Nombre minimum d’options qu’un utilisateur doit sélectionner (lorsque le champ est requis). |
| Choix maximum | Nombre maximum d’options qu’un utilisateur peut sélectionner. |
| Nom de l’attribut personnalisé | Sélectionne l’attribut personnalisé de type tableau dans lequel les valeurs sélectionnées sont écrites. |
| Action | Définit si l’envoi Sets items (remplace le tableau) ou Adds items (ajoute au tableau). |
| Total des choix | La liste des options ; chaque option possède un Label text (ce que les utilisateurs voient) et une Attribute value (ce qui est stocké). |
| Famille de polices | Police de caractères pour les libellés des options. |
| Graisse de la police | Épaisseur (comme légère, normale ou grasse) du texte des libellés des options. |
| Taille de la police | Taille du texte des libellés des options. |
| Hauteur de ligne | Espacement vertical entre les lignes de texte. |
| Couleur du texte | Couleur du texte des libellés des options. |
| Espacement des lettres | Espacement horizontal entre les caractères. |
| Alignement | Alignement horizontal du groupe (début ou centre). |
| Couleur d’accentuation | Couleur des cases à cocher. |
| Marge intérieure | Espacement autour du bloc. |
Texte long
Champ de texte multiligne pour les flux de type enquête. Si vous ne voyez pas ce bloc, contactez le support Braze ou votre gestionnaire du succès des clients Braze. Ce bloc n’est pas disponible pour les pages de destination standard.
| Propriété | Description |
|---|---|
| Champ de saisie requis | Indique si le champ doit être rempli avant que le formulaire puisse être envoyé. |
| Nombre minimum de caractères | Le nombre minimum de caractères qu’un utilisateur doit saisir. |
| Nombre maximum de caractères | Le nombre maximum de caractères qu’un utilisateur peut saisir. |
| Masquer le compteur de caractères | Masque ou affiche le compteur de caractères en direct pour la zone de texte. |
| Texte de la marque substitutive | Texte affiché à l’intérieur de la zone de texte vide jusqu’à ce que l’utilisateur commence à saisir. |
| Hauteur (lignes de texte) | Contrôle la hauteur de la zone de texte, mesurée en lignes. |
| Famille de polices | Police utilisée pour le texte de la zone de texte. |
| Graisse de la police | Épaisseur (comme légère, normale ou grasse) du texte. |
| Taille de la police | Taille du texte. |
| Hauteur de ligne | Espacement vertical entre les lignes de texte. |
| Couleur du texte | Couleur du texte. |
| Espacement des lettres | Espacement horizontal entre les caractères. |
Bon à savoir
- Vidéo : Le compositeur standard n’inclut pas de bloc vidéo dédié. Utilisez le code personnalisé pour intégrer un lecteur si nécessaire. Pour plus d’informations, consultez Pages de destination.
Blocs éditeur pour les bannières
Dans le compositeur de bannières, glissez des lignes et des blocs depuis la section Créer dans le canevas pour disposer votre message. Sélectionnez Styles pour ajuster le style au niveau de la page, ou sélectionnez un bloc ou une ligne pour modifier ses propriétés dans le panneau latéral.
Pour le flux complet de création de bannières, consultez Créer une bannière.
Le compositeur de bannières offre les mêmes types de blocs de mise en page que les autres surfaces par glisser-déposer, mais pas l’ensemble complet de blocs de formulaire (par exemple, pas de bouton radio, de texte court, de liste déroulante ni de case à cocher). Vous pouvez ajouter des blocs Capture de téléphone et Capture d’e-mail ; un seul bloc de capture de téléphone et un seul bloc de capture d’e-mail sont autorisés par message.
Titre et paragraphe
Ajoute du texte de titre ou de corps avec des options de texte enrichi.
| Propriété | Description |
|---|---|
| Famille de polices | Le style de police du texte. |
| Graisse de police | Détermine l’épaisseur du texte. |
| Taille de police | Détermine la taille du texte. |
| Hauteur de ligne | Modifie la distance entre les lignes de texte. |
| Espacement des lettres | Modifie la distance entre chaque caractère. |
| Alignement du texte | Permet d’aligner le texte à gauche, au centre, à droite ou en justifié. |
| Couleur du texte | Modifie la couleur du texte. |
Bouton
Ajoute un bouton cliquable. Vous pouvez définir les liens et les options d’analyse dans le panneau de propriétés.
| Propriété | Description |
|---|---|
| Largeur du bouton | Modifie la largeur du bouton de manière automatique ou manuelle. |
| Famille de polices | Le style de police du texte. |
| Graisse de la police | Détermine l’épaisseur du texte. |
| Taille de la police | Détermine la taille du texte. |
| Espacement des lettres | Modifie la distance entre chaque caractère. |
| Alignement du bouton | Déplace le bouton pour l’orienter à gauche, au centre ou à droite. |
| Couleur du texte du bouton | Modifie la couleur du texte sur le bouton. |
| Couleur d’arrière-plan | Modifie la couleur de l’arrière-plan du bouton. |
| Style de bordure | Détermine le style de la bordure du bouton. |
| Rayon de bordure | Détermine l’arrondi des coins. |
Comportement au clic
| Action | Description |
|---|---|
| Envoyer le formulaire lorsque le bouton est cliqué | Envoie le formulaire et exécute le comportement au clic sélectionné. Désactivez cette option pour exécuter uniquement le comportement au clic. |
| Définir des comportements distincts pour chaque plateforme | Personnalise le comportement du bouton pour chaque plateforme séparément. |
| Comportement au clic | Détermine l’action lorsque l’utilisateur clique sur le bouton, comme fermer le message, ouvrir une URL web, créer un lien profond vers une page spécifique de l’application, accéder à une autre page ou demander l’autorisation push. |
| Enregistrer des attributs personnalisés ou des événements | Détermine si le clic sur le bouton met à jour le profil de l’utilisateur avec des données personnalisées. Vous pouvez également sélectionner l’identifiant pour le reporting. |
Pour plus d’informations, consultez Définir le comportement au clic dans l’article sur les bannières.
Image
Affiche une image à partir d’une URL hébergée. Configurez les options d’affichage dans le panneau de propriétés.

Si vous intégrez des images via le contenu connecté ou Liquid, assurez-vous que l’URL de votre image commence par https://. L’utilisation de http:// provoquera le plantage de votre application.
| Propriété | Description |
|---|---|
| URL | L’adresse hébergée de l’image. |
| Alignement | Déplace l’image pour qu’elle soit orientée à gauche, au centre ou à droite. |
| Couleur d’arrière-plan | Modifie la couleur de l’arrière-plan de l’image. |
| Style de bordure | Détermine le style de la bordure de l’image. |
| Rayon de bordure | Détermine l’arrondi des coins de l’image. |
Comportement au clic
| Action | Description |
|---|---|
| Texte alternatif | Le texte qui s’affiche à la place d’une image si celle-ci ne se charge pas. Les lecteurs d’écran lisent le texte alternatif pour décrire les images : utilisez donc un langage simple pour fournir les informations clés sur une image. |
| Envoyer le formulaire lorsque l’image est cliquée | Envoie le formulaire et exécute le comportement au clic sélectionné. Désactivez cette option pour exécuter uniquement le comportement au clic. |
| Définir des comportements distincts pour chaque plateforme | Personnalise le comportement de l’image pour chaque plateforme séparément. |
| Comportement au clic | Détermine l’action lorsque l’utilisateur clique sur l’image, comme fermer le message, ouvrir une URL web, créer un lien profond vers une page spécifique de l’application, accéder à une autre page ou demander l’autorisation push. |
| Enregistrer des attributs personnalisés ou des événements | Détermine si le clic sur l’image met à jour le profil de l’utilisateur avec des données personnalisées. Vous pouvez également sélectionner l’identifiant pour le reporting. |
Lien
Insère un lien hypertexte que les utilisateurs peuvent sélectionner.
| Propriété | Description |
|---|---|
| Famille de polices | Le style de police du texte. |
| Graisse de police | Détermine l’épaisseur du texte. |
| Espacement des lettres | Modifie la distance entre chaque caractère. |
| Couleur du texte | Modifie la couleur du texte. |
Comportement au clic
| Action | Description |
|---|---|
| URL | Le lien hypertexte vers lequel naviguer. |
| Identifiant pour le rapport | Détermine l’identifiant utilisé pour le rapport. |
Espacement
Ajoute un espacement vertical entre les blocs.
| Propriété | Description |
|---|---|
| Couleur d’arrière-plan | Modifie la couleur d’arrière-plan de l’espaceur. |
| Hauteur | Modifie la hauteur de l’espaceur. Vous pouvez également modifier cette valeur à l’aide des poignées de redimensionnement sur l’espaceur. |
Code personnalisé
Insère du HTML personnalisé pour des mises en page avancées ou du contenu intégré (par exemple, une vidéo). Les clics à l’intérieur du HTML personnalisé ne sont pas suivis sauf si vous appelez brazeBridge.logClick() — consultez Code personnalisé et pont JavaScript pour les bannières.
| Propriété | Description |
|---|---|
| Code personnalisé | Ajoutez ou modifiez du HTML (et les ressources associées) pour la bannière. |
Capture de téléphone
Collecte un numéro de téléphone. Lors de la soumission, l’utilisateur est abonné au groupe d’abonnement SMS ou WhatsApp que vous avez sélectionné. Un seul par bannière.
| Propriété | Description |
|---|---|
| Groupe d’abonnement | Le groupe d’abonnement SMS ou WhatsApp auquel l’utilisateur s’abonne lors de l’envoi. Inclut une option pour collecter les numéros de téléphone de tous les pays. |
| Alignement du texte | Permet d’aligner le texte à gauche, au centre, à droite ou en mode justifié. |
| Texte de la marque substitutive | Un numéro de téléphone de marque substitutive à afficher. |
Capture d’e-mail
Collecte une adresse e-mail et l’ajoute au profil Braze de l’utilisateur lors de la soumission. Un seul par bannière.
| Propriété | Description |
|---|---|
| Famille de polices | Le style de police du texte. |
| Graisse de police | Détermine l’épaisseur du texte. |
| Taille de police | Détermine la taille du texte. |
| Hauteur de ligne | Modifie la distance entre les lignes de texte. |
| Couleur du texte | Modifie la couleur du texte. |
| Espacement des lettres | Modifie la distance entre chaque caractère. |
| Alignement du texte | Déplace le texte pour l’aligner à gauche, au centre, à droite ou en justifié. |
| Texte de la marque substitutive | Une adresse e-mail de marque substitutive à afficher. |
Texte long
Champ de texte multiligne pour les flux de type enquête. Si vous ne voyez pas ce bloc, contactez le support Braze ou votre gestionnaire du succès des clients Braze.
| Propriété | Description |
|---|---|
| Champ de saisie requis | Indique si le champ doit être rempli avant que le formulaire puisse être envoyé. |
| Nombre minimum de caractères | Le nombre minimum de caractères qu’un utilisateur doit saisir. |
| Nombre maximum de caractères | Le nombre maximum de caractères qu’un utilisateur peut saisir. |
| Masquer le compteur de caractères | Masque ou affiche le compteur de caractères en direct pour la zone de texte. |
| Texte de la marque substitutive | Texte affiché à l’intérieur de la zone de texte vide jusqu’à ce que l’utilisateur commence à saisir. |
| Hauteur (lignes de texte) | Contrôle la hauteur de la zone de texte, mesurée en lignes. |
| Famille de polices | Police utilisée pour le texte de la zone de texte. |
| Graisse de la police | Épaisseur (comme légère, normale ou grasse) du texte. |
| Taille de la police | Taille du texte. |
| Hauteur de ligne | Espacement vertical entre les lignes de texte. |
| Couleur du texte | Couleur du texte. |
| Espacement des lettres | Espacement horizontal entre les caractères. |
Bon à savoir
- Vidéo : Le compositeur standard n’inclut pas de bloc vidéo dédié. Utilisez le code personnalisé pour intégrer un lecteur si nécessaire. Pour plus d’informations, consultez Bannières : questions fréquentes.
- Liquid : La plupart du Liquid est pris en charge ; il existe des exceptions telles que les balises de re-rendu de catalogue. Pour plus d’informations, consultez Bannières : questions fréquentes.
Blocs éditeur pour le centre de préférences
Glissez des blocs depuis la section Créer dans une ligne de l’éditeur par glisser-déposer du centre de préférences. Chaque bloc a ses propres paramètres ; le panneau latéral droit bascule vers les propriétés ou le style de l’élément sélectionné.
Avant de modifier les blocs, ajoutez des groupes d’abonnement et configurez le bloc intelligent d’abonnement (voir la section suivante). Pour le flux de configuration complet, consultez Créer un centre de préférences e-mail par glisser-déposer.
Titre et paragraphe
Ajoute du texte de titre ou de corps avec des options de texte enrichi.
| Propriété | Description |
|---|---|
| Famille de polices | Le style de police du texte. |
| Graisse de police | Détermine l’épaisseur du texte. |
| Taille de police | Détermine la taille du texte. |
| Hauteur de ligne | Modifie la distance entre les lignes de texte. |
| Espacement des lettres | Modifie la distance entre chaque caractère. |
| Alignement du texte | Permet d’aligner le texte à gauche, au centre, à droite ou en justifié. |
| Couleur du texte | Modifie la couleur du texte. |
Bouton
Ajoute un bouton cliquable (par exemple Enregistrer ou navigation).
| Propriété | Description |
|---|---|
| Largeur du bouton | Modifie la largeur du bouton de manière automatique ou manuelle. |
| Famille de polices | Le style de police du texte. |
| Graisse de la police | Détermine l’épaisseur du texte. |
| Taille de la police | Détermine la taille du texte. |
| Espacement des lettres | Modifie la distance entre chaque caractère. |
| Alignement du bouton | Déplace le bouton pour l’orienter à gauche, au centre ou à droite. |
| Couleur du texte du bouton | Modifie la couleur du texte sur le bouton. |
| Couleur d’arrière-plan | Modifie la couleur de l’arrière-plan du bouton. |
| Style de bordure | Détermine le style de la bordure du bouton. |
| Rayon de bordure | Détermine l’arrondi des coins. |
Image
Affiche une image depuis la bibliothèque multimédia ou une URL.

Si vous intégrez des images via le contenu connecté ou Liquid, assurez-vous que l’URL de votre image commence par https://. L’utilisation de http:// provoquera le plantage de votre application.
| Propriété | Description |
|---|---|
| URL | L’adresse hébergée de l’image. |
| Alignement | Déplace l’image pour qu’elle soit orientée à gauche, au centre ou à droite. |
| Couleur d’arrière-plan | Modifie la couleur de l’arrière-plan de l’image. |
| Style de bordure | Détermine le style de la bordure de l’image. |
| Rayon de bordure | Détermine l’arrondi des coins de l’image. |
Espacement
Ajoute un espacement vertical entre les blocs.
| Propriété | Description |
|---|---|
| Couleur d’arrière-plan | Modifie la couleur d’arrière-plan de l’espaceur. |
| Hauteur | Modifie la hauteur de l’espaceur. Vous pouvez également modifier cette valeur à l’aide des poignées de redimensionnement sur l’espaceur. |
Groupes d’abonnement (bloc intelligent)
Ajoute un bloc modèle qui liste les groupes d’abonnement, des contrôles optionnels S’abonner à tous / Se désabonner de tous, et des descriptions. Configurez-le après avoir ajouté des groupes dans le flux du centre de préférences.
Après avoir ajouté des groupes d’abonnement, sélectionnez le bloc intelligent dans le canevas pour :
- Réorganiser les groupes d’abonnement
- Ajouter ou supprimer des groupes
- Ajouter ou supprimer des descriptions
- Activer ou désactiver S’abonner à tous et Se désabonner de tous pour les groupes de ce bloc
Le contrôle Se désabonner de tous en bas du modèle par défaut est obligatoire et effectue un désabonnement global des e-mails.
Bon à savoir
- Styles communs : Vous pouvez définir des valeurs par défaut à l’échelle de la page sous Styles communs avant d’ajuster les blocs individuels. Pour plus d’informations, consultez Personnaliser le centre de préférences à l’aide de l’éditeur par glisser-déposer.
- Page de confirmation : Basculez vers Page de confirmation en haut de l’éditeur pour styliser l’expérience post-enregistrement en utilisant les mêmes types de blocs.