Skip to content

Personalize o estilo dos Cartões de conteúdo

Os Cartões de conteúdo da Braze vêm com uma aparência padrão. Este artigo cobre opções de estilo para seus Cartões de conteúdo para ajudar você a manter a identidade da sua marca. Para a lista completa de tipos de cartões de conteúdo, veja Sobre os Cartões de conteúdo.

Criando um estilo personalizado

A interface padrão dos Cartões de conteúdo é importada da camada de interface do SDK da Braze. A partir daí, você pode ajustar certas partes do estilo do cartão, a ordem em que os cartões são exibidos e como o feed é mostrado aos seus usuários.

Dois cartões de conteúdo, um com a fonte padrão e cantos quadrados, e outro com cantos arredondados e uma fonte cursiva

Os estilos padrão da Braze são definidos em CSS no SDK da Braze. Ao sobrescrever estilos selecionados no seu aplicativo, você pode personalizar nosso feed padrão com suas próprias imagens de fundo, famílias de fontes, estilos, tamanhos, animações e mais. Por exemplo, a seguir temos um exemplo de sobrescrita que faz com que os Cartões de conteúdo apareçam com 800 px de largura:

1
2
3

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

Para a lista completa de propriedades que você pode modificar, veja as opções de configuração do SDK da Braze

Por padrão, os Cartões de conteúdo do SDK do Android e do FireOS seguem as diretrizes padrão de interface do Android para proporcionar uma experiência integrada. Você pode ver esses estilos padrão no arquivo res/values/styles.xml na distribuição do SDK da 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 o estilo do seu cartão de conteúdo, sobrescreva este estilo padrão. Para sobrescrever um estilo, copie-o na íntegra para o arquivo styles.xml do seu projeto e faça as modificações. O estilo inteiro deve ser copiado para o seu arquivo styles.xml local para que todos os atributos sejam configurados corretamente.

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 padrão, os Cartões de conteúdo do SDK do Android e do FireOS seguem as diretrizes padrão de interface do Android para proporcionar uma experiência integrada.

Você pode aplicar estilo de duas maneiras. A primeira é passar um ContentCardListStyling e ContentCardStyling para ContentCardsList, como no exemplo a seguir:

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
        )
    )
)

A segunda é usar BrazeStyle para criar um estilo global para os componentes da Braze, como no exemplo a seguir:

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
}

O view controller de Cartões de conteúdo permite que você personalize a aparência e o comportamento de todas as células por meio da struct BrazeContentCardUI.ViewController.Attributes. Configurar Cartões de conteúdo usando Attributes é uma opção simples, permitindo que você lance sua interface de Cartões de conteúdo com configuração mínima.

Modificando Attributes.default

Personalize a aparência de todas as instâncias do view controller de interface de Cartões de conteúdo da Braze modificando diretamente a variável estática Attributes.defaults.

Por exemplo, para alterar o tamanho padrão da imagem e o raio do canto para todas as células:

1
2

BrazeContentCardUI.ViewController.Attributes.defaults.cellAttributes.cornerRadius = 20
BrazeContentCardUI.ViewController.Attributes.defaults.cellAttributes.classicImageSize = CGSize(width: 65, height: 65)

Inicializando o view controller com Attributes

Se você deseja modificar apenas uma instância específica do view controller de interface de Cartões de conteúdo da Braze, use o inicializador init(braze:attributes:) para passar uma struct Attributes personalizada para o view controller.

Por exemplo, você pode alterar o tamanho da imagem e o raio do canto para uma instância específica do view controller:

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)

Personalizando células por subclasse

Como alternativa, você pode criar interfaces personalizadas registrando classes personalizadas para cada tipo de cartão desejado. Para usar sua subclasse em vez da célula padrão, modifique a propriedade cells na struct Attributes. Por exemplo:

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)

Modificando Cartões de conteúdo programaticamente

