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 * as 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 * as braze from "@braze/web-sdk";

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

Logging events

Log impression events when cards are viewed by users:

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

braze.logCardImpressions(cards, true);

Log card click events when users interact with a card:

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

braze.logCardClick(card, true);

Control group

If you use Braze’s default Content Cards feed, impressions and clicks will be automatically tracked.

If you use a custom integration for Content Cards, your integration needs to log impressions when a Control Card would have been seen.

Here is an example of how to determine if a Content Card is a “Control” card:

1
2
3
function isControlCard(card) {
    return card instanceof braze.ControlCard;
}