It’s simple enough to throw together a slide with static info for your digital signage. Not all that much harder to put dynamic data on the big screen, with embeds and ScreenCloud Dashboards to grab stats and graphs from any app that you use.

And yet. If you’re a perfectionist, if you can code—or have a few minutes to get ChatGPT to code for you—there’s a better way. You can code custom digital signage.

It’s a bit more complicated, a bit more work, but it’ll pay dividends with signage that matches your company’s branding, updates whenever anything changes, and shows exactly what you want—and nothing else.

Here’s how, using ScreenCloud Playgrounds, Webhooks, and ChatGPT to build that dashboard you’ve always wanted.

<center>Got a spare screen on your office wall? ScreenCloud makes it easy to run anything you code on the screen, automatically.</center>

Got signage running ScreenCloud already in your office? Jump ahead to the next section—you’re ready to start coding your dashboard.

If you’re building your first digital signage, start out with the screen that’ll show your new dashboard to your team. It could be anything: A repurposed computer monitor, a TV on the wall in your office, or a tablet next to your water cooler. Install the ScreenCloud app or obtain a ScreenCloud OS device—check ScreenCloud’s training to get started.

Before you jump into coding a new dashboard in ScreenCloud, get a feel for what it’s like to build a simpler one with built-in tools. Design a quick slide for your signage with ScreenCloud Canvas, add digital signage integrations to put your schedule or the weather on your screen, or check our tutorial to put any number on any screen and build something a bit more advanced.

Once you’ve got the basics down, it’s time to incorporate some coding and become a power user.

<center>ScreenCloud Playgrounds includes pre-made code templates you could customize into the signage you want.</center>

ScreenCloud’s flexible enough to code a custom dashboard and put it on the big screen in many different ways. You could write a one-page website and save it as a ScreenCloud Link, to show a preview of the page, or add it to Page Scroll to have your signage scroll through your page automatically. You could even extract and display a single element from your site in ScreenCloud Dashboards to put any part of the site on your signage.

Each of those requires you to deploy, host, and maintain the site so it continues to work on your screens. That works—but it’s yet one more thing to keep track of. The extra effort makes you that much less likely to actually get that custom-coded screen launched in the first place.

Enter ScreenCloud Playgrounds. It’s Codepen, for your screens.

ScreenCloud Playgrounds is a simpler option to code and host a custom dashboard page inside ScreenCloud. Write a screen in HTML, CSS, and JavaScript, with Webhooks support to push data to a built-in JSON data store. You can load external libraries—the default Playgrounds example code includes React, Babel, and Google Fonts, for a modern dev stack. And you can bring data in from your software and in-house tools with a `PUT` call to your ScreenCloud Playgrounds webhooks URL.

<center>ScreenCloud Playgrounds includes space for JavaScript, CSS, and HTML code.</center>

Let’s start out by customizing the default Playgrounds code. Open ScreenCloud Playgrounds, click New Instance, then choose the Big Number template (that’s the best one to build a live updating dashboard). By default, it shows the “Number of Installs This Week” followed by the number in the Application Data.

To start, customize that KPI to something that matters to your team. The default code is in the JavaScript column on the left. Edit the first H2 to say “Total subscribers,” perhaps, then edit the second H2 to share your goal, say, “Our goal: 100 new subscribers.”

Click Preview to see your newly customized dashboard as it’ll look on a TV.

<center>Your default ScreenCloud Playgrounds dashboard, with your first customizations</center>

Now, let’s customize that default number. You could update it manually in ScreenCloud, or you could push a new value every time a new subscriber comes in—that’s what we’re going to do.

ScreenCloud uses Webhooks to update Playgrounds dashboards. If you’ve never used them before, Webhooks are basically a link where you can send JSON formatted data. Instead of opening ScreenCloud and updating the data, you can send a bit of text that says `'{"data": {"number":"1"}}'` to update your database and set the number to 1 (or anything else you want). And you can automate it, and update the number whenever a new subscriber comes in.

<center>With Playgrounds Webhooks, you can push any data to update your screen</center>

Let’s try it out. In your ScreenCloud Playgrounds code editor, Application Data to see the variable, its value, and the ScreenCloud Webhooks URL to update that value.

