Content Cards Customization

Customizing The Default UI

Braze UI elements come with a default look and feel that matches the composers within the Braze Dashboard and aims for consistency with other Braze mobile platforms. Braze’s default styles are defined in CSS within the Braze SDK.

By overriding selected styles in your application, it is possible to customize our standard feed with your own background images, font families, styles, sizes, animations, and more. For instance, the following is an example override that will cause Content Cards to appear 800px wide:

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

Create a Custom UI

Refreshing The Feed

To refresh and sync a user’s feed with Braze servers, use the requestContentCardsRefresh method.

1
2
3
4
5
import braze from "@braze/web-sdk"

function refresh(){
  braze.requestContentCardsRefresh();    
}

Listening for card updates

When cards are refreshed, a callback function can be subscribed to:

1
2
3
4
5
6
import braze from "@braze/web-sdk"

braze.subscribeToContentCardsUpdates(function(updates){
  const cards = updates.cards;
  // do something with the latest instance of `cards`
});

Logging Analytics Events

Log impression events when cards are viewed by users.

1
2
3
import braze from "@braze/web-sdk"

braze.logCardImpressions(cards, true);

Log card click events when users interact with a card.

1
2
3
import braze from "@braze/web-sdk"

braze.logCardClick(card, true);

Other Methods to Note

Method Description Link
logCardImpressions Logs an impression event for the given list of cards. This is required when using a customized UI and not the Braze UI. JS Docs for logCardImpressions
logCardClick Logs an click event for a given card. This is required when using a customized UI and not the Braze UI. JS Docs for logCardClick
showContentCards Display the user’s Content Cards. JS Docs for showContentCards
hideContentCards Hide any Braze content cards currently showing. JS Docs for hideContentCards
toggleContentCards Display the user’s content cards. JS Docs for toggleContentCards
getCachedContentCards() Get all currently available cards from the last content cards refresh. JS Docs for getCachedContentCards
subscribeToContentCardsUpdates(subscriber) Subscribe to content cards updates.
The subscriber callback will be called whenever content cards are updated.
JS Docs for subscribeToContentCardsUpdates
dismissCard() Dismiss the card programmatically (available in v2.4.1). JS Docs for dismissCard
WAS THIS PAGE HELPFUL?
New Stuff!