Introduction to the workbench
The Atomic Workbench
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
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
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:
- The Cards tab is where you can view and manage all of your Cards. You can also send test cards from here.
- The Customers section is where you can view and manage users so you can send targeted and personalized messages.
- 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.
- The Tools section is where you can find a variety of tools:
- Event SDK request debugger: shows the last 100 failed client API requests, to help with debugging your SDK integration.
- 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.
- Test Action Flow sender: for sending bulk testing cards
- 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.
- Audit log: a log of user actions within your organisation. (currently in preview)
- The Configuration section is where you can configure Atomic:
- SDK: for your developers and designers to configure your account, including API keys and container themes.
- API: for your developers to configure your account.
- Card Templates: configure the approval process for card templates.
- Customer profiles: create custom fields and edit tags which are available for managing customers.
- Webhooks: configure all account webhooks.
- Testing: create and manage test accounts for your SDK integrations
- 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.
- Profile: manage your personal details and 2FA.
- Manage Organization: change your organization name and configure MFA.
- Manage Environments: add and edit environments.
- 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.
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.
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:
- Select the
Containeryou want to send test cards to. To start, you can simply leave
- Select which
Test accountyou want to send test cards to (your own account is selected by default).
Open in browser. The Atomic Connect web app will then open.
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:
- Select the
Containeryou want to send test cards to.
- Select which
Test accountyou want to send test cards to (your own account is selected by default).
- 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:
User you want to connect to.
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 notificationswhen opening the app for the first time.
- For Android users: open the demo app and switch to the
Cardsarea, 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:
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 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
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
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
|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 |
|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)
|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
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.
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.
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
Hometab, 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
|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
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!