Skip to content

Customize Content Cards

This article provides a breakdown in the different customization options available as part of your Content Card implementation. For technical details, visit our developer documentation for Android, iOS, or Web.

Customizing Content Cards and the feed they are located in can’t be done during the campaign creation process—you must work with your engineers and developers to build and customize your cards.

Customization approaches

Content Cards are fully customizable! At Braze, we break down customization into three different approaches based on the associated effort and level of flexibility provided. These approaches are referred to as “crawl”, “walk”, or “run”.

  • Crawl: Take advantage of Braze’s basic Content Card styling options for a quick, low-effort implementation.
  • Walk: Add some custom styling to the default Content Cards to better match your brand experience.
  • Run: Customize every part of your Content Card campaigns, from style to behavior to cross-channel connections.

Sample finance app showing Captioned Image and Banner Content Cards

Best suited for teams with limited developer resources, the Crawl approach relies solely on Content Card templates to get you up and running with Content Cards with less than five lines of code.

With this approach, customization is in the hands of marketers, who determine the content, audience, and timing of each Content Card directly in Braze. Some light development work is needed upfront to decide where Content Cards will appear in your app or website, and styling options are limited.

Customization Description
Effort Low
Card style Choose from three Braze templates.
Card behavior Choose from three on-click behavior options.
Card order Newer Content Cards appear toward the top of the feed. Pinned cards stay at the very top.
Analytics tracking Content Card analytics are captured in Braze.
Key-value pairs Optional, powers additional UI/UX customization.

Sample finance app showing Content Cards with customization

A hybrid approach to implementation, the Walk approach involves both marketing and developer teams pitching in to match your app or site’s branding.

During the implementation process, developers write custom code to match the look and feel of Content Cards to that of your brand. This includes font type, font size, rounded corners, and colors. This approach still uses the default Content Cards, however, template styling is handled programmatically by your developers.

Marketers still maintain control of the audience, content, on-click behavior, expiration, and pinning directly in the Braze dashboard.

Customization Description
Effort Low
Card style Choose from three Braze templates or use your own developer-created templates.
Card behavior Choose from three on-click behavior options.
Card order Newer Content Cards appear toward the top of the feed. Pinned cards stay at the very top.
Analytics tracking Content card analytics are captured in Braze.
Key-value pairs Optional, powers additional UI/UX customization.

Sample finance app showing custom Content Cards with email capture

With the Run approach, developers take the lead with full control of the Content Card user experience. Custom code dictates what the cards will look like, how they behave, and how they interact with other messaging channels (e.g., triggering a Content Card based on a push notification).

The Braze SDK does not handle the on-click behavior, order, or analytics. These traits must be handled programmatically by the developer for marketers to access valuable Content Card metrics in the Braze dashboard—like impressions, clicks, and dismissals.

Customization Description
Effort Depends on use case.
Card style Custom
Card behavior Custom
Card order Custom
Analytics tracking Custom
Key-value pairs Required

Use cases

  • Multiple Content Card feeds, such as adding a newsfeed, notification center, or promotions tab.
  • Display Content Cards in an existing feed.
  • Display Content Cards in a carousel view.
  • Use a Content Card to capture user information.
  • Trigger Content Cards based on other messaging channels.

Change “empty feed” language

You can change the language that appears automatically in empty Content Card feeds by redefining the localizable content card strings in your app’s localizable strings file:

1
2
3
4
5
"Appboy.content-cards.no-card.text" = "No Cards!!!!";
"Appboy.content-cards.done-button.title" = "Done";
"Appboy.content-cards.no-card.text" = "We have no updates.\nCheck again later.";
"Appboy.content-cards.no-connection.title" = "Connection Error";
"Appboy.content-cards.no-connection.message" = "Cannot establish network connection.\nPlease try again later.";
WAS THIS PAGE HELPFUL?
New Stuff!