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 éditeurs d’e-mails
Les blocs éditeurs se trouvent dans la section Contenu des messages e-mail. Glissez un bloc à l’intérieur d’une colonne dans l’éditeur par glisser-déposer ; il s’ajuste automatiquement à la largeur de la colonne.
Pour en savoir plus 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 éditeurs 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 de votre titre. |
| Graisse de la police | L’épaisseur 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 vers la gauche, le centre ou la droite. |
| Hauteur de ligne | Modifie l’espace entre les lignes de texte. |
| Espacement des lettres | Modifie l’espace entre chaque caractère. |
| Sens du texte | Par défaut de gauche à droite, mais peut être modifié pour être de droite à gauche. |
Paragraphe
Permet de saisir du texte dans le message. Une barre d’outils facilite la mise en forme des polices et du texte.
| Propriété | Description |
|---|---|
| Famille de polices | Le style de police de votre paragraphe. |
| Graisse de la police | L’épaisseur 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 vers la gauche, le centre ou la droite. |
| Espacement des paragraphes | Modifie l’espace entre les paragraphes. |
| Hauteur de ligne | Modifie l’espace entre les lignes de texte. |
| Espacement des lettres | Modifie l’espace entre chaque caractère. |
| Sens 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 de votre paragraphe. |
| Graisse de la police | L’épaisseur 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 vers la gauche, le centre ou la droite. |
| Espacement des éléments de liste | Modifie l’espace entre les éléments de liste. |
| Indentation des éléments de liste | Modifie l’indentation des éléments de liste. |
| Hauteur de ligne | Modifie l’espace entre les lignes de texte. |
| Espacement des lettres | Modifie l’espace entre chaque caractère. |
| Sens 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 configurer le comportement des liens.
| Propriété | Description |
|---|---|
| Options du bouton | Définit diverses options du bouton, telles que la police, la taille, la largeur, la couleur et la marge intérieure. |
| Bouton au survol | Le style du bouton lorsqu’un utilisateur le survole avec une souris ou un trackpad. Cela 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 effectuée lors du clic sur le bouton et définit le protocole approprié. |
| URL | Dynamique selon le type de lien Open web page. |
| Destinataire, objet et corps du message | Pour le type de lien Send email, 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 Make call et Send 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 Send SMS, définit le contenu qui sera pré-rempli dans un brouillon de SMS lorsque l’utilisateur sélectionne le bouton. |
Ligne de séparation
Insère une ligne continue, en pointillés ou en tirets pour faciliter 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 : pointillés, tirets ou trait continu. Vous pouvez également modifier l’épaisseur et la couleur de la ligne de séparation. |
| Largeur | Ajuste l’étendue de la ligne de séparation par incréments de 5. |
| Alignement | Déplace la ligne vers la gauche, le centre ou la droite. |
Espaceur
Ajoute de l’espace ou de la marge intérieure 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 provenant de la bibliothèque multimédia. Pour les images dynamiques (images avec Liquid ou contenu connecté), vous devez définir une image de secours afin d’utiliser les paramètres de largeur automatique. Pour les spécifications relatives aux images, consultez les spécifications relatives aux images dans 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 | Oriente l’image vers la gauche, le centre ou la droite du bloc. |
| Image avec Liquid | Utilisez la logique Liquid pour définir dynamiquement différentes images au sein d’un même bloc de contenu. |
| URL | Définissez une image en utilisant l’adresse de l’endroit où elle est hébergée. |
| Texte alternatif | Une courte description de l’image qui fournit aux utilisateurs les mêmes informations que celles présentées dans l’image. Essentiel pour l’accessibilité des lecteurs d’écran ou lorsque l’image ne parvient pas à se charger. |
| Image aux 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 la marge intérieure autour du bloc d’image. |
Pour la largeur automatique, le redimensionnement automatique choisit la meilleure taille pour l’image en combinant la largeur de l’image et 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 ainsi toute la largeur de l’écran de l’appareil.
- Les images plus petites que l’espace disponible utilisent leur taille naturelle pour éviter les effets de distorsion ou les images floues.
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 | Propose différentes options pour le bouton de lecture situé en haut d’une image vidéo. |
| Couleur de l’icône de lecture | Permet de sélectionner Light ou Dark 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, « Hide from Vimeo.com ») génèrent un format de lien différent qui n’est pas pris en charge par ce bloc de contenu. 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 les icônes de plateformes de réseaux sociaux. Vous pouvez télécharger des images personnalisées pour les icônes spécifiques à votre marque.
| Propriété | Description |
|---|---|
| Sélectionner une 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 sociale. Inclut le basculeur More options pour modifier le titre et le texte alternatif. |
| Alignement | Déplace l’icône sociale vers la gauche, le centre ou la droite. |
| Espacement des icônes | Détermine l’espacement entre chaque icône sociale. |
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 de votre paragraphe. |
| Graisse de la police | L’épaisseur 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 vers la gauche, le centre ou la droite. |
| Espacement des lettres | Modifie l’espace 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. |
| Marge intérieure de l’icône | Modifie la marge intérieure 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 | Ajoute un élément de menu. |
| Famille de polices | Le style de police du 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 vers la gauche, le centre ou la droite. |
| Espacement des lettres | Modifie l’espace entre chaque caractère. |
| Disposition | Détermine si la mise en page est horizontale ou verticale. |
| Séparateur | Ajoute un ou plusieurs caractères entre les options de menu. |
| Menu mobile | Propose des options pour modifier la taille, la couleur et le type d’icône sur un appareil mobile. |
| Marge intérieure des éléments | Modifie la marge intérieure en utilisant le bouton + ou -, ou en saisissant un nombre spécifique. |
| Tous les côtés | Définit une marge intérieure uniforme si la marge intérieure des éléments est désactivée. |
Produit
Affiche des lignes de produits à partir d’un catalogue de produits, soit sous forme d’éléments statiques issus d’une sélection de catalogue (jusqu’à 12), soit sous forme de produits dynamiques alimenté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 fixe du catalogue (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. |
| 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 indiquant le champ du catalogue ou de l’événement sous-jacent mappé à chaque champ de produit. |
| Image de la variante | Affiche ou masque l’image de la variante pour chaque vignette de produit. |
| Titre du produit | Affiche ou masque le titre du produit pour chaque vignette. |
| 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 issue de l’événement déclencheur. |
| Orientation du produit | Définit la position de l’image dans chaque vignette : Image left, Image center ou Image right. |
| Alignement | Définit l’alignement horizontal du contenu dans chaque vignette. |
| 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 center). |
| Espacement des produits | Définit l’espacement entre les produits : Auto ou Custom. |
| Espacement personnalisé | (Lorsque Custom est sélectionné) Définit l’écart en pixels entre les produits. |
Personnalisation
Vous pouvez ajouter de la personnalisation à votre e-mail à l’aide de Liquid ou du contenu connecté.
- Liquid : Sous Content > Personalization, sélectionnez un attribut, copiez l’extrait de code et collez-le dans un bloc Titre, Paragraphe ou Liste (Liquid de base) ou dans un bloc HTML (Liquid avancé). De manière générale, bien que vous puissiez utiliser du Liquid de base dans les blocs Titre, Paragraphe et Liste, nous recommandons d’utiliser les blocs HTML pour les logiques plus complexes afin d’éviter les problèmes de mise en page. 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 éditeurs de messages in-app
Les blocs éditeurs se trouvent dans la section Build pour les messages in-app. Faites glisser un bloc dans une colonne ; il s’ajuste automatiquement à la largeur de la colonne. Sélectionnez un bloc pour modifier ses paramètres dans le panneau latéral droit.
Pour en savoir plus sur la création de messages in-app dans l’éditeur par glisser-déposer, consultez Créer un message in-app par glisser-déposer.
Titre et paragraphe
Ajoute un titre ou un paragraphe au message.
| 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 standard avec un style, des liens et des analyses configurables.
| 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. |
Bouton radio
Ajoute une liste d’options parmi lesquelles les utilisateurs peuvent en choisir une. Lors de l’envoi du formulaire, le profil utilisateur enregistre l’attribut personnalisé associé, qui doit être une chaîne de caractères pour être sauvegardé. 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
Insère une image provenant de la bibliothèque multimédia.
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. |
Pour les spécifications relatives aux images, consultez nos spécifications relatives aux images des messages in-app.
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 sur lequel les utilisateurs peuvent cliquer pour accéder à une URL spécifiée. Il peut être intégré dans un texte ou utilisé de manière 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. |
Espaceur
Ajoute de l’espace ou une marge intérieure entre les autres 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 code HTML, CSS ou JavaScript personnalisé pour une personnalisation avancée.
| Propriété | Description |
|---|---|
| Code personnalisé | Permet d’ajouter, de modifier ou de supprimer du code HTML, CSS et JavaScript pour un message in-app. |
Capture de numéro de téléphone
Insère un champ de formulaire pour les numéros de téléphone. Une fois le formulaire envoyé, l’utilisateur est abonné au groupe d’abonnement SMS ou WhatsApp.
| 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’adresse e-mail
Insère un champ de formulaire pour les adresses e-mail. Une fois le formulaire envoyé, l’adresse e-mail est ajoutée au profil de l’utilisateur dans Braze.
| 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 court
Insère un champ de formulaire prenant en charge les attributs standard (tels que le prénom et le nom) ou une chaîne de caractères d’attribut personnalisé de votre choix.
| 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
Insère une liste déroulante avec une liste prédéfinie d’éléments parmi lesquels les utilisateurs peuvent en sélectionner un. Vous pouvez ajouter à la liste des chaînes de caractères d’attributs personnalisés.
| 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
Insère une case à cocher. Si l’utilisateur coche la case, l’attribut personnalisé booléen du bloc est défini sur true. Si la case reste décochée, l’attribut est défini 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 peuvent choisir parmi plusieurs options proposées. Les valeurs sont définies ou ajoutées à un attribut personnalisé de type tableau.
| 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 l’assistance Braze ou votre gestionnaire de la satisfaction client 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 temps réel sous 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 bloc Code personnalisé pour intégrer un lecteur si nécessaire. Pour en savoir plus, consultez Messages in-app : questions fréquentes.
Blocs éditeur pour les pages d’accueil
Les blocs éditeur pour les pages d’accueil se trouvent dans la section Build de l’éditeur par glisser-déposer, sous Rows et les catégories de blocs. Faites glisser un bloc dans la colonne d’une 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 situé à droite.
Pour plus d’informations sur la création et la publication de pages d’accueil, consultez Créer des pages d’accueil.
Titre et paragraphe
Ajoute un titre ou du texte 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 l’envoi 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 Submit form when button is clicked et ouvrez une URL web dans un nouvel onglet, iOS Safari peut bloquer la navigation. Ouvrez l’URL post-envoi dans le même onglet lors de l’envoi de formulaires. Pour plus d’informations, consultez Créer des pages d’accueil.
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 l’envoi 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 utilisé de manière 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 code 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 l’envoi, 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 l’envoi, 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, prénom ou nom) ou un attribut personnalisé de type chaîne de caractères.
| 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 associer les valeurs à des attributs personnalisés de type chaîne de caractères.
| 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, l’attribut personnalisé de type booléen du bloc est défini sur true ; lorsqu’elle est dé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 sélectionnent plusieurs options ; les valeurs définissent ou s’ajoutent à 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 l’assistance Braze ou votre gestionnaire de la satisfaction client 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 temps réel sous 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 Custom code pour intégrer un lecteur si nécessaire. Pour plus d’informations, consultez Pages d’accueil.
Blocs éditeur de bannière
Dans le compositeur de bannière, faites glisser des lignes et des blocs depuis la section Build 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ère, consultez Créer une bannière.
Le compositeur de bannière propose les mêmes types de blocs de disposition que les autres surfaces de glisser-déposer, mais pas l’ensemble complet des blocs de formulaire (par exemple, pas de bouton radio, de texte court, de liste déroulante ou de case à cocher). Vous pouvez ajouter des blocs Phone capture et Email capture ; 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 un titre ou du texte 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 des 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 en savoir plus, 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 des 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 dispositions 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 le 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 l’envoi, abonne l’utilisateur au groupe d’abonnement SMS ou WhatsApp 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 l’envoi. 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 l’assistance Braze ou votre gestionnaire de la satisfaction client 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 temps réel sous 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 Custom code pour intégrer un lecteur si nécessaire. Pour en savoir plus, consultez Bannières : foire aux questions.
- Liquid : la plupart du Liquid est pris en charge ; il existe des exceptions telles que les balises de re-rendu de Catalogue. Pour en savoir plus, consultez Bannières : foire aux questions.
Blocs de l’éditeur du centre de préférences
Faites glisser les blocs depuis la section Créer dans une ligne de l’éditeur de centre de préférences par glisser-déposer. Chaque bloc possède ses propres paramètres ; le panneau de droite affiche 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 smart block d’abonnement (voir ci-dessous). 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 un titre ou du texte avec des options de mise en forme enrichie.
| 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 Save 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 provenant de la bibliothèque multimédia ou d’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 (smart block)
Ajoute un bloc modèle qui répertorie les groupes d’abonnement, des contrôles facultatifs Subscribe to all / Unsubscribe from all, ainsi que 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 smart block dans le canvas pour :
- Réorganiser les groupes d’abonnement
- Ajouter ou supprimer des groupes
- Ajouter ou supprimer des descriptions
- Basculer Subscribe to all et Unsubscribe from all pour les groupes de ce bloc
Le contrôle Unsubscribe from all 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 pour l’ensemble de la page sous Common Styles 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 : passez à Confirmation Page en haut de l’éditeur pour styliser l’expérience post-enregistrement en utilisant les mêmes types de blocs.