The ScreenCloud Playgrounds app opens up a world of possibilities to stretch the boundaries of your digital signage. You can quickly build mini web applications right inside ScreenCloud—no hosting or server needed. Simply write or copy some HTML, CSS, and JavaScript, paste it into ScreenCloud Playgrounds’ code editor, and then watch it run on your digital screens.

Playgrounds is built for those comfortable working with CSS, Javascript, and HTML but it’s also easy to use even if you’re new to coding, with code copied from tutorials or ChatGPT. It includes a few basic templates offered out of the box, including a meme generator and a Giphy layout, or you can start with a blank template and get creative. You can also tweak scripts from Codepen, Replit, and jsFiddle to quickly build custom-coded signage.

1. Select and install ScreenCloud’s Playgrounds App

1.1. Get started by logging into your ScreenCloud account here and choosing the ScreenCloud App Store from the left-hand menu.

1.2. From the App Store, type in “Playgrounds” in the search bar to surface the Playgrounds App.

1.3. Click on the app, then select the yellow “Go to App'' button to open the configuration window for the Playgrounds app.

2.1. Once you’ve opened the Playgrounds app from the ScreenCloud App Store, click ‘New Instance’ in the top right to begin coding custom signage.

2.2. Next, you’ll see some starter templates to embed Canva designs, connect a livestream, or create metric templates. You can also choose the ‘Start with a blank template’ button to start without any pre-written code.

3.1. You’ll now see the in-built code editor, where it’s over to you on what you can create. Click the Preview button to see how your code will look on a ScreenCloud sign, then tweak the HTML, CSS, and JavaScript code to build the signage you want.

For more advanced signage, start with the Big Number template, which includes hosted React for an easy template to customize into more detailed signage applications.

3.2. After reviewing your preview, you can add a unique name to your app instance and select “Save” to add the Playgrounds app into your managed apps in ScreenCloud. Reopen your app to tweak your code anytime—just always remember to save changes before closing.

You can send data to your new dashboard with Playgrounds’ “Application Data” feature. It’s the best way to integrate ScreenCloud digital signage with automation tools like Zapier or Microsoft Power Automate. 

Application Data stores JSON data in your ScreenCloud Playground instance, with a unique webhooks URL that you can post JSON to. ScreenCloud stores whatever JSON you post and makes it available to your application.

For example, you could write a script on your server in Python, JavaScript or Shell, to post data from your in-house software or MySQL databases to your Playgrounds dashboard when there’s a change. Or, you could take a no-code approach and connect ScreenCloud to Zapier with Playgrounds and its Webhook URL, to build signage that automatically updates whenever something new happens on your signage. Tie it together with some Graph.js code in Playgrounds for an auto-updating dashboard with numbers and graphs, powered by data from your team’s software and in-house databases.

To send data to a Playgrounds’ Application Data Webhook URL:

Include the following header: Content-Type: application/json

Format the request body in JSON, with all data sent to ScreenCloud included in a data element, like the example code below:

{
    "data": {
        "number": 1234
    }
}

Note: If you send data to ScreenCloud while the Playgrounds window is open, you’ll need to exit the editor and reload the ScreenCloud page to see the changes.

curl -X PUT -d '{"data": {"number":"1234"}}' -H "Content-Type: application/json" <API URL>

After reviewing your preview, you can add a unique name to your app instance and select “Save” to add the Playgrounds app into your managed apps in ScreenCloud.

How to retrieve / request back JSON data that has been "Put" to Application Data

Generally, you’ll reference the JSON field you need with {data.FIELD} references in the JavaScript code of your Playgrounds application, replacing FIELD with your field’s name.

For example, in the "Big Number" Playgrounds template , the Javascript contains the following line:

/**  
Replacing getData(), this method retrieves the data associated with the app
*/

ScreenCloud.getAppData().then((data) => {
//passes retrieved data to render method
   render(data);
}).catch((error) => {
   console.log(`Failed to load application data - ${error}`);
});

