Tutorial: Making an Inbox with Content Cards
Follow along with the sample code in this tutorial to build an inbox with Braze Content Cards.
Prerequisites
Before you can use this feature, you’ll need to integrate the Android Braze SDK.
Making an Inbox with Content Cards for Android
We’re piloting this new tutorial format. Tell us what you think — your feedback helps us improve future guides.
1. Enable debugging (optional)
To make troubleshooting easier while developing, consider enabling debugging.
2. Build a UI view
We’re using Android’s RecyclerView to display Content Cards in this tutorial, but we recommend building a UI with classes and components that suit your use case(s). Braze provides UI by default, but here we create a custom view to have full control over the appearance and behavior.
3. Subscribe to Content Card updates
Use subscribeToContentCardsUpdates to allow your UI to respond when new Content Cards are available. Here, subscribers are registered and removed within the activity lifecycle hooks.
4. Build a custom inbox UI
Using the content card attributes such as title, description, and url allows you to build Content Cards to match your specific UI requirements. In this case, we’re building an inbox with Android’s native RecyclerView.
5. Track impressions and clicks
You can log impressions and clicks using the logImpressions and logClick methods available for Content Cards.
Impressions should only be logged once when a card is viewed by the user. Here, we use a naive mechanism to guard against duplicate logs with a per-card flag. Note that you may need to think through the view lifecycle of your app, as well as use case, so ensure impressions are logged correctly.
Prerequisites
Before you can use this feature, you’ll need to integrate the Swift Braze SDK. You’ll also need to enable in-app messages for Swift.
Making an Inbox with Content Cards for Swift
We’re piloting this new tutorial format. Tell us what you think — your feedback helps us improve future guides.
1. Enable debugging (optional)
To make troubleshooting easier while developing, consider enabling debugging.
2. Build a UI View
We’re using Swift’s UITableViewController in this tutorial, but we recommend building a UI with classes and components that suit your use case(s).
3. Subscribe to Content Card updates
Subscribe to the Content Cards listener to receive the latest updates, and then call requestRefresh() to request the latest Content Cards for that user.
4. Build a custom inbox UI
Using the content card attributes such as title, description, and imageUrl allows you to build Content Cards to match your specific UI requirements. In this case, we’re building an inbox with Swift’s native table APIs.
5. Track impressions and clicks
You can log impressions and clicks using the logClick(using:) and logImpression(using:) methods available for a content card.
Additionally, you can use LogDimissed(using:) for dimissals.
Impressions should only be logged once when viewed by the user. Here, a naive mechanism using a Set and willDisplay is used to achieve this. Note that you may need to think through the UI lifecycle of your app, as well as use case, to ensure impressions are logged correctly.
Prerequisites
Before you can use this feature, you’ll need to integrate the Web Braze SDK. However, no additional setup is required.
Making an Inbox with Content Cards for Web
We’re piloting this new tutorial format. Tell us what you think — your feedback helps us improve future guides.
1. Enable debugging (optional)
To make troubleshooting easier while developing, consider enabling debugging. You can also run braze web SDK methods in the console if you wish.
2. Build the UI
Create a UI for the inbox page. Here, we’re building a basic HTML page, which includes a div with the id cards-list. This will be used as the target container for rendering Content Cards.
3. Subscribe to Content Card updates
Subscribe to the Content Cards listener to receive the latest updates, and then call requestContentCardsRefresh() to request the latest Content Cards for that user.
4. Build the inbox elements
Using the content card attributes such as title, description, and url allows you to display Content Cards to match your specific UI requirements.
5. Track impressions and clicks
You can log impressions and clicks using the logContentCardImpressions and logContentCardClick methods available for Content Cards.
Additionally, you can use logCardDismissal for dismissals.
Impressions should only be logged once when viewed by the user. Here, an IntersectionObserver plus a Set keyed by card.id prevents duplicate logs. Note that you may need to think through the UI lifecycle of your app, as well as use case, to ensure impressions are logged correctly.