Custom feed

The UI components of Content Cards are available in the BrazeUI library of the Swift SDK, allowing you to customize their appearance and behavior.

At Braze, we break down customization into different approaches based on the associated effort and level of flexibility provided. Configuring Content Cards using Attributes is the simplest option, allowing you to launch your Content Cards UI with minimal setup. Alternatively, you can create a custom view controller component that subscribes to data updates and logs analytics. The latter provides more control over the card behavior, such as displaying in a carousel or adding interactive elements, but requires you to ensure that impressions, dismissal events, and clicks are properly logged.

This article covers configuring your Content Cards using Attributes. For an example of implementing a custom view controller, see the carousel view use case.

Customizing UI

You can customize your Content Cards UI elements by modifying the Attributes struct of BrazeContentCardUI.ViewController. BrazeUI offers two ways to configure this object:

• Modifying the Attributes.defaults static variable
• Passing your Attributes struct to the BrazeContentCardUI/ViewController initializer

The following code snippets show how to style and change the default Content Cards using methods provided by the SDK. These methods allow you to customize all aspects of the Content Card UI, including custom fonts, customized color components, customized text, and more.

Modifying Attributes.defaults

Customize the look and feel of all instances of the Braze Content Card UI view controller by directly modifying the static Attributes.defaults variable. Refer to the code snippet below for an example:

• Swift

1
2
BrazeContentCardUI.ViewController.Attributes.defaults.cellAttributes.cornerRadius = 20
BrazeContentCardUI.ViewController.Attributes.defaults.cellAttributes.classicImageSize = CGSize(width: 65, height: 65)

Initializing the view controller with Attributes

If you wish to modify only a specific instance of the Braze Content Card UI view controller, initialize this instance with your own Attributes object:

• Swift

1
2
3
4
5
var attributes = BrazeContentCardUI.ViewController.Attributes.defaults
attributes.cellAttributes.cornerRadius = 20
attributes.cellAttributes.classicImageSize = CGSize(width: 65, height: 65)

let viewController = BrazeContentCardUI.ViewController(braze: AppDelegate.braze, attributes: attributes)

Creating custom cells by subclassing

Alternatively, you can create custom interfaces by registering custom classes for each desired card type. Braze provides five Content Card default templates: banner, captioned image, classic, classic image, and control. The Content Card cells may be subclassed and then used programmatically by overriding the cells property in the Attributes struct.

Alternatively, if you would like to provide your own custom interfaces, reference the following code snippets:

• Swift

1
2
3
4
5
var attributes = BrazeContentCardUI.ViewController.Attributes.defaults
// Register your own custom cell
attributes.cells[BrazeContentCardUI.ClassicImageCell.identifier] = CustomClassicImageCell.self

let viewController = BrazeContentCardUI.ViewController(braze: AppDelegate.braze, attributes: attributes)

Check out the Examples sample app for a complete example.

Modifying content cards

Content Cards can be changed programmatically by assigning the transform closure on your Attributes struct. The example below modifies the title and description of compatible cards:

• Swift

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var attributes = BrazeContentCardUI.ViewController.Attributes.defaults
attributes.transform = { cards in
  cards.map { card in
    var card = card
    if let title = card.title {
      card.title = "[modified] \(title)"
    }
    if let description = card.description {
      card.description = "[modified] \(description)"
    }
    return card
  }
}

let viewController = BrazeContentCardUI.ViewController(braze: AppDelegate.braze, attributes: attributes)