ScreenCloud.getAppData is an asynchronous method that we provide in the static javascript, which is downloaded with the Playgrounds app, and it fetches any data associated with the app. In the code above, the data retrieved is then being passed into a render method which was defined in the app's JS. 

Playgrounds has always provided a function to load JSON-formatted data associated with the app instance. Previously this function was called getData and whilst that function is still supported, it should now be considered deprecated and Playgrounds apps should migrate to using ScreenCloud.getAppData instead.

Then, to reference the number in the app, that template includes a {data ? data.number : "123,456"} line that fetches the number field from Application Data, and includes a default number to display if that fields happens to not include data.

In order to provide a consistent interface and allow existing Playgrounds instances to be updated quickly, ScreenCloud.getAppData, like getData, is an asynchronous method that the calling code can call either with await or handle the Promise that is returned.

Use the Big Number template to experiment, and check our ScreenCloud Webhooks guide for more details.

Or, to build something more complex with your own tools and APIs, check out ScreenCloud’s Developer SDKs and GraphQL API.

Due to the asynchronous nature in which the configuration, screen and theme information is loaded, it is best to check that the App is fully ready before performing any other operations.

We have provided two ways to accomplish this.

A one-time check on the status of the app, i.e. whether or not the necessary configuration, screen and theme information is available

if (ScreenCloud.isAppReady()) {
// Action
}

In this example, the action will only be performed if the necessary information has already been loaded at that specific point in time. Otherwise, the action will not be performed

Accepts a callback function that will be executed when the necessary configuration, screen and theme information is available

ScreenCloud.onAppReady(() => {
   //Action
});


In this example, the action will be performed once the necessary information becomes available, even if that means waiting for this condition to be met.

We recommend using onAppReady during the initialization of Playgrounds apps, which require configuration, screen and/or theme data.

/**
 * Waits for the Playgrounds app to be initialized,
 * then executes the callback method supplied.
 */
ScreenCloud.onAppReady(() => {
  /**
   * Load the channel theme and use it to update the CSS variables
   */
  ScreenCloud.applyTheme();

  /**
   * Replacing getData(), this method retrieves the data associated with the app
   */
  ScreenCloud.getAppData()
    .then((data) => {
      // passes retrieved data to render method
      render(data);
    })
    .catch((error) => {
      console.log(`Failed to load application data - ${error}`);
    });
});

How to check if the application is on screen

Applications which are placed within Playlists or Channels are pre-loaded, off-screen, to ensure that they are ready, before being shown on screen. However, sometimes it is useful to know when the application is actually on screen, for example: when the app contains initial animations that will not be seen, if they are started when the app is pre-loaded.

Again there are 2 different methods available to help here.

A one-time check on the status of the app, i.e. whether or not the app is currently on screen

if (ScreenCloud.isAppOnScreen()) {
// Action
}


In this example, the action will only be performed if the app is on screen at that specific point in time. Otherwise, the action will not be performed

Accepts a callback function that will be executed when the app is displayed on screen

if (ScreenCloud.isAppShown()) {
// Action
}


In this example, the action will be performed once the app is displayed on screen, even if that means waiting for this condition to be met.

We recommend using onAppShown for Playgrounds apps, which contain initial/loading animations

/**
 * Allows functionality to be invoked when the app is displayed on screen
 * Use this method to start animations etc
 */

ScreenCloud.onAppShown(() => {
  // Start slideshow
  setInterval(() => {
    next = showSlide(next);
  }, duration * 1000);
});


It is strongly recommended that all of the functions below only be called once the Playgrounds app has been confirmed to be ready, using either isAppReady or on AppReady as shown above.

How to retrieve / request Screen Data & the Screen Location

This method allows accessing to all of the information that is available about the screen, including its location. Any custom key:value data pairs, which have been defined for the screen, will be available through this object.

