Introduction to Cards

WHAT’s IN THIS ARTICLE: 

Introduction

Cards are HTML5 based templates used for creating engaging interactive content for digital signage, corporate messaging, and workplace communications such as room scheduling and booking, productivity charts and tables, maps, and many more. Versatile and easy to create using the available templates in the Appspace console, cards support a wide variety of content, including images, text, video, data, and more. Cards are an easy but powerful medium to create the desired messaging ideal for any type of information needed for the modern workplace initiatives.

In Appspace 8.0-ac.22 Appspace has introduced categories to cards, which will allow organizations to create content, build channels, and target messaging, according to workplace communication best practices and internal communication goals.

Each card template is assigned a default category, which can be changed by the Publisher or Author during card creation. The categories are defined as follows:

• Culture & Values – content that promotes company values and affects the employee experience, to help customers drive company values throughout their organization.
• Goals & Performance – content that showcases both long- and short-term goals and measurements of performance, to create shared ownership of company goals and drive employee performance.
• Productivity & Engagement – content with information that keeps the company running, day-to-day, facilitating organizational productivity.
• Safety & Compliance – content with information that supports employee safety and ensures company compliance with regulatory requirements, to help create a safe environment and promote safe behavior amongst employees.

While cards are used to create content, channels are the medium used to organize these cards and publish them to the desired audience. Appspace cards simplify the process of creating and distributing standards-based communications. It only takes three steps to get your message out:

1. Create a card using a branding-approved template.
2. Add the card to a channel.
3. Publish the channel to devices or users.

Cards can be added to a playlist channel or an advanced channel, and are supported on devices running the full Appspace App.

Card Framework

Cards are built using HTML5 in a flexible and extensible content container with as little markup and styles as possible, ensuring they are lightweight and load quickly. Cards offer a wide variety of control and customizations for headers and footers, contextual background colors, brand inclined fonts, and varied display options. The configuration of the card, which is set by the user during creation in the console, is packaged with HTML that is used to affect the behavior of how the information is displayed on-screen.

Card layouts vary to support the different card categories (messaging, room scheduling and booking, productivity charts, social media, etc.) we have in Appspace, and the types of content they contain. Cards are designed to be responsive. This means that a card can automatically adapt itself to different resolutions and orientations while preserving the message created by the user.

A card is identifiable as a single, contained unit, and most card types have some or all of the following elements:

• The card container, that holds all card elements, with its size determined by the space those elements occupy.
• A thumbnail to display an avatar, logo, or icon.
• Headline text such as the message title.
• Summary text, typically supporting text such as message summary or description.
• Media such as photos, graphics, and video.
• Buttons or icons for actions.

Our open API and the HTML card framework provide easy integration with G Suite, Microsoft Office 365, Atlassian, Salesforce, Facebook, and more.

Branding, Themes & Templates

Appspace builds one card template per card type (Announcement, Room Schedule, Data Visualization, etc.) with a base theme, that is available for all users in the Appspace console. However, an administrator or account owner can create multiple themes from one template. The administrator (typically a brand owner) can customize and lock the theme of a template to a specific font style and color scheme, ideal for preserving the organization’s brand identity across all displays, anywhere, anytime.

Users, typically content producers, are then able to create cards from the available card templates in the Library or directly from a channel, however, they may only be able to edit certain fields that have not been locked down by the administrator. We also have a Cards Gallery with customized ready-made card templates for different use cases, available for download.

You can also create custom-developed cards using our APIs to integrate with external systems, allowing our partners to provide value by building and owning the integrations required by clients. 

Cards For Different Experiences

Cards developed by Appspace and maintained with periodic updates, improved templates, and updated features are generally known as Appspace supported cards – most of our cards belong to this category.  Some card templates which are initially developed by Appspace but are customized and supported by any third-party community developer using Appspace card APIs are known as community cards. 

We have categorized the cards we have based on the experience they are ideal for: 

• Messaging & Signage
• Productivity
• Room Scheduling
• Web & Social Media

Messaging & Signage

Announcement Card

The Announcement card is a simple but augmented card customizable with animations, ideal for corporate messaging, signage, and wallpapers. It includes the following features and functionality:

