An Introduction to Cards and Channels

At a glance

  • Article purpose: This article provides a comprehensive introduction to cards and channels, discussing the interrelationship between these two features, and how both function together for publishing engaging content for target audiences.
  • Business problem: Many business users may find it difficult to create effective communications optimized for TV screens. Additionally, it can be difficult for marketing to enforce corporate branding standards across multiple internal communicators.
  • Solution: Appspace has launched Cards and Channels, two features that make creating and publishing content relatively easy for non-technical users, with minimal configuration required, while enabling them to conform to their company’s branding requirements.
  • Conclusion: Cards and channels are simple but powerful tools ideal for creating captivating, brand-consistent, and interactive content for the workplace, which are compatible with many industry standard devices and operating environments.

Introduction

Cards in Appspace are the newest tool used for creating engaging, interactive content. Versatile and easy to create using the available themes in the Appspace console, cards support a wide variety of content, including images, text, video, data, and more. Simply put, cards are an easy but powerful medium to create the desired messaging ideal for any type of information needed for modern workplace initiatives.

While cards are used to create content, channels are the medium used to organize these cards and publish them to a desired audience. Appspace has three channel types: playlist channel, live channel, and advanced channel.

A playlist channel is the most commonly used channel type. It is simple to build and manage, and is ideal for displaying interactive messages on digital signage, room scheduling tablets or boards, kiosks, multi-screens, and even as wallpaper on collaboration endpoints. Playlist channels with cards offer a dynamic and robust messaging combination. 

A live channel is ideal for streaming TV channels by simply configuring it to show a live video stream and EPG data, while an advanced channel offers the most flexibility. Advanced channels are useful when building complex digital signage solutions, kiosks, and interactive display on industry standard devices. 

Putting it all together, 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.

 

Card Design, Branding, and Usage​

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 (announcement, room scheduling, charts, social media) we have in Appspace, and the types of content they contain. 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 HTML card framework provides easy integration with G Suite, Microsoft Office 365, Atlassian, Salesforce, Facebook, and more. 

Branding, Themes, and Templates

Appspace builds one card template per card type (announcement cards, room scheduling cards, data visualization cards etc) with a base theme, that is available for all users in the Appspace console. A theme is a set of values that determine the presentation of the card. The theme can have certain card features enabled or disabled, depending on how much control the end user needs to have. 

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

Multiple themes can be created from one template. For example, you can customize an Announcement card template to create themes such as “Events”, “Birthday Announcements”, “Corporate Information”, “New Joiners”, and such, each with a different customization. 

Content producers are then able to create cards from the available card themes, however, they may only be able to edit certain fields that have not been locked down by the administrator.

For information on configuring the themes, please refer to https://docs.appspace.com/appspace/7.1/publishing-content/advanced/configure-content-properties/cards-theme/

Card Types and Devices

We currently have two categories of cards available in the Appspace console; Appspace supported cards and Community cards. The Appspace supported cards receive periodic updates, new templates, and enhanced features from Appspace, while the Community cards will be customized and supported by any third-party community developer, using Appspace card APIs.

Appspace supported cards

Announcement card

A simple but augmented card customizable with animations, ideal for corporate messaging, signage, and wallpapers. The announcement card 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 custom logo.
  • Playlist capabilities with multiple images and video.

 

Room Schedule card 

Designed for single room scheduling, this card provides conference room booking features via touch screen on a tablet, or via Google/Microsoft calendars depending on the configured calendar providers. Booking functions on this card 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 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.

 

Schedule Board card 

Designed for multiple room scheduling, 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.
    • Available – when the room is available, the card displays the ‘Book now’ button, and the default display color is green.
    • Booked – when the room is occupied, the card displays the meeting name, and the default display color is red.
    • Check in – when a meeting is about to start, the card displays the ‘Check in’ button, and the default display color is yellow.
  • 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.

 

Data Visualization card

