Skip to content

Personalizar el estilo de las tarjetas de contenido

Las tarjetas de contenido de 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 obtener la lista completa de tipos de tarjetas de contenido, consulta Acerca de las tarjetas de contenido.

Creación de 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.

Dos tarjetas de contenido, una con la fuente predeterminada y esquinas cuadradas, y otra con esquinas redondeadas y una fuente cursiva

Los estilos predeterminados de Braze se definen en CSS dentro del SDK de Braze. Al sobrescribir los estilos seleccionados en tu aplicación, puedes personalizar nuestra fuente estándar con tus propias imágenes de fondo, familias de fuentes, estilos, tamaños, animaciones y mucho más. Por ejemplo, lo siguiente es un ejemplo de sobrescritura que hace que las tarjetas de contenido aparezcan con un ancho de 800 px:

1
2
3

body .ab-feed {
  width: 800px;
}

Para obtener una lista completa de las propiedades que puedes modificar, consulta las opciones de configuración del SDK de Braze

Por defecto, las tarjetas de contenido del SDK de Android y FireOS se ajustan a las directrices de la interfaz de usuario estándar de Android para ofrecer una experiencia fluida. 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, sobrescribe este estilo predeterminado. Para sobrescribir un estilo, cópialo en su totalidad en el archivo styles.xml de tu proyecto y haz las 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 del SDK de Android y FireOS se ajustan a las directrices de la interfaz de usuario estándar de Android para ofrecer una experiencia fluida.

Puedes aplicar el estilizado de dos formas. La primera es pasar un ContentCardListStyling y ContentCardStyling a ContentCardsList, como en el siguiente ejemplo:

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 de Braze, como en el siguiente ejemplo:

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 de tarjetas de contenido te permite personalizar el aspecto y el comportamiento de todas las celdas mediante la estructura BrazeContentCardUI.ViewController.Attributes. 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.

Modificación de Attributes.default

Personaliza el aspecto de todas las instancias del controlador de vista de interfaz de usuario de tarjetas de contenido de Braze modificando directamente la variable estática Attributes.defaults.

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 solo una instancia específica del controlador de vista de interfaz de usuario de tarjetas de contenido de Braze, utiliza el inicializador init(braze:attributes:) 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

Puedes cambiar las tarjetas de contenido mediante programación asignando el cierre transform en tu estructura Attributes. El ejemplo siguiente modifica 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 la aplicación de ejemplo Examples para ver un ejemplo completo.

La personalización de las tarjetas de contenido a través de Attributes no es compatible con Objective-C.

Ejemplos de personalización

Fuente personalizada

Personalizar la fuente utilizada 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.

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;
}

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 la fuente de todos los títulos de las tarjetas con imágenes subtituladas, sobrescribe 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 en tu directorio res/font.

Aquí tienes un ejemplo abreviado 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 establecer el titleTextStyle de ContentCardStyling.

También puedes configurar titleTextStyle para un tipo de tarjeta específico estableciéndolo en BrazeShortNewsContentCardStyling y pasándolo al 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 modificando los 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 ejemplo Examples para ver un ejemplo de cómo crear tu propia interfaz de usuario con fuentes personalizadas.

Iconos de anclaje personalizados

Al crear una tarjeta de contenido, los especialistas en marketing tienen la opción de anclarla. Una tarjeta anclada se muestra en la parte superior de la fuente del usuario, y este no puede descartarla. A medida que personalizas los estilos de tus tarjetas, puedes cambiar el aspecto del icono de anclaje.

Vista en paralelo de la vista previa de la tarjeta de contenido en Braze para móvil y Web con la opción "Anclar esta tarjeta a la parte superior del feed" seleccionada.

La estructura del icono de anclaje de la tarjeta de contenido es:

1
2
3

<div class="ab-pinned-indicator">
  <i class="fa fa-star"></i>
</div>

Si deseas utilizar un icono FontAwesome diferente, puedes sustituir el nombre de clase del elemento i por el nombre de clase del icono deseado.

Si deseas cambiar el icono por completo, elimina el elemento i y añade el icono personalizado como elemento secundario de ab-pinned-indicator. Hay varias formas de cambiar el icono, pero un método sencillo es utilizar 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);

Para establecer un icono de anclaje personalizado, sobrescribe 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 de anclaje predeterminado, 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, este sobrescribe 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 icono de anclaje 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 subclases para crear tu propia versión personalizada de BrazeContentCardUI.Cell, que incluye el indicador de anclaje. 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 anclaje mediante Attributes no es compatible con Objective-C.

Cambiar el color del indicador de 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.

Dos tarjetas de contenido mostradas una al lado de la otra. La primera tarjeta tiene una línea azul en la parte inferior, lo que indica que no ha sido vista. La segunda tarjeta no tiene una línea azul, lo que indica que ya ha sido vista.

Para cambiar el color del indicador de 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; }

Cambia el color de la barra indicadora de no leídos modificando el valor de 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 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 deseas modificar solo el indicador de no visto, puedes acceder a la propiedad unviewedIndicatorColor de tu estructura BrazeContentCardUI.ViewController.Attributes. Si utilizas implementaciones UITableViewCell de Braze, accede 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 la aplicación de ejemplo Examples 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 solo el indicador de no visto a través de Attributes.

Modo oscuro

Para mostrar diferentes imágenes o estilos según el modo oscuro o claro del dispositivo, utiliza pares clave-valor en tu mensaje de tarjeta de contenido. Por ejemplo, añade un par clave-valor como dark_mode_image con la URL de tu activo de imagen para modo oscuro. Luego, en tu aplicación, añade lógica personalizada para comprobar el modo de apariencia actual del dispositivo y mostrar la imagen adecuada.

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
}

Este patrón funciona para cualquier contenido que dependa de la apariencia, incluyendo texto, colores o diseños. Carga tus activos de imagen para modo oscuro en la biblioteca de medios y luego haz referencia a ellos en un par clave-valor.

Desactivar el indicador de no leídos

Oculta la barra del indicador de no leídos añadiendo el siguiente estilo a tu css:

1

.ab-unread-indicator { display: none; }

Oculta la barra del indicador de no leídos configurando setUnreadBarVisible en ContentCardViewHolder como false.

Desactivar el indicador de no leídos no es compatible con Jetpack Compose.

Oculta la barra del indicador de no leídos estableciendo la propiedad attributes.cellAttributes.unviewedIndicatorColor de tu estructura Attributes en .clear.

En Objective-C no es posible personalizar solo el indicador de no visto a través de Attributes.
Github   Editar esta página en GitHub
New Stuff!