Content Cards for Web Integration

To toggle display of Content Cards through the Braze Web SDK, call:


This method will toggle the visibility of the Content Cards. By default, if no arguments are provided, all Content Cards will be shown in a fixed-position sidebar on the right-hand side of the page.

Parameters Description
parentNode The HTML node to render the content cards into. If the parent node already has a Braze content cards view as a direct descendant, the existing content cards will be replaced.
filterFunction A filter/sort function for cards displayed in this view. Invoked with the array of ab.Card objects, sorted by {pinned, date}. Expected to return an array of sorted ab.Card objects to render for this user. If omitted, all cards will be displayed.

See the JS docs for more information on toggling Content Cards.

Control Group

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

If you use a custom integration for Content Cards, your integration needs to log impressions when a Control Card would have been seen.

Here is an example of how to determine if a Content Card is a “Control” card:

function isControlCard(card) {
    return card instanceof appboy.ControlCard;

Other Methods to Note

Method Description Link
showContentCards() Display the user’s Content Cards. JS Docs for showContentCards
hideContentCards() Hide any Braze content cards currently showing. JS Docs for hideContentCards
toggleContentCards() Toggle the visibility of the Content Cards. JS Docs for showContentCards
getCachedContentCards() Get all currently available cards from the last content cards refresh. JS Docs for getCachedContentCards
subscribeToContentCardsUpdates(subscriber) Subscribe to content cards updates.
The subscriber callback will be called whenever content cards are updated.
JS Docs for subscribeToContentCardsUpdates
New Stuff!