Personnaliser le style des Content Cards
Les Content Cards de Braze sont livrées avec une apparence par défaut. Cet article présente les options de style disponibles pour vos Content Cards, afin de les adapter à l’identité de votre marque. Pour consulter la liste complète des types de Content Cards, voir À propos des Content Cards.
Créer un style personnalisé
L’interface utilisateur par défaut des Content Cards est importée à partir de la couche UI du SDK Braze. Vous pouvez ensuite ajuster certains aspects du style des cartes, l’ordre dans lequel elles sont affichées, et la manière dont le flux est présenté à vos utilisateurs.
Les propriétés des Content Cards telles que title, cardDescription, imageUrl, etc., sont directement modifiables via le tableau de bord, ce qui est la méthode recommandée pour modifier ces informations.
Les styles par défaut de Braze sont définis en CSS au sein du SDK Braze. En remplaçant certains styles dans votre application, vous pouvez personnaliser notre flux standard avec vos propres images d’arrière-plan, familles de polices, styles, tailles, animations et bien plus encore. Par exemple, voici un remplacement qui fait apparaître les Content Cards avec une largeur de 800 px :
1
2
3
body .ab-feed {
width: 800px;
}
Pour une liste complète des propriétés que vous pouvez modifier, consultez les options de configuration du SDK Braze.
Par défaut, les Content Cards des SDK Android et FireOS respectent les directives d’interface utilisateur standard d’Android pour offrir une expérience cohérente. Vous pouvez consulter ces styles par défaut dans le fichier res/values/styles.xml de la distribution du SDK Braze :
1
2
3
4
5
6
7
8
9
10
11
<style name="Braze.ContentCards.CaptionedImage.Description">
<item name="android:textColor">@color/com_braze_description</item>
<item name="android:textSize">15.0sp</item>
<item name="android:includeFontPadding">false</item>
<item name="android:paddingBottom">8.0dp</item>
<item name="android:layout_marginLeft">10.0dp</item>
<item name="android:layout_marginRight">10.0dp</item>
<item name="android:layout_marginTop">8.0dp</item>
<item name="android:layout_width">match_parent</item>
<item name="android:layout_below">@id/com_braze_content_cards_captioned_image_card_title_container</item>
</style>
Pour personnaliser le style de vos Content Cards, remplacez ce style par défaut. Pour remplacer un style, copiez-le dans son intégralité dans le fichier styles.xml de votre projet et apportez les modifications souhaitées. Le style complet doit être copié dans votre fichier styles.xml local pour que tous les attributs soient correctement définis.
1
2
3
4
5
6
7
8
9
<style name="Braze.ContentCardsDisplay">
<item name="android:background">@color/mint</item>
<item name="android:cacheColorHint">@color/mint</item>
<item name="android:divider">@android:color/transparent</item>
<item name="android:dividerHeight">16.0dp</item>
<item name="android:paddingLeft">12.5dp</item>
<item name="android:paddingRight">5.0dp</item>
<item name="android:scrollbarStyle">outsideInset</item>
</style>
1
2
3
4
<style name="Braze.ContentCardsDisplay">
<item name="android:background">@color/mint</item>
<item name="android:cacheColorHint">@color/mint</item>
</style>
Par défaut, les Content Cards des SDK Android et FireOS respectent les directives d’interface utilisateur standard d’Android pour offrir une expérience cohérente.
Vous pouvez appliquer un style de deux manières. La première consiste à passer un ContentCardListStyling et un ContentCardStyling à ContentCardsList, comme dans l’exemple suivant :
1
2
3
4
5
6
7
8
9
10
11
12
13
ContentCardsList(
style = ContentCardListStyling(listBackgroundColor = Color.Red),
cardStyle = ContentCardStyling(
titleTextStyle = TextStyle(
fontFamily = fontFamily,
fontSize = 25.sp
),
shadowRadius = 10.dp,
shortNewsContentCardStyle = BrazeShortNewsContentCardStyling(
shadowRadius = 15.dp
)
)
)
La seconde consiste à utiliser BrazeStyle pour créer un style global pour les composants Braze, comme dans l’exemple suivant :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
BrazeStyle(
contentCardStyle = ContentCardStyling(
textAnnouncementContentCardStyle = BrazeTextAnnouncementContentCardStyling(
cardBackgroundColor = Color.Red,
descriptionTextStyle = TextStyle(
fontFamily = fontFamily,
fontSize = 25.sp,
)
),
titleTextColor = Color.Magenta
)
) {
// Your app here, including any ContentCardsList() in it
}
Le contrôleur de vue des Content Cards vous permet de personnaliser l’apparence et le comportement de toutes les cellules via la structure BrazeContentCardUI.ViewController.Attributes. Configurer les Content Cards à l’aide d’Attributes est une option simple qui vous permet de lancer l’interface de vos Content Cards avec un minimum de configuration.
La personnalisation via Attributes n’est disponible qu’en Swift.
Modifier Attributes.default
Personnalisez l’apparence de toutes les instances du contrôleur de vue de l’interface des Content Cards Braze en modifiant directement la variable statique Attributes.defaults.
Par exemple, pour modifier la taille d’image et le rayon des coins par défaut pour toutes les cellules :
1
2
BrazeContentCardUI.ViewController.Attributes.defaults.cellAttributes.cornerRadius = 20
BrazeContentCardUI.ViewController.Attributes.defaults.cellAttributes.classicImageSize = CGSize(width: 65, height: 65)
Initialiser le contrôleur de vue avec des Attributes
Si vous souhaitez modifier uniquement une instance spécifique du contrôleur de vue de l’interface des Content Cards Braze, utilisez l’initialiseur init(braze:attributes:) pour passer une structure Attributes personnalisée au contrôleur de vue.
Par exemple, vous pouvez modifier la taille d’image et le rayon des coins pour une instance spécifique du contrôleur de vue :
1
2
3
4
5
var attributes = BrazeContentCardUI.ViewController.Attributes.defaults
attributes.cellAttributes.cornerRadius = 20
attributes.cellAttributes.classicImageSize = CGSize(width: 65, height: 65)
let viewController = BrazeContentCardUI.ViewController(braze: AppDelegate.braze, attributes: attributes)
Personnaliser les cellules par sous-classement
Vous pouvez également créer des interfaces personnalisées en enregistrant des classes personnalisées pour chaque type de carte souhaité. Pour utiliser votre sous-classe à la place de la cellule par défaut, modifiez la propriété cells dans la structure Attributes. Par exemple :
1
2
3
4
5
var attributes = BrazeContentCardUI.ViewController.Attributes.defaults
// Register your own custom cell
attributes.cells[BrazeContentCardUI.ClassicImageCell.identifier] = CustomClassicImageCell.self
let viewController = BrazeContentCardUI.ViewController(braze: AppDelegate.braze, attributes: attributes)
Modifier les Content Cards de manière programmatique
Vous pouvez modifier les Content Cards de manière programmatique en assignant la closure transform sur votre structure Attributes. L’exemple suivant modifie le title et la description des cartes compatibles :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var attributes = BrazeContentCardUI.ViewController.Attributes.defaults
attributes.transform = { cards in
cards.map { card in
var card = card
if let title = card.title {
card.title = "[modified] \(title)"
}
if let description = card.description {
card.description = "[modified] \(description)"
}
return card
}
}
let viewController = BrazeContentCardUI.ViewController(braze: AppDelegate.braze, attributes: attributes)
Consultez l’application d’exemples pour un exemple complet.
La personnalisation des Content Cards via Attributes n’est pas prise en charge avec Objective-C.
Exemples de personnalisation
Police personnalisée
La personnalisation de la police utilisée dans vos Content Cards vous permet de conserver l’identité de votre marque et de créer une expérience visuellement attrayante pour vos utilisateurs. Utilisez ces recettes pour définir la police de toutes les Content Cards de manière programmatique.
Comme pour tout autre élément web, vous pouvez facilement personnaliser l’apparence des Content Cards via CSS. Dans votre fichier CSS ou vos styles en ligne, utilisez la propriété font-family et spécifiez le nom de police ou la pile de polices souhaitée.
1
2
3
4
/* CSS selector targeting the Content Card element */
.card-element {
font-family: "Helvetica Neue", Arial, sans-serif;
}
Pour modifier la police par défaut de manière programmatique, définissez un style pour les cartes et utilisez l’attribut fontFamily pour indiquer à Braze d’utiliser votre famille de polices personnalisée.
Par exemple, pour mettre à jour la police de tous les titres des cartes avec image légendée, surchargez le style Braze.ContentCards.CaptionedImage.Title et référencez votre famille de polices personnalisée. La valeur de l’attribut doit pointer vers une famille de polices dans votre répertoire res/font.
Voici un exemple tronqué avec une famille de polices personnalisée, my_custom_font_family, référencée à la dernière ligne :
1
2
3
4
5
6
<style name="Braze.ContentCards.CaptionedImage.Title">
<item name="android:layout_width">wrap_content</item>
...
<item name="android:fontFamily">@font/my_custom_font_family</item>
<item name="fontFamily">@font/my_custom_font_family</item>
</style>
L’exemple XML précédent montre comment référencer une famille de polices personnalisée dans vos styles de carte.
Pour modifier la police par défaut de manière programmatique, vous pouvez définir le titleTextStyle de ContentCardStyling.
Vous pouvez également définir titleTextStyle pour un type de carte spécifique en le configurant sur BrazeShortNewsContentCardStyling et en le transmettant au shortNewsContentCardStyle de ContentCardStyling.
1
2
3
4
5
6
7
8
9
val fontFamily = FontFamily(
Font(R.font.sailec_bold)
)
ContentCardStyling(
titleTextStyle = TextStyle(
fontFamily = fontFamily
)
)
Personnalisez vos polices en configurant les Attributes de la propriété d’instance cellAttributes. Par exemple :
1
2
3
4
5
6
var attributes = BrazeContentCardUI.ViewController.Attributes.defaults
attributes.cellAttributes.titleFont = .preferredFont(textStyle: .callout, weight: .bold)
attributes.cellAttributes.descriptionFont = .preferredFont(textStyle: .footnote, weight: .regular)
attributes.cellAttributes.domainFont = .preferredFont(textStyle: .footnote, weight: .medium)
let viewController = BrazeContentCardUI.ViewController.init(braze: braze, attributes: attributes)
La personnalisation des polices via Attributes n’est pas prise en charge en Objective-C.
Consultez l’application d’exemple Examples pour un exemple de création de votre propre interface utilisateur avec des polices personnalisées.
Icônes épinglées personnalisées
Lors de la création d’une Content Card, les marketeurs ont la possibilité d’épingler la carte. Une carte épinglée s’affiche en haut du flux de l’utilisateur, et celui-ci ne peut pas la rejeter. Lorsque vous personnalisez les styles de vos cartes, vous pouvez modifier l’apparence de l’icône d’épingle.
La structure de l’icône d’épingle des Content Cards est la suivante :
1
2
3
<div class="ab-pinned-indicator">
<i class="fa fa-star"></i>
</div>
Si vous souhaitez utiliser une autre icône FontAwesome, vous pouvez remplacer le nom de la classe de l’élément i par le nom de classe de l’icône souhaitée.
Si vous souhaitez remplacer complètement l’icône, supprimez l’élément i et ajoutez l’icône personnalisée en tant qu’enfant de ab-pinned-indicator. Il existe plusieurs façons de modifier l’icône, mais une méthode simple consiste à utiliser replaceChildren() sur l’élément ab-pinned-indicator.
Par exemple :
1
2
3
4
5
6
7
8
9
// Get the parent element
const pinnedIndicator = document.querySelector('.ab-pinned-indicator');
// Create a new custom icon element
const customIcon = document.createElement('span');
customIcon.classList.add('customIcon');
// Replace the existing icon with the custom icon
pinnedIndicator.replaceChildren(customIcon);
Pour définir une icône d’épingle personnalisée, surchargez le style Braze.ContentCards.PinnedIcon. Votre ressource d’image personnalisée doit être déclarée dans l’élément android:src. Par exemple :
1
2
3
4
5
6
7
8
9
10
<style name="Braze.ContentCards.PinnedIcon">
<item name="android:src">@drawable/{my_custom_image_here}</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_alignParentRight">true</item>
<item name="android:layout_alignParentTop">true</item>
<item name="android:contentDescription">@null</item>
<item name="android:importantForAccessibility">no</item>
</style>
Pour modifier l’icône d’épingle par défaut, vous pouvez définir le pinnedResourceId de ContentCardStyling. Par exemple :
1
2
3
4
ContentCardStyling(
pinnedResourceId = R.drawable.pushpin,
pinnedImageAlignment = Alignment.TopCenter
)
Vous pouvez également spécifier un Composable dans pinnedComposable de ContentCardStyling. Si pinnedComposable est spécifié, il remplace la valeur de pinnedResourceId.
1
2
3
4
5
6
7
8
9
10
11
12
ContentCardStyling(
pinnedComposable = {
Box(Modifier.fillMaxWidth()) {
Text(
modifier = Modifier
.align(Alignment.Center)
.width(50.dp),
text = "This message is not read. Please read it."
)
}
}
)
Personnalisez l’icône d’épingle en modifiant les propriétés pinIndicatorColor et pinIndicatorImage de la propriété d’instance cellAttributes. Par exemple :
1
2
3
4
5
var attributes = BrazeContentCardUI.ViewController.Attributes.defaults
attributes.cellAttributes.pinIndicatorColor = .red
attributes.cellAttributes.pinIndicatorImage = UIImage(named: "my-image")
let viewController = BrazeContentCardUI.ViewController.init(braze: braze, attributes: attributes)
Vous pouvez également utiliser le sous-classement pour créer votre propre version personnalisée de BrazeContentCardUI.Cell, qui inclut l’indicateur d’épingle. Par exemple :
1
2
3
4
var attributes = BrazeContentCardUI.ViewController.Attributes.defaults
attributes.cells[BrazeContentCardUI.ClassicImageCell.identifier] = CustomClassicImageCell.self
let viewController = BrazeContentCardUI.ViewController(braze: AppDelegate.braze, attributes: attributes)
La personnalisation de l’indicateur d’épingle via Attributes n’est pas prise en charge en Objective-C.
Modification de la couleur de l’indicateur non lu
Les Content Cards contiennent une ligne bleue en bas de la carte qui indique si la carte a été consultée ou non.
Pour modifier la couleur de l’indicateur non lu d’une carte, ajoutez du CSS personnalisé à votre page web. Par exemple, pour définir la couleur de l’indicateur non consulté en vert :
1
.ab-unread-indicator { background-color: green; }
Modifiez la couleur de la barre de l’indicateur non lu en modifiant la valeur de com_braze_content_cards_unread_bar_color dans votre fichier colors.xml :
1
2
3
4
5
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- The color used to highlight unread Content Cards at their bottom edge -->
<color name="com_braze_content_cards_unread_bar_color">#1676d0</color>
</resources>
Pour modifier la couleur de la barre de l’indicateur non lu, modifiez la valeur de unreadIndicatorColor dans ContentCardStyling :
1
2
3
ContentCardStyling(
unreadIndicatorColor = Color.Red
)
Modifiez la couleur de la barre de l’indicateur non lu en attribuant une valeur à la couleur de teinte de votre instance BrazeContentCardUI.ViewController :
1
2
let viewController = BrazeContentCardUI.ViewController(braze: AppDelegate.braze)
viewController.view.tintColor = .systemGreen
Cependant, si vous souhaitez modifier uniquement l’indicateur non consulté, vous pouvez accéder à la propriété unviewedIndicatorColor de votre structure BrazeContentCardUI.ViewController.Attributes. Si vous utilisez les implémentations Braze UITableViewCell, accédez à la propriété avant que la cellule ne soit affichée.
Par exemple, pour définir la couleur de l’indicateur non consulté en rouge :
1
2
3
4
var attributes = BrazeContentCardUI.ViewController.Attributes.defaults
attributes.cellAttributes.unviewedIndicatorColor = .red
let viewController = BrazeContentCardUI.ViewController(braze: AppDelegate.braze, attributes: attributes)
Consultez l’application d’exemple Examples pour un exemple complet.
Modifiez la couleur de la barre de l’indicateur non lu en attribuant une valeur à la couleur de teinte de votre BRZContentCardUIViewController :
1
2
BRZContentCardUIViewController *viewController = [[BRZContentCardUIViewController alloc] initWithBraze:AppDelegate.braze];
[viewController.view setTintColor:[UIColor systemGreenColor]];
La personnalisation de l’indicateur non consulté uniquement via Attributes n’est pas prise en charge en Objective-C.
Mode sombre
Pour afficher différentes images ou styles en fonction du mode sombre ou clair de l’appareil, utilisez des paires clé-valeur dans votre message Content Card. Par exemple, ajoutez une paire clé-valeur comme dark_mode_image avec l’URL de votre ressource d’image pour le mode sombre. Ensuite, dans votre application, ajoutez une logique personnalisée pour vérifier le mode d’apparence actuel de l’appareil et afficher l’image appropriée.
1
2
3
4
if let darkImageUrl = card.extras["dark_mode_image"],
view.traitCollection.userInterfaceStyle == .dark {
// Use darkImageUrl for the image
}
1
2
3
4
5
val darkModeImage = card.extras["dark_mode_image"]
val isDarkMode = (resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK) == Configuration.UI_MODE_NIGHT_YES
if (isDarkMode && darkModeImage != null) {
// Use darkModeImage for the image
}
1
2
3
4
5
const darkModeImage = card.extras?.dark_mode_image;
const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
if (isDarkMode && darkModeImage) {
// Use darkModeImage for the image
}
Ce modèle fonctionne pour tout contenu dépendant de l’apparence, y compris le texte, les couleurs ou les mises en page. Téléversez vos ressources d’images pour le mode sombre dans la bibliothèque multimédia, puis référencez-les dans une paire clé-valeur.
Désactivation de l’indicateur non lu
Masquez la barre de l’indicateur non lu en ajoutant le style suivant à votre css :
1
.ab-unread-indicator { display: none; }
Masquez la barre de l’indicateur non lu en définissant setUnreadBarVisible sur ContentCardViewHolder à false.
La désactivation de l’indicateur non lu n’est pas prise en charge dans Jetpack Compose.
Masquez la barre de l’indicateur non lu en définissant la propriété attributes.cellAttributes.unviewedIndicatorColor dans votre structure Attributes sur .clear.
La personnalisation de l’indicateur non consulté uniquement via Attributes n’est pas prise en charge en Objective-C.