Content Card integration

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

The Braze Web SDK includes a Content Cards feed UI to speed up your integration efforts. If you would prefer to build your own UI instead, see the 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.

Content Card data model

The Content Cards data model is available in the Web SDK.

The Braze Web SDK offers three Content Card types: ImageOnly, CaptionedImage, and ClassicCard. Each type inherits common properties from a base model Card and has the following additional properties.

See Logging analytics for information on subscribing to card data.

Base Content Card model properties - Card

All Content Cards have these shared properties:

Image only Content Card properties - ImageOnly

ImageOnly cards are clickable full-sized images.

Captioned image Content Card properties - CaptionedImage

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

Classic Content Card properties - ClassicCard

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