Skip to main content

Single card view

The Atomic SDKs allow you to render a single card in your host app. The single card view renders the first card in a chosen stream container, and resizes itself to match the size of the card it is displaying.

The card displayed in the single card view is the most recent card sent to the stream container. You may choose to have two stream containers in your app - one for your card list, and one for your single card view - with only specific cards sent to the single card view.

Within a single card view, toast messages, such as those seen when submitting, dismissing or snoozing a card in a stream container, do not appear. Pull to refresh functionality is also disabled, and the single card view’s container has a transparent background.

iOS​

Create an instance of AACSingleCardView, which is a UIView that is configured in the same way as a stream container. On instantiation, you supply the following parameters:

  1. The ID of the stream container to render in the single card view. The single card view renders only the first card that appears in that stream container;
  2. An object conforming to the AACSessionDelegate protocol, which is used to pass an authentication token to the SDK, and (if applicable) resolve runtime variables;
  3. A configuration object, which provides initial styling and presentation information to the SDK for the single card view.

The configuration options supplied using the configuration object above are the same as those for a stream container, except for presentationStyle, as the single card view does not display a header, and therefore does not show a button in its top left.

Swift

let config = AACConfiguration()
config.launchBackgroundColor = .white
config.launchIconColor = .blue
config.launchButtonColor = .blue
config.launchTextColor = .white
let cardView = AACSingleCardView(frame: view.bounds, containerId: 1234, sessionDelegate: self, configuration: config)
view.addSubview(cardView)

Objective-C

AACConfiguration *config = [[AACConfiguration alloc] init];
config.launchBackgroundColor = [UIColor whiteColor];
config.launchIconColor = [UIColor blueColor];
config.launchButtonColor = [UIColor blueColor];
config.launchTextColor = [UIColor whiteColor];
AACSingleCardView *singleCardView = [[AACSingleCardView alloc] initWithFrame:self.view.frame containerId:@(1234) sessionDelegate:self configuration:config];
[self.view addSubview:singleCardView];

You can set a delegate (conforming to AACSingleCardViewDelegate) on the single card view to be notified when the view changes height, either because a card is submitted, dismissed or snoozed, or because a new card arrived. This allows you to animate changes to the intrinsicContentSize of the single card view.

Android​

Use the AACSingleCardView.create method to create a single card view in your app. A single card view is configured in the same way as a stream container, taking the following arguments:

  • Your stream container ID as an Integer.
  • An AACSessionDelegate - this callback allows you to provide us with your user's JWT token as a string.
  • The fragment manager to use for navigation. If embedded in an Activity use getFragmentManager(); if embedding in a Fragment use getChildFragmentManager()
  • An optional callback - onChangeCardSize - which allows you to be notified when the single card view changes size (requires SDK version 0.6.0 and above).

Java

// Example in a fragment
public class MyFragment extends Fragment {
  @Override
  public void onStart() {
    super.onStart();

    final AACSingleCardView singleCard =
        AACSingleCardView.create(
            1234,
            () -> "authToken",
            this.getChildFragmentManager());

    singleCard.start(R.id.someView);
  }
}

Kotlin

// Example in an Activity
class MainActivity : Activity {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    val singleCard = AACSingleCardView.create(1234, object : AACSessionDelegate {
        override fun getToken(): String {
            return "authToken"
        }
    }, supportFragmentManager)

    singleCard.start(R.id.someView)
  }
}

Web​

Call the AtomicSDK.singleCard method, passing an element to embed the single card view within, and a configuration object for the SDK:

AtomicSDK.singleCard(document.querySelector("#embed"), {
  authToken: "<authToken>",
  onSizeChanged: (width, height) => {
    console.log(`The single card view now has a height of ${height}.`);
  },
});

All subviews - including card subviews, the snooze selection screen and full image/video views - display in a modal iframe, independent of the single card view.

You can target a populated single card view using the CSS class has-card, and populated modal subviews using the CSS class has-subview.

You can optionally add a callback - onSizeChanged - to your configuration object, to be notified when the single card view changes size. This happens when a card is actioned, dismissed or snoozed, or when a new card appears.

Single card view is available in iOS SDK version 0.12.0 and above, Web SDK version 0.11.0 and above, and Android SDK version 0.5.0 and above.

For more information on using this feature in the SDKs, see the relevant documentation for iOS, Android or Web.

Use cases​

Full-screen takeover​

You can use a single card view to implement a full-screen takeover in your app.

When there is a card to show, the single card view can appear on top of all other content in your app, and when there is no longer a card to show, the single card view can be hidden. This is implemented using custom code that you write, using the single card view callback that indicates when the single card view changes size.

To achieve this, you will require some additional code in your app:

  1. In your app, create one of the following, which displays on top of every other screen in your app:
    • A view/view controller (iOS);
    • A fragment/activity (Android);
    • A view (React Native/Flutter);
    • An HTML element (Web).
  2. Embed a single card view (AACSingleCardView) on this screen, as per the instructions above;
  3. Initially, the screen containing the single card view should be hidden;
  4. Monitor the size of your single card view, using the appropriate callback:
    • singleCardView:willChangeSize: on iOS;
    • onChangeCardSize on Android;
    • onSizeChanged on Web;
    • sizeDidChange on React Native;
    • onSizeChanged on Flutter.
  5. When the single card view's height changes to a non-zero height, present the full-screen takeover;
  6. When the single card view's height changes to zero, hide the full-screen takeover.
Last updated on