Content Card integration
This article covers how to set up Content Cards for React Native.
The Braze SDKs include a default card feed to get you started with Content Cards. To show the card feed, you can use the Braze.launchContentCards()
method. The default card feed included with the Braze SDK will handle all analytics tracking, dismissals, and rendering for a user’s Content Cards.
Customization
To build your own UI, you can get a list of available cards, and listen for updates to cards:
1
2
3
4
5
6
7
8
9
10
11
// set initial cards
const [cards, setCards] = useState([]);
// listen for updates as a result of card refreshes
Braze.addListener(Braze.Events.CONTENT_CARDS_UPDATED, async (update) => {
const updatedCards = await Braze.getContentCards();
setCards(updatedCards);
});
// trigger a refresh of cards
Braze.requestContentCardsRefresh();
If you choose to build your own UI to display cards, you must call logContentCardImpression
in order to receive analytics for those cards.
You can use these additional methods to build a custom Content Cards Feed within your app:
Method | Description |
---|---|
Braze.requestContentCardsRefresh() |
Requests the latest Content Cards from the Braze SDK server. |
Braze.getContentCards() |
Retrieves Content Cards from the Braze SDK. This will return the latest list of cards from the server. |
Braze.logContentCardClicked(cardId) |
Logs a click for the given Content Card ID. |
Braze.logContentCardImpression(cardId) |
Logs an impression for the given Content Card ID. |
Braze.logContentCardDismissed(cardId) |
Logs a dismissal for the given Content Card ID. |
Test displaying sample Content Card
Follow these steps to test a sample Content Card.
- Set an active user in the React application by calling the
Braze.changeUser('your-user-id')
method. - Head to Campaigns and follow this guide to create a new Content Card campaign.
- Compose your test Content Card campaign and head over to the Test tab. Add the same
user-id
as the test user and click Send Test. You should be able to launch a Content Card on your device shortly.
For more integrations, follow the Android integration instructions or the iOS integration instructions, depending on your platform.
A sample implementation of this can be found in BrazeProject within the React SDK.