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

Utilisez Contenu > In-App Message 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 Color Profile et CSS Template pour l’éditeur traditionnel.

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

Dans le tableau de bord de Braze, accédez à Contenu > In-App Message.

É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 Contenu > In-App Message, 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.

Pour accéder aux modèles de messages in-app, vous devez disposer des autorisations utilisateur permettant de consulter ou de modifier les modèles de messages in-app.

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 + Create et choisir Color Profile ou CSS Template 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 Use as default profile.

Sélectionnez Save Color Profile 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 Apply Template 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 Templates > In-App Message Templates.