Introduction to the workbench

Watch the video below to learn the workbench basics.

The Atomic Workbench

Workbench Access

You can access the Workbench at: https://workbench.atomic.io/. Bookmark this link in your browser.

Signing into the Atomic Workbench

The Workbench is where you can:

• design cards and set up their configuration
• manage customers and create segments
• view insights
• use tools to help you test, debug, analyze and audit
• configure the Atomic platform for your organization
• manage preferences

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

Workbench Orientation

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

The high level areas of the Workbench are accessed via the menu on the left:

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 organization. (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 Profile section is where you can manage your personal details and 2FA. You can access it by clicking your avatar in the bottom left corner.
6. The Manage section is where you can manage environments, organizations and workbench users. You can access it by clicking the 'manage' icon in the bottom left corner. 2. Organization: change your organization name and configure MFA. 3. Environments add and edit environments. 4. Workbench members: for managing your team members and permissions.

These areas are explained in depth in the Workbench guides section of the documentation; this tutorial aims to get you started with sending test cards and viewing them in one of our demo apps as fast as possible.

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.

How to access Atomic demo Apps

The Web demo app is available through the browser of your choice, there is no need to install anything.

• Web: https://demo.atomic.io

You will need to download the iOS and/or Android demo apps.

• iOS: Search the App Store for "Atomic Connect".
• Android: Search the Google Play store for "Atomic Connect".

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

Log in to the Web Demo app from the Workbench

In the workbench:

1. Click Atomic Connect.

2. Select the Container you want to send test cards to. To start, you can simply leave All cards selected.
3. Select which Test account you want to send test cards to (your own account is selected by default).
4. Click Open in browser. The Atomic Connect web app will then open.

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.

2. Select the Container you want to send test cards to.
3. Select which Test account you want to send test cards to (your own account is selected by default).
4. Open the camera app on your mobile device, scan the QR code. If you have downloaded the demo app (see How to access Atomic demo apps), Atomic Connect will then open.

If you haven't downloaded the demo app, you can open the link on your mobile device in its default browser. 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.

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:

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

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: in the demo app, open the launcher (by selecting the bell icon)
• For iOS users: select Allow notifications when opening the app for the first time.
• For Android users: open the demo app and switch to the Cards area, using the footer menu.

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

Customizing new customer empty-state message.

It's possible to change this message. Your developers can set this using the AwaitingFirstCard method 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.

You can send test cards from the workbench. Need help logging in? See the Workbench access section above.

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 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

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

• Test accounts: select which test account to send the card to.
• 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

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 to understand 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

Section	Field	Description
Basic details	Test accounts	The end-users who will receive the test card. Choose yourself from the list.
Basic details	Target stream	The 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 details	Variables	The variable data that will be used in the test card. Feel free to leave the default values, or play with changing them.
Advanced	Push notification data	Used 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.
Advanced	Lifecycle Id	A unique identifier for a set of cards created by a particular request, can be used to find/update card sets at a later time.
Advanced	Expiry date	An ISO formatted date/time, at which this card will be automatically expired and hidden from the recipient.
Advanced	Expiry duration	An 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)
Advanced	Embargo date	An 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

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

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

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

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

Variant mode availability in Demo Apps

Variant mode	Description	Support
Direct	The stream container is the main screen of the app.	iOS
Tabbed	Opens the Atomic stream container when tapping on the corresponding tab. Known as 'Footer' on iOS.	Android,iOS
Single Card View	A single card view is the main screen of the app.	Android,Web,iOS
Standalone	An iframe that you can embed anywhere on your page. You set the size and dimensions of the frame.	Web
Launcher	A launcher button that opens an Atomic stream when clicked. Position and size is controlled by the SDK.	Web
Modal	Simulates opening the stream container modally (Close button at the top left)	iOS
Content	Simulates 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

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!