Create a custom UI
This article covers components of creating a custom UI for your web application.
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
A callback function can be registered to subscribe for updates when cards are refreshed.
important:
Content Cards will only refresh on session start if subscribeToContentCardsUpdates()
is called before openSession()
. You can always manually refresh Content Cards using requestContentCardsRefresh()
.
1
2
3
4
5
6
7
8
import * as braze from "@braze/web-sdk";
braze.subscribeToContentCardsUpdates(function(updates){
const cards = updates.cards;
// do something with the latest instance of `cards`
});
braze.openSession();
Logging events
Log impression events when cards are viewed by users:
1
2
3
import * as braze from "@braze/web-sdk";
braze.logCardImpressions([card1, card2, card3], 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);