Skip to content

Content Cards

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.

Prerequisites

Before you can use this feature, you’ll need to integrate the Braze React Native SDK.

Customizing Content Cards

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:

Testing a Content Card

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

Content Card data model

The Content Cards data model is available in the React Native SDK and offers the following Content Cards card types: Image Only, Captioned Image, and Classic. There’s 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 in addition to its own unique properties.

Base card model

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

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

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

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 the classic image (short news) card, see the Android and iOS documentation.

Control

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

By default, the native Braze Android SDK does not provide animated GIF support for Content Cards—however, you can use a third-party image library to display GIFs instead. For more information, see Android Content Cards: GIFs.

By default, the Braze Swift SDK does not provide animated GIF support for Content Cards—however, you can wrap your own view or a third-party view in an instance of GIFViewProvider. For a full walkthrough, see Tutorial: GIF Support for Swift Content Cards.

HOW HELPFUL WAS THIS PAGE?
New Stuff!