You could just edit the number directly. Edit the number after `"number":` to, say, 20, click OK then Preview, and your dashboard will show a more moderate subscriber number. The best way is to make it dynamic with Webhooks.

To do that, back in the Application Data dialogue, select and copy the link at the bottom of the form to send data to your screen. That’s your Webhooks URL. Then click Save & Close in the top right corner to save your ScreenCloud Playgrounds dashboard–as you can’t push data to your screen unless you’ve closed the editor.

Now it’s time to fire up Terminal on your Mac or Command Prompt on your PC. Enter the following code, swapping in the URL you just copied from ScreenCloud for the `https://YOURLINK` below:

<center>curl -X PUT -d '{"data": {"number":"1"}}' -H "Content-Type: application/json" https://YOURLINK</center>

This is sending a `PUT` call to your ScreenCloud dashboard, sending updated JSON with your `number` set to `1`. You could swap that number out with any number (or text) you want—just make sure to keep the quotes and brackets around it. Paste the command in Terminal or Command Prompt, press Enter, and a moment later you’ll get a response back with ScreenCloud repeating back the `number` field’s current value.

Note: If you get an error message instead, check your quotes to make sure they’re straight, not curly quotes, and make sure you replaced the `https://YOURLINK` with the correct Webhooks link from ScreenCloud—not the link to your Playground page or your ScreenCloud account.

Let’s make sure everything’s working, and check your updated dashboard. Back in ScreenCloud, open your Playground, and click Preview. Voilà, you’ve now got 1 subscriber!

Automatically update ScreenCloud Playgrounds with a Zapier workflow

You could open Terminal and update ScreenCloud manually every time you get a new subscriber, though that’d get tedious, fast. The better way is to let computers do what they do best: work for you.

With your ScreenCloud Webhooks URL, you could set your team’s apps to push updated numbers to your dashboard whenever someone new subscribes (or when any important number changes). Some software comes with built-in Webhooks support. You could code custom cron jobs from your in-house software to PUT data to your ScreenCloud Webhooks, if you want.

An easier option is to use an automation tool like Zapier, IFTTT, or Microsoft Power Apps. They can monitor your apps for changes—say, when someone new subscribes to your MailChimp account—and then send the data to your ScreenCloud Webhooks URL.

<center>Zapier can watch your software for new events—new MailChimp subscribers, here—and add up a count every time a new one comes in</center>

Let’s use Zapier to set it up. Start out with a Trigger. Pick the app that’ll have your subscriber data—we’ll use MailChimp here, and have it watch for New Subscribers.

Next, we’ll add a Storage action, to keep track of how many subscribers you have in total. Choose the Storage by Zapier app, pick the Increment Value event, then set a key name (“Subscribers” for this Zap) and Increment Amount (1 makes sense for this example workflow—but if you were tracking sales, say, from a Shopify store, you might want to add the order value here instead), and test the step.

<center>Add your ScreenCloud Webhooks URL, and select the PUT method</center>

Finally, add one more step with the Webhooks app, and choose the Custom Request event, which lets us customize everything we send to ScreenCloud. Choose the `PUT` method, and paste your ScreenCloud Playgrounds Webhooks URL in the URL field.

<center>Add the JSON value to the Zap, swapping in the number for the Storage variable.</center>

In the Data section, paste in the JSON data from before:

<center>`{"data": {"number":"1"}}`</center>

This time, select the `1`, and in Zapier’s popup menu, select the Storage app and the Subscribers value. Zapier will replace that variable with the real Subscriber value every time this automation runs—so it might be 1 this time, 2 when the next person subscribes, and so on.

One final thing to add: In the Headers option, enter `Content-Type` and `application/json` so ScreenCloud will know how to parse the data.

With that done, test your Zap—and if there’s no error, turn it on (if you do get an error, go back and make sure you didn’t miss anything—and that your quotes in the data are in place and straight). Go open MailChimp (or whatever app you connected in the Zap’s first step), add a new subscriber, then go open your ScreenCloud Playground again and boom, now you have two subscribers, with a dashboard that’ll keep updating every time a new subscriber comes in.

There’s your automatically updating dashboard!

Customize your ScreenCloud Playgrounds dashboard

You’re done—to a degree, at least. You could set your ScreenCloud screen to display your Playgrounds dashboard and add it to a playlist or channel to show in rotation along with your other apps and integrations. Every time a new subscriber comes in, your dashboard will show the new number.