Our newest addition, this card includes the Progress Bar and Donut themes for displaying customized progress charts, and the Line theme for importing data from external spreadsheets and displaying customized graphs.

  • Progress Bar – a progress bar chart to show the progress of a goal such as monetary value, time, or achievements.
  • Donut – a progress donut chart to show the progress of a goal such as monetary value, time, or achievements.
  • Line – a line chart to compare changes over the same period of time for one or more series.

 

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.

 

Google Slides card

This card is ideal for displaying a Google Slides presentation on a TV, by simply configuring the 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.

Appspace Community cards

Social Media by Seenspire 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. 

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

Line Chart card 

A card to display a simple line chart with custom options for chart axis and legend display.

RSS card 

A card to display RSS feeds with or without authentication, that supports the following RSS formats:  RSS 1.0, RSS 2.0, mRSS, Atom 1.0.

YouTube card 

This popular card allows you to configure and display YouTube videos on your TVs. 

Note: Community cards will be turned off by default in the Appspace console. Visit our Appspace developer community that handles the development, custom integrations, support, and troubleshooting of community cards.

Cards can be added to a playlist channel or an advanced channel, and are supported on devices running the full Appspace App. Some cards like the Room Schedule card are also supported on new partner collaboration devices such as Crestron or Cisco Collaboration Endpoints.

To find more about the cards and the devices they are ideal for, refer to: https://docs.appspace.com/appspace/7.1/getting-started/device-comparison/#supported-card-types

Creating, Organizing, and Publishing Channels

Channel Types and Framework

A channel provides a medium to group, organize, and publish content curated for different use cases, such as new employee announcement, sales reports, events, and product news, or for target audiences such as at car display showrooms, hospital or airport information kiosks, wallpaper in collaboration spaces, and much more. In Appspace, we provide three types of channels:

  • Playlist channel
  • Live channel
  • Advanced channel

 

Playlist channel

A playlist channel is our most simple yet powerful and most commonly used channel, built using the latest HTML5 framework. The playlist channel is ideal for digital signage, multi-screen synchronization, wallpapers, corporate messaging, room scheduling, and much more. All you need to do is add image(s), video(s), or one of our many purpose built cards. You may add content individually or add an entire folder of content. 

When editing a playlist channel, there are three tabs available: Edit, Preview, and Publish.

Here, not only are you able to add or remove content, but you can also configure content playout properties such as transition types, aspect ratio, frequency restrictions, the duration of each content, and daypart scheduling for every content, or for a folder with multiple content. 

In the Preview tab, you are able to preview the channel’s content, played as a slideshow. However, due to browser limitations, not all transitions and media formats will display correctly. 

The Publish tab is where devices and users are assigned access to the playlist channel. You may also directly register a device or invite a user here, and choose to publish to all users or the entire network.

The Settings page provides information such as the network and channel groups the channel belongs to, and allows an administrator to configure approval permissions, as well as assign an editor and a publisher. A publisher can approve changes, edit content, and update the channel settings, while an editor is able to edit content in the channel but may require approval.

For instructions to creating a playlist channel, refer to: https://docs.appspace.com/appspace/7.1/publishing-content/basic/create-edit-publish/create-playlist/

 

Live channel

A live channel is rather easy to create, all you need to do is configure the stream; either in HLS or multicast format. You will also be able to select the EPG provider and source when you create the channel, however, the EPG settings must have already been configured by an administrator prior to that. To configure EPG settings, all you need to know is the XML link to the EPG provider. 

For instructions to configuring EPG settings, refer to: https://docs.appspace.com/appspace/7.1/publishing-content/advanced/managing-epg-providers/

There is no preview available for this channel type, however, in the Publish tab, you can assign this live channel to devices and users, directly register a device or invite users, and choose to publish to all users or the entire network. 

Similar to the playlist channel above, the Settings page provides information such as the network and channel groups this channel belongs to, and allows an administrator to configure approval permissions. However, here you can only assign publishing permissions; an editor role is not applicable. A publisher can approve changes, edit content, and update the channel settings.

