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