Table of Contents
What's the Web Page app?
Fugo's Web Page app takes a link to a website or service and renders the content, making it easy to repurpose web content for your digital signs.
Any web page can be a great and strategic source of content for your digital signage display, on its own or included in a digital dashboard of company info! For those pages that are a bit more content-heavy, turn on scrolling so your audience can get the full picture đ
It's also useful to:
Display dashboards and webpages with basic authentication (user ID/password)
Show content past a login, such as graphics, notices, or data hosted on a webpage
With Fugoâs Web Page app you can:
Select the web page of your choice
Set the duration for your app inside a playlist
Scroll your page on screen
Implement custom Javascript to access & display private links, websites, or dashboards
â
Configuring the Web Page app
Note: there are two ways to add content with Fugo - via our playlist builder and in our design studio. Weâll cover the steps for both methods in each section.
1. Using the playlist builder
1.1 Log into your Fugo Account. If you donât have an account yet, you can start your 14-day free trial here.
1.2 Click Apps in the top navigation bar to get to our app store.
1.3 Scroll to find the Web Page app in the store. To find it even faster, you can search for it via the search bar at the top of the store.
1.4 Click Try App to create a new playlist with the app.
1.5 A window will appear where you can customize the appâs settings.
1.6 First, paste the URL of the web page youâd like to display in the space provided.
1.7 Next, you can set the duration for your app (how long it will run inside of a playlist before the next piece of content.)
1.8 Toggle on the Scroll option if you want your page to scroll on screen.
đĄ You'll see options for adding a script to the web page app at this point. This feature is used to access private links - such as dashboards, internal company web pages, etc - and load them onto screen from your player device.
Jump down to section 4 - "Scripting" for instructions on using the Script feature.
When youâre done, click Save Changes at the bottom right corner of the window. This will take you to back to the Playlist Builder to continue building out your playlist.
To continue on to publishing instructions from here, you can skip to this section (step 3.5)
2. Using the Design Studio
2.1 Click Studio in the top navigation bar. Then click Create in Studio to start a new design.
2.2 This will open up a blank canvas for you to start adding content to. To add the Web Page app, either scroll to find it in the Apps menu to the left or search for it to find it faster.
2.3 Drag and drop the app onto your canvas from the menu. Or simply click on it and it will be added to your current slide.
2.4 You can drag the sizing handles of the app around to change the size. Make it smaller so you can split your screen and add other content, or make it full screen - thatâs totally up to you!
2.5 Customizing the Web Page app settings works the same way in the design studio as it does in the playlist builder - all settings will be found in the panel to the left. To bring up the panel, click on the app from the canvas.
Follow the steps in section 1 above to configure the app.
You can continue to customize your content however you wish in the studio! Add media from one of our integrations, add stickers, use frames to create unique media stylings. Add slides with extra or duplicate content. You can even split your screen into zones!
2.6 When youâre satisfied with how your content looks, click Save and Close. This will close out the design studio. To publish this content, youâll need to add it to a playlist, which weâll cover in the next section.
3. Publishing the web page to your screen/s
In order to get your web page onto your screens, you need to add it to a playlist.
3.1 Select Playlists in the top navigation bar and Create Playlist to start a new playlist.
You can also open the playlist builder with the Publish option located in your Studio content.
3.2 Give your playlist a name (we suggest making it something relevant to distinguish it from other playlists later on down the road.)
3.3 Click Select Screens to choose the Screen/s, Screen Group, or Channel where you'd to publish your playlist.
3.4 If you haven't added content to your playlist (because you built your content in the Design Studio, for example) now you can. Click Select Content.
If you created your Web page display in the Design Studio, you'll find it saved in the Studio Content tab.
3.5 You can add more content to your playlist at any time by clicking Add More Content and choosing other apps, uploaded media, saved dashboards, or Studio content.
3.6 When you've selected all the content items you want to add to this playlist, it's time to put it on screen or schedule a time for it to go live.
Click Publish to send this content to your screen/s right away. This action is helpful if you're simply testing content.
If you want to set a more precise recurring schedule for this content or plan for it be scheduled in advance, you can use our Scheduler to do so.
You can read more about your publish & scheduling options in our Playlists collection.
3.7 If you donât want to publish just yet, you can click Finish Later and come back to your playlist at any time.
4. Using the Scripting feature
There is an option to add a custom script implementation to the Web Page app in order to display your preferred URL. This comes in handy in a few situations:
You want to display a dashboard on screen by loading it directly from your player device (as an alternative to our TV Dashboards feature, which periodically makes screenshots of your dashboard on our servers.)
You want to display a dashboard or internal web page that has elements which can not be captured by our TV Dashboards feature - such as an animation.
Sample script
The following sample script is for accessing a web page that uses a simple email & password authentication method.
Your team can use it as a template for customizing your own script.
You can also reach out to our team at support@fugo.ai for help with script implementation.
runScript();
// wrap the code so await keyword can be used
async function runScript() {
const email = "simpleForm@authenticationtest.com";
// password
const password = "pa$$w0rd";
// use this if you need to hide navigation panel
// or the useful part is further down the page
const scroll = 100;
// the way Web Page App scripting works is by Android (or Windows)
// app executing this script on every location change
// which means that if the dashboard is not an SPA, this script
// will be executed after authorization form is submitted
LOG(window.location.toString());
// this means browser was redirected to login page
if (
window.location
.toString()
.includes("https://authenticationtest.com/simpleFormAuth/")
) {
const usernameSelector = "input[type=email]";
await waitForSelector(usernameSelector);
await type(usernameSelector, email);
const passwordSelector = "input[type=password]";
await type(passwordSelector, password);
const submitSelector = "input[type=submit]";
await click(submitSelector);
} else if (
window.location
.toString()
.startsWith("https://authenticationtest.com/loginSuccess/")
) {
// we're on the dashboard page
// scroll it
const dashboardSelector = "body";
const element = document.querySelector(dashboardSelector);
if (element) {
element.style.position = "fixed";
element.style.top = `${-scroll}px`;
element.style.left = 0;
element.style.width = "100vw";
element.style.height = "100vh";
element.style.zIndex = 99;
element.style.margin = 0;
}
// remove unwanted items
document.querySelectorAll(".navbar, footer").forEach((el) => el.remove());
}
// UTILS
function LOG(...args) {
console.log(...args);
}
async function waitForSelector(selector, timeout = 20000) {
LOG("Waiting for a selector " + selector);
const pauseBetweenTries = 500;
let i = 0;
do {
if (document.querySelector(selector)) {
break;
} else {
if (i * pauseBetweenTries > timeout) {
throw new Error(`Timeout waiting for ${selector}`);
}
LOG(`Still waiting for ${selector} #${i}`);
}
await pause(pauseBetweenTries);
++i;
} while (true);
LOG(`Found ${selector}`);
}
async function click(selector) {
LOG(`Clicking on ${selector}`);
document.querySelector(selector).click();
}
async function type(selector, value) {
document.querySelector(selector).value = value;
}
function pause(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
}
Video demo
The video below demonstrates how scripting works within the Web Page app đ
5. Usage notes & FAQs
Notes
Testing
As the presentation quality of web pages can vary across hardware, itâs worth testing the page you would like to show in a controlled environment before putting it live across your network.
Supported devices
At this time, Web Page scripting is only supported on Android & Windows based devices. You can check out our supported devices & minimum OS requirements here.
Web page preview
If you've added a custom script for your web page, you may still see a warning in the app settings that your URL is prohibited from being displayed in an iFrame. Don't worry about this - your web page should still be displayed on your player.
As we don't support previews for your custom scripted web page in the CMS yet, you'll need to publish it to check that it's been properly rendered on screen. Reach out to support@fugo.ai if you're having issues.
FAQs
1. Why won't my website display?
Many websites have strict security measures in place, governing their display on external platforms. This practice is generally helpful as it boosts online security, particularly for sensitive services like online banking. Nevertheless, these security constraints can pose a challenge when it comes to showcasing specific websites through third-party services, such as Fugo.
The only way around this is to talk to the website administrator & ask them about loosening their security restrictions.
2. Can your team help me with my specific link or requirement?
Yes! If you need help tailoring the sample script for your own purposes, or need our engineering team to help write a custom script, you can reach out to support@fugo.ai. Please note that depending on the complexity of the implementation, you may be quoted an implementation fee for custom work.