Skip to main content

Introduction to the workbench

The Atomic Workbench

Workbench Access

The Workbench is Atomic's back office system of managing cards and their configuration. It is also where you send test cards from. You can access the Workbench at: https://workbench.atomic.io/. Bookmark this link in your browser.

Issues logging in?

Before you can log in, you need to create an account. This is done by clicking on the link in the email invite.

Need an invite? Ask your Atomic team owner to invite you as a Workbench member.

Atomic workbench card template editor Atomic workbench card template editor

Workbench Orientation

Switch environments by selecting the dropdown menu in the top left corner Switch environments by selecting the dropdown menu in the top left corner

Your Atomic Organization comes with one or more Environments. There will be one called Sandbox which is preloaded with sample cards that showcase Atomic features and functionality.

Atomic workbench areas

There are seven high level areas of the Workbench, accessed via the menu on the left hand margin:

  1. The Cards tab is where you can view and manage all of your Cards. You can also send test cards from here.
  2. The Customers section is where you can view and manage users so you can send targeted and personalized messages.
  3. The Insights section where you can see rich analytics without leaving the Workbench, including tracking card-level metrics and activity across time and between device platforms.
  4. The Tools section is where you can find a variety of tools:
    1. Configuration
      1. Event SDK request debugger: shows the last 100 failed client API requests, to help with debugging your SDK integration.
      2. Analytics Debugger: lets you inspect recently received analytics events. There isn’t a long history of events or filtering capability yet, as it is intended mainly for debugging.
    2. Testing
      1. Test Action Flow sender: for sending bulk testing cards
    3. Operations
      1. Analytics exporter: where you can batch extract analytics data. It is processed in hourly batches, and available for retrieval as newline-delimited JSON or parquet from the Atomic API.
    4. Security
      1. Audit log: a log of user actions within your organisation. (currently in preview)
  5. The Configuration section is where you can configure Atomic:
    1. SDK: for your developers and designers to configure your account, including API keys and container themes.
    2. API: for your developers to configure your account.
    3. Card Templates: configure the approval process for card templates.
    4. Customer profiles: create custom fields and edit tags which are available for managing customers.
    5. Webhooks: configure all account webhooks.
    6. Testing: create and manage test accounts for your SDK integrations
  6. The Preferences section is where you can switch between your environments, manage 2FA, and log out. You can access it by clicking your avatar in the top right corner.
    1. Profile: manage your personal details and 2FA.
    2. Manage Organization: change your organization name and configure MFA.
    3. Manage Environments: add and edit environments.
    4. Workbench members: for managing your team members and permissions.

Demo Apps Access

The Atomic Demo Apps are where you can view test cards.

Atomic Demo apps are available for iOS, Android, and Web.

We made demo apps so you can start sending yourselves test cards straight away, without having to install our SDKs into your own apps.

info

Atomic is a white labelled product, so downloading the Atomic Demo Apps is not something your customers will have to do. They will simply download your own app and access their action cards there.

/img/tutorials/cards_demo.png

How to access Atomic Demo Apps

See more instructions on getting and configuring the mobile Atomic Demo App in the Demo apps guide.

Log in to the Web Demo App from the Workbench

Requires Admin access

If you have admin access you can access the Web Demo App directly from the workbench.

Open Test Account settings: Configuration > Testing > Test Accounts > New magic auth link

magic_link.jpg

Select the container you want to view, then Open demo app.

magic_auth_link.png

Containers and streams

A stream is a collection of cards. Every card is always assigned to the All cards stream, but can be assigned to multiple streams. One stream can be assigned to multiple containers.

A container contains one stream of cards. The container is the object inside your apps that renders cards. Each container references one Theme (or two, if you’d like to add a dark mode option).

These concepts are explained in more detail in the Streams and containers guide.

Scan the QR code to open the demo app on your mobile device

In the workbench:

  1. Click Atomic Connect.

