Personalizar el estilo de las tarjetas de contenido
Las tarjetas de contenido Braze tienen un aspecto predeterminado. Este artículo trata de las opciones de estilo de tus tarjetas de contenido para ayudarte a que coincidan con la identidad de tu marca. Para ver la lista completa de tipos de tarjetas de contenido, consulta Acerca de las tarjetas de contenido.
Crear un estilo personalizado
La interfaz de usuario predeterminada de las tarjetas de contenido se importa de la capa de interfaz de usuario del SDK de Braze. A partir de ahí, puedes ajustar ciertas partes del estilo de la tarjeta, el orden en que se muestran las tarjetas y cómo se muestra la fuente a tus usuarios.
Las propiedades de las tarjetas de contenido, como title, cardDescription, imageUrl, etc., se pueden editar directamente a través del panel, que es el método preferido para cambiar estos detalles.
Por defecto, las tarjetas de contenido SDK de Android y FireOS se ajustan a las directrices de la interfaz de usuario estándar de Android para ofrecer una experiencia sin fisuras. Puedes ver estos estilos predeterminados en el archivo res/values/styles.xml de la distribución del SDK de 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>
Para personalizar el estilo de tu tarjeta de contenido, anula este estilo predeterminado. Para anular un estilo, cópialo en su totalidad en el archivo styles.xml de tu proyecto y haz modificaciones. Debes copiar todo el estilo en tu archivo local styles.xml para que todos los atributos estén correctamente configurados.
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>
Por defecto, las tarjetas de contenido SDK de Android y FireOS se ajustan a las directrices de la interfaz de usuario estándar de Android para ofrecer una experiencia sin fisuras.
Puedes aplicar el estilizado de dos formas. La primera consiste en pasar un ContentCardListStyling y un ContentCardStyling a ContentCardsList(), como en el ejemplo siguiente:
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 segunda es utilizar BrazeStyle para crear un estilo global para los componentes Braze, como en el ejemplo siguiente:
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
}
El controlador de vista Tarjetas de contenido te permite personalizar el aspecto y el comportamiento de todas las celdas mediante la estructura BrazeContentCardUI.ViewController.Attributes estructura. Configurar las tarjetas de contenido mediante Attributes es una opción sencilla, que te permite lanzar tu interfaz de usuario de tarjetas de contenido con una configuración mínima.
La personalización a través de Attributes sólo está disponible en Swift.
Modificación de Attributes.default
Personaliza el aspecto de todas las instancias del controlador de vista de interfaz de usuario de la tarjeta de contenido Braze modificando directamente la variable estática Attributes.defaults estática.
Por ejemplo, para cambiar el tamaño predeterminado de la imagen y el radio de las esquinas de todas las celdas:
1
2
BrazeContentCardUI.ViewController.Attributes.defaults.cellAttributes.cornerRadius = 20
BrazeContentCardUI.ViewController.Attributes.defaults.cellAttributes.classicImageSize = CGSize(width: 65, height: 65)
Inicializar el controlador de vista con atributos
Si deseas modificar sólo una instancia específica del controlador de vista de la interfaz de usuario de la tarjeta de contenido Braze, utiliza el inicializador init(braze:attributes:) inicializador para pasar una estructura personalizada Attributes al controlador de vista.
Por ejemplo, puedes cambiar el tamaño de la imagen y el radio de la esquina para una instancia concreta del controlador de vista:
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)
Celdas personalizadas mediante subclases
También puedes crear interfaces personalizadas registrando clases personalizadas para cada tipo de tarjeta que desees. Para utilizar tu subclase en lugar de la celda predeterminada, modifica la propiedad cells en la estructura Attributes. Por ejemplo:
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)
Modificar tarjetas de contenido mediante programación
Las tarjetas de contenido pueden modificarse mediante programación asignando el cierre transform a tu estructura Attributes. El ejemplo siguiente modifica las direcciones title y description de las tarjetas 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)
Consulta el ejemplo de aplicación Ejemplos para ver un ejemplo completo.
La personalización de las tarjetas de contenido a través de Attributes no es compatible con Objective-C.
Los estilos predeterminados de Braze se definen en CSS dentro del SDK de Braze. Anulando los estilos seleccionados en tu aplicación, es posible personalizar nuestra fuente estándar con tus propias imágenes de fondo, familias de fuentes, estilos, tamaños, animaciones y mucho más. Por instancia, el siguiente es un ejemplo de modificación que hará que las tarjetas de contenido aparezcan con un ancho de 800 px:
1
2
3
body .ab-feed {
width: 800px;
}
Ejemplos de personalización
Fuente personalizada
Personalizar el tipo de letra utilizado en tus tarjetas de contenido te permite mantener la identidad de tu marca y crear una experiencia visualmente atractiva para tus usuarios. Utiliza estas recetas para establecer la fuente de todas las tarjetas de contenido mediante programación.
Para cambiar la fuente predeterminada mediante programación, establece un estilo para las tarjetas y utiliza el atributo fontFamily para indicar a Braze que utilice tu familia de fuentes personalizada.
Por ejemplo, para actualizar el tipo de letra de todos los títulos de las tarjetas con imágenes subtituladas, anula el estilo Braze.ContentCards.CaptionedImage.Title y haz referencia a tu familia de fuentes personalizada. El valor del atributo debe apuntar a una familia de fuentes de tu directorio res/font.
Aquí tienes un ejemplo truncado con una familia de fuentes personalizada, my_custom_font_family, a la que se hace referencia en la última línea:
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>
Para más información sobre la personalización de fuentes en el SDK de Android, consulta la guía de familias de fuentes.
Para cambiar la fuente predeterminada mediante programación, puedes configurar titleTextStyle de ContentCardStyling.
También puedes configurar titleTextStyle para un tipo de tarjeta específico configurándolo en BrazeShortNewsContentCardStyling y pasándolo a 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
)
)
Personaliza tus fuentes personalizando la dirección Attributes de la propiedad de instancia cellAttributes. Por ejemplo:
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 personalización de fuentes a través de Attributes no es compatible con Objective-C.
Consulta la aplicación de muestra Ejemplos para ver un ejemplo de cómo crear tu propia interfaz de usuario con fuentes personalizadas.
Al igual que cualquier otro elemento Web, puedes personalizar fácilmente el aspecto de las tarjetas de contenido mediante CSS. En tu archivo CSS o en los estilos en línea, utiliza la propiedad font-family y especifica el nombre de la fuente deseada o la pila de fuentes.
1
2
3
4
/* CSS selector targeting the Content Card element */
.card-element {
font-family: "Helvetica Neue", Arial, sans-serif;
}
Iconos personalizados anclados
Al crear una tarjeta de contenido, los especialistas en marketing tienen la opción de anclarla. Una tarjeta anclada se mostrará en la parte superior de la fuente de un usuario y no podrá ser descartada por el usuario. Al personalizar los estilos de tus tarjetas, tienes la posibilidad de cambiar el aspecto del icono anclado.
Para establecer un icono personalizado anclado, anula el estilo de Braze.ContentCards.PinnedIcon. Tu activo de imagen personalizado debe declararse en el elemento android:src. Por ejemplo:
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>
Para cambiar el icono predeterminado anclado, puedes configurar el pinnedResourceId de ContentCardStyling. Por ejemplo:
1
2
3
4
ContentCardStyling(
pinnedResourceId = R.drawable.pushpin,
pinnedImageAlignment = Alignment.TopCenter
)
También puedes especificar un Composable en pinnedComposable de ContentCardStyling. Si se especifica pinnedComposable, anulará el valor 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."
)
}
}
)
Personaliza el ícono del pin modificando las propiedades pinIndicatorColor y pinIndicatorImage de la propiedad de instancia cellAttributes. Por ejemplo:
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)
También puedes utilizar la subclase para crear tu propia versión personalizada de BrazeContentCardUI.Cell, que incluye el indicador de pin. Por ejemplo:
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 personalización del indicador de pin mediante Attributes no es compatible con Objective-C.
La estructura del icono de la tarjeta anclada de contenido es:
1
2
3
<div class="ab-pinned-indicator">
<i class="fa fa-star"></i>
</div>
Si quieres utilizar un icono FontAwesome diferente, sólo tienes que sustituir el nombre de clase del elemento i por el nombre de clase del icono deseado.
Si quieres cambiar el icono por completo, elimina el elemento i y añade el icono personalizado como hijo de ab-pinned-indicator. Hay varias formas de hacerlo, pero un método sencillo sería replaceChildren() en el elemento ab-pinned-indicator.
Por ejemplo:
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);
Cambiar el color de los indicadores no leídos
Las tarjetas de contenido contienen una línea azul en la parte inferior de la tarjeta que indica si la tarjeta ha sido vista o no.
Cambia el color de la barra indicadora de no leídos modificando el valor en com_braze_content_cards_unread_bar_color en tu archivo 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>
Para cambiar el color de la barra indicadora de indicadores no leídos, modifica el valor de unreadIndicatorColor en ContentCardStyling:
1
2
3
ContentCardStyling(
unreadIndicatorColor = Color.Red
)
Cambia el color de la barra indicadora de no leídos asignando un valor al color de tinte de tu instancia BrazeContentCardUI.ViewController:
1
2
let viewController = BrazeContentCardUI.ViewController(braze: AppDelegate.braze)
viewController.view.tintColor = .systemGreen
Sin embargo, si sólo deseas modificar el indicador no visualizado, puedes acceder a la propiedad unviewedIndicatorColor de tu estructura BrazeContentCardUI.ViewController.Attributes. Si utilizas implementaciones de Braze UITableViewCell, debes acceder a la propiedad antes de que se dibuje la celda.
Por ejemplo, para establecer el color del indicador de no visto en rojo:
1
2
3
4
var attributes = BrazeContentCardUI.ViewController.Attributes.defaults
attributes.cellAttributes.unviewedIndicatorColor = .red
let viewController = BrazeContentCardUI.ViewController(braze: AppDelegate.braze, attributes: attributes)
Consulta el ejemplo de aplicación Ejemplos para ver un ejemplo completo.
Cambia el color de la barra indicadora de no leídos asignando un valor al color de tinte de tu BRZContentCardUIViewController:
1
2
BRZContentCardUIViewController *viewController = [[BRZContentCardUIViewController alloc] initWithBraze:AppDelegate.braze];
[viewController.view setTintColor:[UIColor systemGreenColor]];
En Objective-C no es posible personalizar sólo el indicador no visualizado a través de Attributes.
Para cambiar el color del indicador no leídos de una tarjeta, añade CSS personalizado a tu página web. Por ejemplo, para establecer el color del indicador de no visto en verde:
1
.ab-unread-indicator { background-color: green; }
Desactivar indicador no leídos
Oculta la barra de indicadores no leídos configurando setUnreadBarVisible en ContentCardViewHolder a false.
Desactivar el indicador de no leídos no es compatible con Jetpack Compose.
Oculta la barra de indicadores no leídos estableciendo la propiedad attributes.cellAttributes.unviewedIndicatorColor de tu estructura Attributes en .clear.
En Objective-C no es posible personalizar sólo el indicador no visualizado a través de Attributes.
Oculta la barra de indicadores no leídos añadiendo el siguiente estilo a tu css:
1
.ab-unread-indicator { display: none; }
Editar esta página en GitHub