Publish content to your screens directly from Microsoft Teams
Learn More
Digital Signage
What is Digital Signage?What is ScreenCloud?HardwareAppsProduct UpdatesSecurityDashboardsPartnerships
ChromeOSMicrosoftIndustries
ManufacturingFood & BeveragesRetailEducationHealthcareFitness, Leisure & CultureUse Case
Employee Facing ScreensScreen Network ManagementCase Studies
Show all case studies
How to Port and Customize Replit Scripts for Your Digital Signage
Leverage Replit's active community to get code inspiration for customizing digital signage. Whether involves porting existing JavaScript or adding your own dynamic data, this article will show you how.
It’s a phenomenal time to be a jack-of-all-trades IT person in a small office. No-code, low-code, GPT, Zapier…incredible new apps and tools are released seemingly every day. If you can keep up with even a fraction of what’s happening in the AI and automation space, you can create and build magnificent things in mere minutes.
But nothing beats collaborating and problem-solving alongside real people. People with different skills, perspectives, and experience than you. And that’s why the surging popularity of Replit makes us so happy. It’s a place where people can code projects, run their code in a browser, and share everything with an active community. Among the creative and unique projects there, you might even find some code to customize your digital signage.
You don’t even need a Replit account to preview people’s scripts and view their code. Or, if you’re up for it, tweaking what they’ve written to make it work for your digital signage. Any projects coded in HTML, CSS, and JavaScript can be ported from Replit to ScreenCloud Playgrounds, and up on your digital signage in minutes. Here are some examples.
A brief introduction to Replit
Head over to Replit’s community and scroll through the most popular recent creations. There’s everything from physics-based games to scripts for building a custom frontend interface for GPT4.
When you click on a project, a deployed version of the app runs in the leftmost portion of the screen while the description, comments, and stats are visible on the right-hand side. You don’t need a Replit account to view or interact with anything. So, if all you want to do is port HTML, CSS, and JavaScript code over to ScreenCloud, open Playgrounds in a new tab, create a new instance using a blank template, and let’s dive in.
Pasting someone else’s JavaScript app into your digital signage
We created the Image Zoom Script to showcase the easiest way to move a Replit project over to ScreenCloud. All the Image Zoom Script does is display an image and zoom in and out of the four quadrants at predetermined intervals. The current code displays a restaurant menu, but you could put anything there, like updates to your office floor plan or a photo of everyone at the last off-site meeting. Here’s how to make the Replit code your own:
- Click the ‘Show Code’ button (below the large ‘Fork’ button in the right-hand pane).
- Select index.html, copy everything below `</head>`, and paste it below `</head>` in the Playgrounds HTML column.
- Back in Replit, click style.css and copy all of the text, then paste it into the Playgrounds CSS column.
- Finally, select script.js in Replit and copy all of the text over to the Playgrounds JavaScript column.
- Click ‘Preview’ in Playgrounds to make sure that everything looks and works the same as the Replit script.
Now, all you need to do is update the image by replacing the link after `src=` in the HTML, and adjust the image size on lines three and four of the CSS column. If you want to add or remove zoom transitions, play around with the `transform` effects in the JavaScript column.
Want to try something more complicated? Dump an existing Replit project into ScreenCloud and use Playgrounds’ Application Data feature to post JSON data to your script. That’s what we’ll do in our second project.
Adding your own dynamic data to a ported Replit project
For this part of the tutorial, we created a Digital Signage Leaderboard. On Replit, it’s just a basic table with some CSS styling. But with a few small changes to the code and a Zapier automation, it’ll be a constantly up-to-date office leaderboard.
First, copy everything from the Replit’s index.html, script.js, and style.css files and paste them into the corresponding columns in Playgrounds, just like we did in the last example (e.g. remember to only copy the HTML **after** `</head>`). Click Preview to make sure that everything looks right. This is also a good time to adjust CSS style options like fonts, colors, table size, etc.
Adding dynamic data is pretty simple—and with a form or spreadsheet, anyone on your team could update the leaderboard anytime something changes. Just replace what you copied into the Playgrounds JavaScript column with a few new lines of code that reference the Application Data feature:
const render = data => {
var tableData = [
{ id: "1", name: data.name1, score: data.score1 },
{ id: "2", name: data.name2, score: data.score2 },
{ id: "3", name: data.name3, score: data.score3 },
{ id: "4", name: data.name4, score: data.score4 },
{ id: "5", name: data.name5, score: data.score5 }
];
var tableBody = document.getElementById("leader-body");
for (var i = 0; i < tableData.length; i++) {
var rowData = tableData[i];
var row = document.createElement("tr");
for (var key in rowData) { \
var cell = document.createElement("td");
cell.textContent = rowData[key];
row.appendChild(cell);
}
tableBody.appendChild(row);
}
};
getData().then(data => render(data));The first line is what enables you to insert data from the Playgrounds Application Data panel into your table. With that function in place, you then need to insert those variables after `var tableData =`. So in your JavaScript, `data.name1` will display whatever data you have after the variable `name1` in the Application Data panel.
Just to be safe, populate your JavaScript table with placeholder data in your Application Data and preview the output. If everything looks good, it’s time to decide how you want to simplify and automate the process of updating the data. The easiest option is to automatically update ScreenCloud Playgrounds with a Zapier Webhooks workflow. But if you want to do essentially the same thing without paying for a Premium Zapier account (required to use its Webhooks tool), there’s a workaround with a Zapier Code step that works on a free account.
Start by creating a Google Spreadsheet (or you could do something similar with Airtable, SmartSheets, etc. if you want). Populate the first row with all of the variables you created in your Application Data. For example, A1 might contain name1, B2 is name2…F1 is score1, and so on.
In a separate worksheet, put the names of participants in one column, and their scores/totals in the adjacent column. Use the equation `SORT(A1:B5, 1, FALSE)` to ensure participants are always ranked from highest score to lowest score, then back in the first worksheet, link name1 and score1 to the cells in the highest ranking position. Repeat for all of the positions, and double-check that name5 and score5 should always show the person in fifth place, even after updating the data.
Next, put together a new Zap using the “New or Updated Spreadsheet Row in Google Sheets” trigger, pointing to the two-row worksheet with named variables. Leave your Zap’s Trigger Column field blank and test the connection. All of your data should be listed out.
For the action triggered by spreadsheet updates, choose the Code by Zapier app with “Run JavaScript” as the event. After that, you need to create key names that are paired with map values from your spreadsheet.
Once those are ready, you can add them to some JavaScript code that will send all of the most recent data to your Playgrounds Application Data, any time a cell in your spreadsheet is updated. In fact, if you’ve been using the same naming conventions that this article uses, you should be able to copy this as-is:
const name1 = inputData.name1;
const score1 = inputData.score1;
const score2 = inputData.score2;
const name2 = inputData.name2;
// repeat for all of your key names…
const tableData = {"name1": name1, "name2": name2, "name3": name3, "name4": name4, "name5": name5, "score1": score1, "score2": score2, "score3": score3, "score4": score4, "score5": score5};
const data = { data: tableData };
const options = {
method: 'PUT',
body: JSON.stringify(data),
headers: { 'Content-Type': 'application/json' }
};
const url = '[INSERT YOUR API URL FROM PLAYGROUNDS HERE';
const response = await fetch(url, options);
output = { result: await response.json() };Test the Zap, then go check to see if it updated your Application Data correctly. Assuming it did, you’re all set! Any time your spreadsheet data is updated (which you could easily connect to your CRM, a form app, or something else to track employee performance), the changes will show up on your digital signage leaderboard. All thanks to a little inspiration you found on Replit.
If you can code it, your signage can show it
Replit is just one of many coding communities where people share what they’ve built. You could use the steps from this tutorial to create signage based on projects from CodePen or JSFiddle. It’s a great time to be a tinkerer, and this article just scratches the surface of what you can do with ScreenCloud. Check out our guide to adding Chart.js graphs to digital signage or, if you don’t have an account yet, sign up for a free 14-day trial of ScreenCloud.
Ready to get your organization connected?
Connect your first screen today with our 14-day free trial