Atomic-connect.png

  1. Select the Container you want to send test cards to.
  2. Select which Test account you want to send test cards to (your own account is selected by default).
  3. Open the camera app on your mobile device, scan the QR code. Atomic Connect will then open.

QR-code.png

Alternatively, you can also Copy link and open on any of your devices.

Log into any Atomic Demo App directly

You can log into any Atomic Demo App directly, by using your Workbench username and Password. Then you can easily configure which Organization and Environment to connect to.

Open the landing page of the demo app to get started and click on the Get magic auth link button.

/img/tutorials/get_magic_link.png

If you're not already logged into the Workbench, you will need to sign in using the same Email address and Password you used for the Workbench:

/img/tutorials/login.png

Choose the Organization, Environment, Container, and User you want to connect to.

/img/tutorials/demo_app_setup.png

Switch Environments

To connect to a different environment from your organization to the Demo App, sign-out of the demo app and log in again. Doing this will enable you to choose a different organization/environment/stream.

Get ready to receive your first test card

The first-time experience for each of our demo apps varies slightly. Follow the steps below that relate to the demo app you are using, to get ready to receive your first card:

  • For web users: open the launcher (by selecting the bell icon)
  • For iOS users, select allow notifications.
  • For Android users: switch to the Cards area, using the footer menu.

/img/tutorials/sdk_apps.png

When your card stream displays, you'll notice an explainer message. This displayed when the customer has never received a card before and the stream is empty, and gives them some information about what to expect:

/img/tutorials/things_to_do.png

Customising new customer empty-state message.

It's possible to change this message. Your developers can set this when implementing the Atomic SDKs.

You’re now ready to receive test cards on your own device!


Sending a test card

Sending live and test cards.

Sending a "live" card to a customer
Read more about sending live cards from the workbench in the Sending cards tutorial.

Sending a "test" card to a test user
Sending a test card to the Atomic Demo Apps can be done from the Atomic Workbench or via an API endpoint. The recipient of a test card must be a test user in your environment. Read the Send test cards section of the Sending cards tutorial for more details.
They are marked as test in all analytics and data, so are easy to filter out.

Open the Atomic Workbench at: https://workbench.atomic.io/ to get started:

Signing into the Atomic Workbench Signing into the Atomic Workbench

You will see a list of the published and draft cards already created in the Environment you're signed into. Choose a card template to open by clicking the card name:

Cards section of the workbench showing active cards list Cards section of the workbench showing published and draft cards list

Navigate to the card's Content tab. Click the Send Test button in the bottom right corner of the window to open the Send Test Card options:

Card template open in the Content tab Card template open in the Content tab

To quickly send a test card, review the basic details and change them if needed.

  • Test accounts: select whose test accound to send the card to. This can either be your own, or someone else's account.
  • Target stream: you can choose the stream(s) you want to send the card to.
  • Event data: you can add, edit or remove any payload data that will be sent with your test card.

After you choose Send, you'll see a Success message and be able to view the log on the bottom left of the dialogue window.

Basic send test card options Basic send test card options

Not seeing your cards in the demo app?

Make sure the target stream is linked to the container you opened in the demo app. Read the Assigning streams to containers section in our docs for a description of how to do this.

Another likely cause is that your Demo App is configured to a different environment to where you are sending cards from.
We can check which environment you are configured to in both the Workbench and Demo Apps easily:
1. Check or switch environments in the Workbench
Click on the menu item in the bottom left corner which displays the first letter of your name, and note (or switch to) the desired environment.
2. Check or switch environments in the Demo App
Log out of the demo app, and then select Get magic auth link . Choose the desired Organization, Environment, Container, and User .

Still having trouble seeing cards? Explore our Troubleshooting the Demo Apps Help article.

To explore advanced options, choose Advanced to expand the options (optional):

Advanced send test card options

Advanced send test card options

