Content Card integration

This reference article covers the Content Card integration and the different data models and card-specific properties available for your Swift application.

The default Content Cards UI can be integrated from the BrazeUI library of the Braze SDK. Create the Content Cards view controller using the braze instance. If you wish to intercept and react to the Content Card UI lifecycle, implement BrazeContentCardUIViewControllerDelegate as the delegate for your BrazeContentCardUI.ViewController.

The BrazeUI library of the Swift SDK provides two default view controller contexts: navigation or modal. This means you can integrate Content Cards in these contexts by adding a few lines of code to your app or site. Both views offer customization and styling options as described in the customization guide. You can also create a custom Content Card view controller instead of using the standard Braze one for even more customization options—refer to the Content Cards UI tutorial for an example.

Navigation context

A navigation controller is a view controller that manages one or more child view controllers in a navigation interface. Here is an example of pushing a BrazeContentCardUI.ViewController instance into a navigation controller:

• swift
• objective-c

1
2
3
4
5
6
7
func pushViewController() {
  guard let braze = AppDelegate.braze else { return }
  let contentCardsController = BrazeContentCardUI.ViewController(braze: braze)
  // Implement and set `BrazeContentCardUIViewControllerDelegate` if you wish to intercept click actions.
  contentCardsController.delegate = self
  self.navigationController?.pushViewController(contentCardsController, animated: true)
}

1
2
3
4
5
6
- (void)pushViewController {
  BRZContentCardUIViewController *contentCardsController = [[BRZContentCardUIViewController alloc] initWithBraze:self.braze];
  // Implement and set `BrazeContentCardUIViewControllerDelegate` if you wish to intercept click actions.
  [contentCardsController setDelegate:self];
  [self.navigationController pushViewController:contentCardsController animated:YES];
}

Modal context

Use modal presentations to create temporary interruptions in your app’s workflow, such as prompting the user for important information. This model view has a navigation bar on top and a Done button on the side of the bar. Here is an example of pushing a BrazeContentCard.ViewController instance into a modal controller:

• swift
• objective-c

1
2
3
4
5
6
7
func presentModalViewController() {
  guard let braze = AppDelegate.braze else { return }
  let contentCardsModal = BrazeContentCardUI.ModalViewController(braze: braze)
  // Implement and set `BrazeContentCardUIViewControllerDelegate` if you wish to intercept click actions.
  contentCardsModal.viewController.delegate = self
  self.navigationController?.present(contentCardsModal, animated: true, completion: nil)
}

1
2
3
4
5
6
- (void)presentModalViewController {
  BRZContentCardUIModalViewController *contentCardsModal = [[BRZContentCardUIModalViewController alloc] initWithBraze:AppDelegate.braze];
  // Implement and set `BrazeContentCardUIViewControllerDelegate` if you wish to intercept click actions.
  [contentCardsModal.viewController setDelegate:self];
  [self.navigationController presentViewController:contentCardsModal animated:YES completion:nil];
}

For example usage of BrazeUI view controllers, check out the corresponding Content Cards UI samples in our Examples app.

Content Cards data model

The Content Cards data model is available in the BrazeKit module of the iOS Swift SDK.

Braze offers five Content Card types: image only, captioned image, classic, classic image, and control. Each type is an implementation of the Braze.ContentCard type. Note that BrazeKit offers an alternative ContentCardRaw class for Objective-C compatibility.

For a full list of Content Card properties, as well as details about using Content Cards, refer to the ContentCard class documentation.

To access the Content Cards data model, call contentCards.cards on your braze instance. See Logging analytics for more information on subscribing to card data.

Card methods

Each card is initialized with a Context object, which contains various methods for managing your card’s state. Call these methods when you want to modify the corresponding state property on a particular card object.

For more details, refer to the Context class documentation