콘텐츠 카드

Prerequisites

Before you can use Content Cards, you’ll need to integrate the Braze Swift SDK into your app. However, no additional setup is required.

View controller contexts

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

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

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.

Base card model

The Content Cards data model is available in the BrazeKit module of the Braze Swift SDK. This module contains the following Content Card types, which are an implementation of the Braze.ContentCard type. For a full list of Content Card properties and their usage, see ContentCard class.

• Image only
• Captioned image
• Classic
• Classic image
• Control

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