Skip to content

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();

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.

  1. Set an active user in the React application by calling the Braze.changeUser('your-user-id') method.
  2. Head to Campaigns and follow this guide to create a new Content Card campaign.
  3. 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.

A Braze Content Card campaign showing you can add your own user ID as a test recipient to test your Content Card.

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.

WAS THIS PAGE HELPFUL?
New Stuff!