Créer un modèle de message in-app

Utilisez Modèles > Modèles de messages in-app pour créer une bibliothèque réutilisable de mises en page de messages in-app et dans le navigateur. Vous pouvez enregistrer des conceptions depuis l’éditeur par glisser-déposer ou créer des ressources Profil de couleurs et Modèle CSS pour l’éditeur traditionnel.

Étape 1 : Ouvrir les modèles de messages in-app

Dans le tableau de bord de Braze, accédez à Modèles > Modèles de messages in-app.

Étape 2 : Choisir comment créer un modèle

La manière d’ajouter un modèle dépend de votre objectif :

Remarque

Les profils de couleurs et les modèles CSS s’appliquent à l’éditeur traditionnel. Si vous utilisez l’éditeur par glisser-déposer, utilisez les Paramètres de style pour la mise en forme au niveau du message.

Étape 3 : Gérer vos modèles

Dans Modèles > Modèles de messages in-app, filtrez, recherchez ou ouvrez un modèle pour le modifier. Vous pouvez dupliquer et archiver des modèles comme pour les autres types de modèles. Pour un aperçu des flux de travail liés aux modèles et aux médias, consultez Modèles.

Vous devez disposer des autorisations nécessaires pour accéder aux modèles. Par exemple, accordez l’autorisation « Access Campaigns, Canvases, Cards, Content Blocks, Feature Flags, Segments, Media Library, Locations, Promotion Codes, and Preference Centers » ou l’autorisation granulaire équivalente pour consulter ou modifier les modèles de messages in-app. Pour plus de détails, consultez Autorisations des utilisateurs.

Créer des profils de couleurs et des modèles CSS

Remarque

Les options suivantes s’appliquent à l’éditeur traditionnel. Si vous utilisez l’éditeur par glisser-déposer, utilisez les Paramètres de style à la place.

Vous pouvez modifier des modèles existants ou sélectionner + Créer et choisir Profil de couleurs ou Modèle CSS pour créer de nouveaux modèles pour vos messages in-app.

Profil de couleurs

Vous pouvez personnaliser le jeu de couleurs de votre modèle de message en saisissant un code couleur HEX ou en sélectionnant la case colorée et en choisissant une couleur avec le sélecteur de couleurs. Si vous souhaitez que ce profil soit appliqué par défaut lorsque vous créez de nouveaux messages in-app dans l’éditeur traditionnel, sélectionnez Utiliser comme profil par défaut.

Sélectionnez Enregistrer le profil de couleurs lorsque vous avez terminé.

Modèle CSS

Vous pouvez personnaliser un modèle CSS complet pour votre message in-app de type fenêtre modale web.

Nommez et étiquetez votre modèle CSS, puis choisissez s’il sera votre modèle par défaut. Vous pouvez écrire votre propre CSS dans l’espace prévu. Cet espace est déjà prérempli avec le CSS affiché dans l’aperçu de votre message, et vous pouvez l’ajuster selon vos besoins.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
.ab-message-header, .ab-message-text {
  color: #333333;
  text-align: center;
}

.ab-message-header {
  font-size: 20px;
  font-weight: bold;
}

.ab-message-text {
  font-size: 14px;
  font-weight: normal;
}

.ab-close-button svg {
  fill: #9b9b9b;
}

.ab-message-button {
  border: 1px solid #1b78cf;
  font-size: 14px;
  font-weight: bold;
}
.ab-message-button:first-of-type {
  background-color: white;
  color: #1b78cf;
}
.ab-message-button:last-of-type, .ab-message-button:first-of-type:last-of-type {
  background-color: #1b78cf;
  color: white;
}

.ab-background {
  background-color: white;
}

.ab-icon {
  background-color: #0073d5;
  color: white;
}

.ab-page-blocker {
  background-color: rgba(51, 51, 51, .75);
}

Vous pouvez tout modifier, de la couleur d’arrière-plan à la taille et à l’épaisseur de la police, et bien plus encore.

Fenêtre modale avec CSS (web uniquement)

Si vous choisissez d’utiliser un message de type fenêtre modale web avec CSS (web uniquement), vous pouvez appliquer votre propre modèle ou écrire votre propre CSS dans l’espace prévu. Cet espace est déjà prérempli avec le CSS affiché dans l’aperçu de votre message, mais vous pouvez l’ajuster selon vos besoins.

Si vous choisissez d’appliquer votre propre modèle, sélectionnez Appliquer le modèle et choisissez dans la galerie de modèles de messages in-app. Si vous n’avez aucune option, vous pouvez ajouter un modèle CSS à l’aide du générateur de modèles CSS dans Modèles > Modèles de messages in-app.