• A special tracking effect which is a combination of pan and zoom effects applied to images for motion.
• Support for playout duration and transitions for images.
• Formatting options such as aspect ratio, borders, and margin.
• Text and feature media elements are animated into the layout during every channel transition.
• New layout control and layout formatting options.
• Ability to position and resize a custom logo.
• Playlist capabilities with multiple images and videos.

You can also use the Announcement card to Setup Video Wall Displays, or create wallpapers and signage displays (using a screenshot of the card) for these collaboration devices:

• • Setup Wallpaper Displays for Cisco Webex Share.
  • Setup Wallpaper Displays for Cisco Collaboration Endpoints CE9.9 and later.
  • Setup Wallpaper Displays for Cisco Collaboration Endpoints CE9.8 and earlier.
  • Setup Signage Mode for Cisco Webex Board and Webex Room Series.
  • Setup Digital Signage in Conference Rooms for Crestron AirMedia/Mercury
  • Setup Digital Signage in Conference Rooms for Mersive Solstice Pod

Countdown Card

The Countdown card allows you to display a live count-down or count-up to a specific date and time, with the following customizations:

• Display a message with a timer.
• Clock style customization.
• Clock timer customization to display years, months, days, hours, minutes, or seconds.
• Auto or manual clock formatting options.
• Clock color and text color.
• Card background color or image.
• Flip layout order.
• Display a final message once the countdown has been reached. This message will not be available for a count up. 

Weather Card

The Weather card displays a 5-day weather forecast with the following customizations available:

• Temperature unit in Fahrenheit or Celsius.
• Display motion background.
• Display advanced weather information.
• Display the country or state of the location.
• Text and background formatting.

Leaving the location blank allows the card to display the weather of the display device’s current location enabling users to configure a single Weather card and deploying it to multiple devices on different locations, eliminating the need to configure each location manually.

In the event that the search function is unable to locate the entered location, or has a location selected, users may override it by using the “card.weather.location” device property, and manually entering the location by setting the value to “City name, State / Country”. The system will then try to map the closest location at it’s best effort.

Productivity

Data Visualization Card

This card includes a myriad of themes in the Library for displaying customized graphs, charts, and progress charts, such as:

• Donut – to display data as a pie or donut chart, where the circle is divided into multiple sectors.
• Line – a line chart to compare changes over the same period of time for one or more series.
• Bar – a bar chart to present categorical data in rectangular bars with heights or lengths proportional to the values that they represent.
• Progress Bar – a progress bar chart to show the progress of a goal such as monetary value, time, or achievements.
• Progress Donut – a progress donut chart to show the progress of a goal such as monetary value, time, or achievements in a pie chart.

Each theme has its own multiple customization options and data import capabilities. 

Google Slides Card

This card is ideal for displaying a Google Slides presentation on a TV, by simply configuring the link to the file on Google Drive. This card, originally offered as a Community card, has recently been revamped with the following updated features:

• Improved security via card authentication.
• Ability to customize the slide duration.
• New custom template and themes.

The card can be configured with or without Google authentication in place (dependant on your/organization’s privacy settings). A shareable private or public link to the Google presentation file is also needed to allow the card direct access. With this new enhancement (May 2019), the  Google Slides card is now officially an Appspace supported card that will continuously be improved by us.

Google Sheets Card

Similar to the Google Slides card, this card displays information from Google Sheets, by simply configuring a link to the file on Google Drive. With the ability to zoom to specific cells on the spreadsheet, the card can be configured with a public sharing link without authentication or a private sharing link with authentication.

Table Card

The Table card displays a simple table with data that can be entered manually, pasted directly from an external table, or imported from an Excel spreadsheet.

• Table title, header and body customizations.
• Background color and media support.
• Custom row height and column width settings.
• Conditional formatting.
• Column sorting.
• Data filtering.
• Table pagination, with transitions and custom durations.

Previously categorized as a community card, a completely redesigned Table card was made available on October 18th 2019.  

Room Scheduling

Room Schedule Card