For instructions to creating a live channel, refer to: https://docs.appspace.com/appspace/7.1/publishing-content/advanced/create-live-video/

 

Advanced channel

The advanced channel has a rather long history with Appspace. This is the original ‘signs extension’ used to create dynamic and interactive digital signage with images, videos, video streams, and widgets, for single-display deployment and video walls. Originally built heavily using HTML and Flash, the advanced channel framework has now been remodeled and functions solely on the Progressive Web App (PWA), while still keeping all its impressive tools intact. 

Find out more about this change to PWA here: https://blog.appspace.com/2018/10/advanced-channels-pwa-upgrade/

The advanced channel comes with power packed features such as a multi-layer WYSIWYG editor, advanced transitions, complex scheduling, numerous purpose built widgets such as the Clock, Event Calendar, Media Zone, and RSS Ticker, as well as customized widgets in categories such as Background Themes, Banners, Slide Shows, and more. You can add single or multiple widgets to each layout, and choose to schedule the layout, widget, or channel to run at a specific time, duration, or location. All these functions are available in the Edit tab.

This is the only channel type that offers adding ‘actions’ based on event-driven scripting, that are triggered when an event occurs at the system, layout, or widget level – configurable in the Actions tab. An event is an object sent to the channel to inform of user or system actions such as multi-touch events, motion events, and events for controlling multimedia. An action is a piece of code linked to an event that can occur in the channel. When the event occurs, the action code is executed. You can also set conditional events which allow you to create actions that only execute when an event’s defined conditions or rules are met.

 For instructions to creating event actions, refer to:  https://docs.appspace.com/appspace/7.1/publishing-content/advanced/configure-advanced-channels/event-action/ 

 Similar to the playlist channel, you may preview your channel in the Preview tab, and in the Publish tab, you can assign the live channel to devices and users, directly register a device or invite users, and choose to publish to all users or the entire network. 

The Settings tab, however is a little different. The permissions in an advanced channel do not have an editor or a publisher role per se. An administrator has a few role types to assign permissions to, allowing the user to manage the channel (sign), the widget, the schedule, or the content, respectively. The administrator can also enable automatic sync, make the channel public, or enable layout scheduling and content approval notifications.

For instructions to creating an advanced channel, refer to: https://docs.appspace.com/appspace/7.1/publishing-content/advanced/configure-advanced-channels/create-advanced-channel

Creating and Organizing Channels

You can create channels in three different ways from the Appspace console. You can use the Quick Actions button on the top right of the navigation bar, the Add button in the channel widget on the Appspace dashboard, or you can navigate to Channels in the Appspace menu. The Quick Actions button and the Add button in the channel widget are shortcuts that will automatically create a Playlist channel.

Appspace Dashboard

A playlist channel will display content in full screen, and you can add preloaded content from your library or upload new content directly. You can select individual content or entire folders to populate your channel.  

A great way to organize your channels is to place them into channel groups. For example, an employee on-boarding channel group might contain a channel about employee benefits, a channel about business tools and system access, and a channel about the workplace.

You may select from the list of channels that are available, and add multiple channel types in a channel group. 

Similar to publishing individual channels, you may publish a channel group to specific users, multiple user groups or all users, as well as individual devices, or multiple devices registered with Appspace, allowing you to publish these groups as you wish, depending on the audience or desired devices. 

The Settings page allows you to change the channel group name, update the description, or delete the channel group. An administrator can add users providing them with publishing permissions. A publisher can approve changes, edit content, and update the channel settings.

Conclusion

The simplest way to create and publish interactive and robust content is via the playlist channel. More advanced features such as custom layout designs using a multi-layer WYSIWYG editor, advanced transitions, complex scheduling, and widgets, are available via the advanced channel. Live streams can also be added as a channel, if you have the infrastructure in place. Once you have your channels setup, you can group them together logically to make it easier for the viewer to find everything they need when browsing in interactive mode. 

We recommend using our newest 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, using our channels, for a unified workplace experience.