Content Cards

This article covers Content Card integration for Web, including Content Card data models, standard feed UI options, and additional card methods.

Prerequisites

Before you can use Content Cards, you’ll need to integrate the Braze Web SDK into your app. However, no additional setup is required. To build your own UI instead, see Content Card Customization Guide.

Standard feed UI

To use the included Content Cards UI, you’ll need to specify where to show the feed on your website.

In this example, we have a <div id="feed"></div> in which we want to place the Content Cards feed. We’ll use three buttons to hide, show, or toggle (hide or show based on its current state) the feed.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<button id="toggle" type="button">Toggle Cards Feed</button>
<button id="hide" type="button">Hide Cards Feed</button>
<button id="show" type="button">Show Cards Feed</button>

<nav>
    <h1>Your Personalized Feed</h1>
    <div id="feed"></div>
</nav>

<script> 
   const toggle = document.getElementById("toggle");
   const hide = document.getElementById("hide");
   const show = document.getElementById("show");
   const feed = document.getElementById("feed");
    
   toggle.onclick = function(){
      braze.toggleContentCards(feed);    
   }
    
   hide.onclick = function(){
      braze.hideContentCards();
   }
    
   show.onclick = function(){
      braze.showContentCards(feed);    
   }
</script>

When using the toggleContentCards(parentNode, filterFunction) and showContentCards(parentNode, filterFunction) methods, if no arguments are provided, all Content Cards will be shown in a fixed-position sidebar on the right-hand side of the page. Otherwise, the feed will be placed in the specified parentNode option.

See the SDK reference docs for more information on Content Card toggling.

Card types and properties

The Content Cards data model is available in the Web SDK and offers the following Content Card types: ImageOnly, CaptionedImage, and ClassicCard. Each type inherits common properties from a base model Card and has the following additional properties.

Base card model

All Content Cards have these shared properties:

Image only

ImageOnly cards are clickable full-sized images.

Captioned image

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

Classic

The ClassicCard model can contain an image with no text or a text with image.

Control group

If you use the default Content Cards feed, impressions and clicks will be automatically tracked.

If you use a custom integration for Content Cards, you need need log impressions when a Control Card would have been seen. As part of this effort, make sure to handle Control cards when logging impressions in an A/B test. These cards are blank, and while they aren’t seen by users, you should still log impressions in order to compare how they perform against non-Control cards.

To determine if a Content Card is in the Control group for an A/B test, check the card.isControl property (Web SDK v4.5.0+) or check if the card is a ControlCard instance (card instanceof braze.ControlCard).

Card methods

For more details, refer to the SDK reference documentation