Você pode alterar os Cartões de conteúdo programaticamente atribuindo o closure transform na sua struct Attributes. O exemplo abaixo modifica o title e o description de cartões compatíveis:

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)

Confira o app de exemplo Examples para um exemplo completo.

A personalização de Cartões de conteúdo por meio de Attributes não é compatível com Objective-C.

Exemplos de personalização

Fonte personalizada

Personalizar a fonte usada nos seus Cartões de conteúdo permite que você mantenha a identidade da sua marca e crie uma experiência visualmente atraente para seus usuários. Use estas receitas para definir a fonte de todos os Cartões de conteúdo programaticamente.

Assim como qualquer outro elemento web, você pode personalizar facilmente a aparência dos Cartões de conteúdo por meio de CSS. No seu arquivo CSS ou em estilos inline, use a propriedade font-family e especifique o nome da fonte desejada ou a pilha de fontes.

1
2
3
4

/* CSS selector targeting the Content Card element */
.card-element {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

Para alterar a fonte padrão programaticamente, defina um estilo para os cartões e use o atributo fontFamily para instruir a Braze a usar sua família de fontes personalizada.

Por exemplo, para atualizar a fonte em todos os títulos de cartões de imagem com legenda, sobrescreva o estilo Braze.ContentCards.CaptionedImage.Title e faça referência à sua família de fontes personalizada. O valor do atributo deve apontar para uma família de fontes no seu diretório res/font.

Aqui está um exemplo resumido com uma família de fontes personalizada, my_custom_font_family, referenciada na última linha:

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 saber mais sobre a personalização de fontes no SDK do Android, consulte o guia de famílias de fontes.

Para alterar a fonte padrão programaticamente, você pode definir o titleTextStyle de ContentCardStyling.

Você também pode definir titleTextStyle para um tipo de cartão específico configurando-o em BrazeShortNewsContentCardStyling e passando-o para o 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
    )
)

Personalize suas fontes ajustando os Attributes da propriedade de instância cellAttributes. Por exemplo:

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)

A personalização de fontes via Attributes não é compatível com Objective-C.

Confira o app de exemplo Examples para um exemplo de como criar sua própria interface com fontes personalizadas.

Ícones fixados personalizados

Ao criar um cartão de conteúdo, os profissionais de marketing têm a opção de fixar o cartão. Um cartão fixado é exibido no topo do feed do usuário, e o usuário não pode descartá-lo. À medida que você personaliza os estilos dos seus cartões, pode alterar a aparência do ícone fixado.

Lado a lado da prévia do cartão de conteúdo na Braze para celular e web com a opção "Fixar este cartão no topo do feed" selecionada.

A estrutura do ícone fixado do cartão de conteúdo é:

1
2
3

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

Se você quiser usar um ícone diferente do FontAwesome, basta substituir o nome da classe do elemento i pelo nome da classe do ícone desejado.

Se você quiser trocar o ícone completamente, remova o elemento i e adicione o ícone personalizado como filho de ab-pinned-indicator. Existem várias maneiras de alterar o ícone, mas um método simples é usar replaceChildren() no elemento ab-pinned-indicator.

Por exemplo:

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 definir um ícone fixado personalizado, sobrescreva o estilo Braze.ContentCards.PinnedIcon. Seu ativo de imagem personalizado deve ser declarado no elemento android:src. Por exemplo:

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 alterar o ícone fixado padrão, você pode definir o pinnedResourceId de ContentCardStyling. Por exemplo:

1
2
3
4

ContentCardStyling(
    pinnedResourceId = R.drawable.pushpin,
    pinnedImageAlignment = Alignment.TopCenter
)

Você também pode especificar um Composable em pinnedComposable de ContentCardStyling. Se pinnedComposable for especificado, ele sobrescreve o 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."
            )
        }
    }
)

Personalize o ícone de fixação modificando as propriedades pinIndicatorColor e pinIndicatorImage da propriedade de instância cellAttributes. Por exemplo:

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)

