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:

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.

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.