SectionFieldDescription
Basic detailsTest accountsThe end-users who will receive the test card. Choose yourself from the list.
Basic detailsTarget streamThe Stream this test card will be displayed in. Cards are always sent to the all cards stream, but you can also send to your card to a new/different stream.
Basic detailsVariablesThe variable data that will be used in the test card. Feel free to leave the default values, or play with changing them.
AdvancedPush notification dataUsed by customers who want push notifications sent by Atomic to include some extra information for their app to pick up and use. You can ignore for now.
AdvancedLifecycle IdA unique identifier for a set of cards created by a particular request, can be used to find/update card sets at a later time.
AdvancedExpiry dateAn ISO formatted date/time, at which this card will be automatically expired and hidden from the recipient.
AdvancedExpiry durationAn ISO8601 formatted duration, after which this card will be automatically expired and hidden from the recipient. For example:
PT5M (5 Minutes)
PT1H45M (1 hour 45 minutes)
PT4H(4 Hours)
P3D(3 Days)
AdvancedEmbargo dateAn ISO formatted date/time, at which this card will be automatically created and visible to the recipient.

View a test card on the Demo App

The card that you sent yourself should now be visible in your demo app:

Test cards sent from the workbench displayed within Atomic demo apps Test cards sent from the workbench displayed within Atomic demo apps

Card Feed Polling and WebSockets

The Atomic Demo Apps use WebSockets with a fallback to polling for updates every 5 seconds if the WebSocket connection fails. Cards may not show up instantly if the SDK is using polling.

When you setup the SDK, WebSockets are used by default. If the connection fails, then the SDK will switch to polling. By default the polling interval is 15 seconds. The interval can be changed through the configuration of the SDK in your application.

Multi-platform syncing

Atomic keeps the card streams in sync across the different platforms (Web, iOS, and Android). i.e. if a card is dismissed on web, then it disappears from other platforms also.

Customer Experience

Once sent, the user will receive the card, and can then take a number of actions. As well as primary action buttons contained in the card, Atomic automatically supports:

  • Subviews: a secondary layout accessed via a link button
  • Snooze: snoozing the card to re-appear at a time in the future
  • Dismiss: dismissing the card
  • Voting: a feedback mechanism

Overflow options on both web and mobile Overflow options on both web and mobile

On mobile, snooze and dismiss are also accessible via a swipe menu.

Snooze and dismiss options revealed by swiping left on mobile Snooze and dismiss options revealed by swiping left on mobile

When the user has an empty stream a customizable message is shown.

Empty card streams showing "all caught up" message Empty card streams showing "all caught up" message

Configure the Demo App

You can easily configure the Demo App to render an alternative variant mode (display configuration).

Select the menu to open the switcher:

  • Web: the cog icon in the top right.
  • Android: from the Home tab, select the kebab menu (3 vertical dots) in the top right.
  • iOS: select the meatball menu (3 horizontal dots) in the top left.

Demo app configuration options Demo app configuration options

Variant mode availability in Demo Apps

Variant modeDescriptionSupport
DirectThe stream container is the main screen of the app.iOS
TabbedOpens the Atomic stream container when tapping on the corresponding tab. Known as 'Footer' on iOS.Android,iOS
Single Card ViewA single card view is the main screen of the app.Android,Web,iOS
StandaloneAn iframe that you can embed anywhere on your page. You set the size and dimensions of the frame.Web
LauncherA launcher button that opens an Atomic stream when clicked. Position and size is controlled by the SDK.Web
ModalSimulates opening the stream container modally (Close button at the top left)iOS
ContentSimulates opening the stream container within a navigation controller (with a Back button at the top left).iOS

Learn more about the embed options and methods in our Integrating the SDKs tutorial.

Switch to Single Card view, and note only the top card in the stream is rendered:

Examples of Atomic SDKs in single-card display mode Examples of Atomic SDKs in single-card display mode

Next steps

Product managers, product owners, and client engineers may like to explore SDK configuration options in our Integrating the SDKs tutorial.

Designers may also like to explore: The Theme Editor tutorial.

Team members responsible for the authoring cards can complete the Authoring Card Templates tutorial.

Need help in other areas? Contact us and we’ll be able to help you along!