This will return `undefined` if no screen data is available, which will happen in app preview.
If you want to see the Screen Data please preview on Screen and add a key:value to the Screen.

const data = ScreenCloud.getScreenData();
if (data && data.myKey) {
// Custom Data Action
}

This method returns a reduced set of the screen data containing only the values relevant to the screen’s location

This will return `undefined` if no screen data is available, which will happen in app preview.
You will only be able to preview the Screen Location in Studio Screen Preview or on the Screen itself.

// If screen data is available, this will return an object
// in the following format:
// {
//  address: string || undefined,
//  country: string || undefined,
//  locality: string || undefined,
//  longitude: string || undefined,
//  latitude: string || undefined,
// }
const location = ScreenCloud.getScreenLocation();
if (location && 
    location.longitude && 
    location.latitude) {
	// Location Specific Action
}


How to use Channel theme within the app code

There are many different aspects to a channel theme and, in some cases, it may be useful to be able to access the individual property values, so we have provided an accessor method for each of those. However, we also provide a convenient method for loading the entire theme into the Playgrounds app, called applyTheme

The individually property methods will return undefined if no theme is available, which will happen if the app is viewed or preview outside of a Channel

Returns the hex code for the configured Primary Color of the current theme

const primaryColor = ScreenCloud.getPrimaryColor();


Returns the hex code for the configured Secondary Color of the current theme

const secondaryColor = ScreenCloud.getSecondaryColor();


Returns the hex code for the configured Title Font Color of the current theme

const titleFontColor = ScreenCloud.getTitleFontColor();


Returns the hex code for the configured Body Font Color of the current theme

Here’s a few examples we’ve seen Playgrounds used for:

Custom branded dashboards - If you have a particular design you want to use on screens that is not covered by ScreenCloud templates or apps, using the Playgrounds app, you could build out the style you want.

Custom weather app - Code a weather app that displays more in depth weather information than ScreenCloud’s dedicated weather app allows.

Live video or photos - Connect to a live video stream for security monitoring, or upload images to your signage with a right-click.

Bespoke metrics dashboards - Connect an internal database and turn it into a Dashboard on your screens. Check our guide to building a Chart.js-powered dashboard for an example.

Siri and Google Assistant powered signage - Build a Playgrounds sign that shows text from webhooks, then build an Apple Shortcuts or Zapier-powered workflow so you can say anything to Siri or Google Assistant and have it show up on your signage.

Yes, by using ScreenCloud’s Application Data feature in the top right corner of the app and its Webhooks URL, you can connect ScreenCloud to any in-house database or external software.

Please ensure that you have saved your app instance by clicking 'Save' in the top right corner. You must do this before you can display your app on screens.

Using our code editor you have the freedom to create custom built apps to display content on your screen

Build and launch your own ScreenCloud app

Not sure what to build? Start with one of our pre-built templates or build your app from scratch

Choose from existing templates or import scripts from across the web

Embed a data file or connect a live data stream in your app

The ScreenCloud Playgrounds app opens up a world of possibilities to our users who wish to stretch the boundaries of their digital signage. Playgrounds enables users to quickly build their own applications within ScreenCloud, without worrying about hosting or setup. Simply grab some HTML, CSS and JavaScript, paste it into our code editor, then watch it run on your digital screens.

Build your own custom ScreenCloud app in Playgrounds.

Playgrounds - Digital Signage App - ScreenCloud

Quickly build and display your own screen applications

How it works:

How it works:

1. Hardware

2. Software

3. Support & Services

Industries

Case Studies

Content

Playgrounds

Included in all plans

About this app

Build and launch your own ScreenCloud app

Choose from existing templates or import scripts from across the web

Connect to your own data source

Frequently asked questions

What are some examples of things I could build with ScreenCloud Playgrounds?

Can I connect to my own data source?

I'm having trouble getting my content on screen, what can I do?

Ready To Get Started?

Connect your first screen today with our 14-day free trial