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, such as:
// a new session, a manual refresh with `requestContentCardsRefresh()`, or after the timeout period
Braze.addListener(Braze.Events.CONTENT_CARDS_UPDATED, async (update) => {
    setCards(update.cards);
});

// Manually 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 Native SDK.

Content Card data model

The Content Cards data model is available in the React Native SDK. For a full reference of the Content Card data model, see the Android and iOS documentation.

The Braze React Native SDK has three unique Content Cards card types that share a base model: image only, captioned image, and classic.

There is also a special control card type, which is returned to users that are in the control group for a given card.

Each type inherits common properties from a base model and has the following additional properties.

Base Content Card model properties

The base card model provides foundational behavior for all cards.

For a full reference of the base card, see the Android and iOS documentation.

Image only Content Card model properties

Image only cards are clickable, full-sized images.

For a full reference of the image only card, see the Android and iOS documentation.

Captioned image Content Card model properties

Captioned image cards are clickable, full-sized images with accompanying descriptive text.

For a full reference of the captioned image card, see the Android and iOS documentation.

Classic Content Card model properties

Classic cards have a title, description, and an optional image on the left of the text.

For a full reference of the classic (text announcement) Content Card, see the Android and iOS documentation. For a full reference of the classic image (short news) card, see the Android and iOS documentation.

Control Content Card model properties

Control cards include all of the base properties, with a few important differences. Most importantly:

• The isControl property is guaranteed to be true.
• The extras property is guaranteed to be empty.

For a full reference of the control card, see the Android and iOS documentation.

GIF Support

• android
• ios