Skip to main content

UX considerations

The Atomic SDKs are designed with flexibility in mind, allowing you to integrate a stream of cards, or a single card, in a variety of ways. The available options are:

  • Stream container: Displays a list of cards, designed to be presented as a self-contained screen in your app at a specified size. As an example, this could be used to display a notification center to your customers.
  • Launcher: (Web SDK only): Displays a stream container as a floating layer on top of your app. The stream container is opened and closed using a trigger that sits in the bottom right of your page. The size of the stream container is automatically updated to accommodate the content being presented.
  • Single card view: Displays the first card in a list of cards, without any surrounding UI. Once this card is actioned, dismissed or snoozed, the next card in the list appears in its place. The single card view resizes automatically to accommodate the card it is displaying, while also adhering to the width you provide.

Options for embedding an Atomic stream container or single card view

iOS​

The Atomic iOS SDK allows you to present a stream container or single card view.

Options for embedding Atomic cards on iOS

Stream container​

You can present a stream container:

  • modally (with a close button in the top left);
  • within a navigation stack (with a back button in the top left);
  • inside of a tab bar;
  • embedded inside another screen. This would allow you to provide your own navigation bar or surrounding UI.

In each of these scenarios, you can opt to show a 'three-dot' icon in the top left of the navigation bar for the stream container. Tapping this button will trigger a custom action that you can define in code.

Single card view​

You can present a single card view anywhere in your app. Since single card views have been built as a view, they can be embedded alongside your other app content. They automatically resize to accommodate the card they are presenting, and your app is notified when the single card view changes size, so you can update the rest of your layout accordingly.

Android​

The Android SDK allows you to present a stream container or single card view.

Options for embedding Atomic cards on Android

Stream container​

You can present a stream container:

  • inside of another activity (screen), where the device's back button allows you to return to the previous screen;
  • within a tab bar;
  • embedded inside of another screen, provided that the screen supports fragments. This would allow you to provide your own surrounding UI.

In each of these scenarios, you can opt to show a 'three-dot' icon in the top right of the navigation bar for the stream container. Tapping this button will trigger a custom action that you can define in code.

Single card view​

You can present a single card view anywhere in your app, provided that the screen supports fragments. They automatically resize to accommodate the card they are presenting, and your app is notified when the single card view changes size, so you can update the rest of your layout accordingly.

Web​

The Web SDK allows you to present a stream container, stream container in launcher mode, or a single card view.

Options for embedding Atomic cards on Web

Stream container​

You can present a stream container anywhere in your web app. Stream containers in the Web SDK are implemented as an iframe, meaning that they can be presented inline with your content, positioned absolutely on the page or shown and hidden by clicking on a trigger button that you define.

Stream container in launcher mode​

The Web SDK supports an additional implementation option - the launcher. This is implemented as a stream container that automatically resizes itself to accommodate its content, without growing beyond the bounds of the browser window. A trigger button is provided which allows you to open and close the stream container. This trigger button is positioned in the bottom right of your page by default, although it can be re-positioned using CSS.

Single card view​

Single card views are implemented as an iframe, and can be presented anywhere in your app. They automatically resize to accommodate the card they are presenting, and your app is notified when the single card view changes size, so you can update the rest of your layout accordingly.

Displaying card count​

The Atomic SDKs allow you to retrieve the total number of cards in a stream container, which you can display in your app UI. For example, you may choose to show the card count as a badge.

APIs are available in each of our SDKs, to access a count of the total number of cards in a stream.

Using card count in your app

Try it out​

You can try out different implementation methods for stream containers and single card views using our demo apps for iOS, Android and Web:

  • iOS: Log in to the Atomic Demo app, tap the 'three-dot' icon in the top left of the screen, then tap 'Variant'. Choose from one of the following options:
    • Direct: Presents a stream container as the only screen in the app.
    • Footer: Presents a stream container as a tab within the app.
    • Modal: Presents a stream container when you tap on the bell icon in the top right of the app.
    • Content: Presents a stream container in a navigation stack when you tap on the 'View all' button.
    • Single Card: Displays a single card surrounded by arbitrary app UI.
  • Android: Log in to the Atomic Demo app, tap the 'three-dot' icon in the top right of the screen, and toggle the 'Single Card' checkbox on or off:
    • On: Displays a single card view when you tap on the 'Cards' tab.
    • Off: Displays a stream container when you tap on the 'Cards' tab.
  • Web: Log in to the Atomic Demo app, click the gear icon in the top right, and click 'Variant':
    • Standalone: Displays a stream container inside an iframe.
    • Launcher: Displays a stream container in launcher mode.
    • Single card: Displays a single card view.
Last updated on