Designed for single-room scheduling, this card provides conference room booking features via touch-screen on a tablet, or via Google Calendar, Microsoft Office 365, or a custom calendar provider depending on the configured calendar providers. Booking functions on this card include:

• Book now – the ability to book 30 minutes, 1 hour, or 1.5 hours from the current time, based on room availability.
• Book in advance – book future time slots (on the same day only) or up to 7 days in advance, based on room availability.
• Extend meeting – extend current meeting by 30 minutes, 1 hour, or 1.5 hours.
• End meeting – end current meeting, and make the room available.
• Check in – option to check in to a meeting from 10 minutes before until 10 minutes after the start of the meeting.

The Room Schedule card is also available for customized partner collaboration devices such as Crestron TSS or IAdea.

Schedule Board Card

Designed for displaying multiple room schedules on a large TV or Webex board, this card allows to book, and view schedules of multiple meeting spaces in one place, and is ideal for larger displays placed in common areas with many nearby meeting spaces. When the Schedule Board card is configured and displayed on a device in a huddle space or lobby space, the following features will be available to you:

• Multiple room information – the room name and status indicating if the room is available, offline, or occupied is displayed.

• Meeting information – details of current meeting and upcoming meetings for the day.
• Filter function -– filter to only display spaces or rooms that are available, have been checked-in, or are occupied.
• Booking functions, which include:

• • Book now – ability to book 30 minutes, 1 hour, or 1.5 hours from the current time, based on room availability.
  • Book in advance – book future time slots (on the same day only) or up to 3 days in advance, based on room availability.
  • Check in – option to check in to a meeting from 10 minutes before until 10 minutes after the start of the meeting.
  • Extend meeting – extend current meeting by 30 minutes, 1 hour, or 1.5 hours.
  • End meeting – end current meeting, and make the room available.

Event Card

This card announces Event information, such as the date and time of the event, the organizer, title and a description. The card is displayed in the Employee App when an event is created via quick post. The link at the bottom of the card allows you to add the event to your system calendar.

The following information is displayed on the Event card:

• Event title and image
• Event date
• Event start and end times
• Event organizer
• Description
• Download ICS link - click the link to add the event to your Google Calendar, Microsoft Office 365, or a custom calendar provider depending on your configured calendar provider.

Web & Social Media

RSS Card

A card to display RSS feeds with or without authentication, and allows users to customize how RSS feeds are displayed on-screen, with the following options:

• Unauthenticated RSS card using valid public RSS feeds.
• RSS card using authenticated RSS feeds.
• RSS card using a private URL.

The card supports the following RSS formats:  RSS 1.0, RSS 2.0, mRSS, Atom 1.0.

Web View Card

A basic card to embed an external website into the card, with multiple embedding options, such as:

• Native Webview – displays the web page in the device’s browser without the ability to customize, as the web page is set as source and is not embedded.
• XHR Proxy – uses XMLHttpRequest (XHR) proxy to by-pass some browser security settings, to display websites that do not allow embedding.
• Basic Authentication – allows web pages with basic authentication using the XHR proxy method.
• Iframe – uses the most basic way to embed web pages, and only works if the web page allows embedding. It may not work for websites that do not allow embedding, such as social media web sites.

The card also includes the following website scaling options:

• Fit to screen - matches the web page display with the screen resolution and size.
• Custom size - displays the web page at a custom screen resolution and size.
• Custom size with crop - displays only a particular section of the web page.

YouTube Card 

This popular card allows you to configure and stream YouTube videos on your TVs with video resolution and playback behavior customization.

With new enhancements in July 2019, the YouTube card is now officially an Appspace supported card that will continuously be improved by us.

Social Media by Seenspire Card (Community Card)

This unique card built in partnership with Seenspire to display social media feeds, requires Seenspire authentication and login credentials. and is compatible with Appspace 6.2.2 and later. This card is developed by Appspace, but customized and maintained by Seenspire. 

Conclusion

We recommend using our purpose-built HTML5-based cards that are available with numerous templates and themes, to display compelling content via wallpapers, signage, room schedules, corporate messaging, progress chart presentations, kiosks, and much more, for a unified workplace experience.