But you could do so much more. Let’s keep customizing the dashboard to show more details, and pull in your company’s branding as well.

Playgrounds’ Application Data can store as much detail for your signage as you need. You could show a handful of values, side-by-side, to show, say, how many new customers signed up and how much revenue they brought in.

Or, you could have fun. Let’s get ChatGPT to write a new sentence celebrating every new subscriber, and put it on our dashboard.

<center>Adding an extra variable to your Playgrounds data.</center>

Start off by going back to your ScreenCloud Playgrounds, open the Application Data, then after the number value add a comma, and on the next line add `"sentence": "Yay, more people!"`.

You then need a bit of code to show that sentence on your sign. In the JavaScript column, replace the text in the final H2 line with the following `{data ? data.sentence : "Good work!"}` Here, `data.sentence` is pulling in your sentence value, or showing `Good work!` if there’s nothing in your sentence.

<center>Add a ChatGPT action in Zapier to generate a new, unique sentence every time.</center>

Save and close your Playgrounds and head back to Zapier. In the Webhook Zap we created earlier, add another step near the top and choose the ChatGPT app. In the User Message field, add a prompt that will tellGPT to come up with something good for your signage. Add enough description for it to get creative, and perhaps include a max number of words so it doesn’t run too long. Here’s an example that should work:

"Please come up with a congratulatory message that is fewer than 8 words long. It should be congratulations about a marketing team getting a new subscriber for the company newsletter.”

<center>Update the Webhooks Data field with the GPT-powered sentence</center>

Finish up by adding that GPT to the Webhooks action. In the data field, add `, "sentence":"`, then click the GPT Assistant Response Message to add that element to your response, followed by a final close quote.

Test and turn your Zap back on, then open your ScreenCloud Playground screen and it should show your new sentence at the end. And every time someone new joins, the tagline will change, too.

<center>A GPT-powered dashboard, in ScreenCloud</center>

There’s only one thing left: The design.

Your new sentence on the bottom of the screen is looking a bit cramped, and the page still uses the original branding.

You could manually tweak things on your own, in the CSS column. Perhaps drop the tagline’s `h2.outro-text` font size down by adding `font-size: 2em` there, or tweak the `font-family` and `background-color` in the `body` section to use your company’s branding.

Or, since we’re already using ChatGPT, you could get AI to do the work for us.

<center>ChatGPT generating new CSS code for our dashboard</center>

There are a few ways to approach it. You could tell ChatGPT what you’re doing, and ask for help. 

For example, I told GPT: “I've got text in three headings, and want to make css to make the page full width, with the three rows of text centered in the page. The background should be this image (https://images.unsplash.com/photo-1526554850534-7c78330d5f90?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2069&q=80) with an orange gradient overlay. The text should be set in Poppins, large enough to read from a distance.” 

Tweak the prompt, add a background photo link you want to use and a font you like, then wait a moment and ChatGPT will give you CSS code that should be a drop-in replacement for ScreenCloud Playground’s defaults.

<center>A first pass at a new, GPT customized dashboard in ScreenCloud</center>

Back in Playgrounds, select all of the text in the CSS field, paste in your ChatGPT code, update the typeface name in the HTML line that starts with `@import url('https://fonts.googleapis`, and preview your site. It likely won’t be perfect, the first try, so go back to ChatGPT, tell it what’s wrong, and keep going.

With a bit of back and forth, you’ll get custom signage from ChatGPT, auto-updating with webhooks, from Zapier, even if you don’t know how to code.

Then it’s time to branch out. Share the JavaScript code from ScreenClouds with ChatGPT, and ask it to switch things up—perhaps to turn your dashboard into a 3-column site, or to add an icon to the top of the site. Add in more variables, hook them up to Zapier, and your imagination’s the limit with what you could build with ScreenClouds, ChatGPT, and Zapier.

Build custom digital signage that shows any live value you want with ScreenCloud Playgrounds’ HTML editor, Webhooks, and ChatGPT to quickly redesign your dashboard the way you want.

How to build an automated, auto-updating dashboard with ScreenCloud Playgrounds

How to build an automated, auto-updating dashboard with ScreenCloud Playgrounds

How to build an automated, auto-updating dashboard with ScreenCloud Playgrounds

Contents