Você também pode usar subclasse para criar sua própria versão personalizada de BrazeContentCardUI.Cell, que inclui o indicador de fixação. Por exemplo:

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)

A personalização do indicador de fixação via Attributes não é compatível com Objective-C.

Alterando a cor do indicador de não lido

Os Cartões de conteúdo contêm uma linha azul na parte inferior do cartão que indica se o cartão foi visualizado ou não.

Dois Cartões de conteúdo exibidos lado a lado. O primeiro cartão tem uma linha azul na parte inferior, indicando que não foi visto. O segundo cartão não tem uma linha azul, indicando que já foi visto.

Para alterar a cor do indicador de não lido de um cartão, adicione CSS personalizado à sua página web. Por exemplo, para definir a cor do indicador não visualizado como verde:

1

.ab-unread-indicator { background-color: green; }

Altere a cor da barra indicadora de não lido modificando o valor de com_braze_content_cards_unread_bar_color no seu arquivo 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 alterar a cor da barra do indicador de não lido, modifique o valor de unreadIndicatorColor em ContentCardStyling:

1
2
3

ContentCardStyling(
    unreadIndicatorColor = Color.Red
)

Altere a cor da barra indicadora de não lido atribuindo um valor à cor de tonalidade da sua instância BrazeContentCardUI.ViewController:

1
2

let viewController = BrazeContentCardUI.ViewController(braze: AppDelegate.braze)
viewController.view.tintColor = .systemGreen

No entanto, se você quiser modificar apenas o indicador não visualizado, pode acessar a propriedade unviewedIndicatorColor da sua struct BrazeContentCardUI.ViewController.Attributes. Se você usar implementações de UITableViewCell da Braze, acesse a propriedade antes que a célula seja desenhada.

Por exemplo, para definir a cor do indicador não visualizado como vermelho:

1
2
3
4

var attributes = BrazeContentCardUI.ViewController.Attributes.defaults
attributes.cellAttributes.unviewedIndicatorColor = .red

let viewController = BrazeContentCardUI.ViewController(braze: AppDelegate.braze, attributes: attributes)

Confira o app de exemplo Examples para um exemplo completo.

Altere a cor da barra indicadora de não lido atribuindo um valor à cor de tonalidade do seu BRZContentCardUIViewController:

1
2

BRZContentCardUIViewController *viewController = [[BRZContentCardUIViewController alloc] initWithBraze:AppDelegate.braze];
[viewController.view setTintColor:[UIColor systemGreenColor]];

A personalização apenas do indicador não visualizado via Attributes não é compatível com Objective-C.

Modo escuro

Para exibir imagens ou estilos diferentes com base no modo escuro ou claro do dispositivo, use pares de chave-valor na mensagem do seu cartão de conteúdo. Por exemplo, adicione um par de chave-valor como dark_mode_image com a URL do seu ativo de imagem para modo escuro. Em seguida, no seu app, adicione lógica personalizada para verificar o modo de aparência atual do dispositivo e exibir a imagem apropriada.

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
}

Esse padrão funciona para qualquer conteúdo que dependa da aparência, incluindo texto, cores ou layouts. Faça upload dos seus ativos de imagem para modo escuro na biblioteca de mídia e, em seguida, referencie-os em um par de chave-valor.

Desativando o indicador de não lido

Oculte a barra indicadora de não lido adicionando o seguinte estilo ao seu css:

1

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

Oculte a barra indicadora de não lido configurando setUnreadBarVisible em ContentCardViewHolder como false.

Desativar o indicador de não lido não é compatível com Jetpack Compose.

Oculte a barra indicadora de não lido definindo a propriedade attributes.cellAttributes.unviewedIndicatorColor na sua struct Attributes como .clear.

A personalização apenas do indicador não visualizado via Attributes não é compatível com Objective-C.
Github   Editar esta página no GitHub
New Stuff!