The FrontFace digital signage software supports a wide variety of media types and file formats for on-screen display. In addition to images, videos, and PDFs, this also includes websites.
The advantage of integrating websites is that external systems can be easily and quickly incorporated. Specifying the URL of the desired page is all that’s required.
In addition to its own Chromium-based browser engine, the Windows version of FrontFace also offers the option of displaying websites using the Edge engine. This ensures maximum compatibility and the flawless display of a wide range of websites.
Despite this, websites are often not displayed optimally!
This is primarily because websites are designed for desktop browsers or mobile devices. Furthermore, websites often include elements such as navigation menus or banners that are pointless on a non-interactive screen and simply take up space unnecessarily. Fonts that are too small and color schemes that are not suitable can also negatively impact the display on a large screen.
Fortunately, FrontFace has a powerful feature that allows you to manipulate websites “on the fly” and optimize them for display on a large format screen. FrontFace’s “scripting function” lets you execute JavaScript code just after the page loads. This makes it possible to automatically fill out forms, dismiss cookie banners, integrate CSS code, and hide unwanted elements on the page, for example.
Practical script templates are included with FrontFace.
Several ready-made script templates are already included for your convenience and can be used immediately and customized to your specific needs. However, it should be noted that basic knowledge of JavaScript, HTML, and CSS is necessary to use this function.
The “Scripting” tab in the settings dialog of a website media object in the FrontFace Assistant provides access to this function (“Expert Mode” must be activated!). The following templates are included and can be used as follows:
- Cookie Banner: This script allows you to accept or dismiss common cookie banners, which would otherwise obstruct the website’s display on the screen.
- Inject External CSS: You can include an additional CSS file via an external URL, which will be applied to the currently displayed website. This allows you to customize various aspects such as appearance (e.g., colors and font sizes).
- Modify Page with CSS: Similar to including an external CSS file, you can insert the desired CSS rules directly here to manipulate the website’s display. For example, you can use the rule “display:none;” for specific selectors to hide elements on the website that should not be displayed.
- Forms Logon: If the website uses form-based authentication (i.e., not basic authentication), you can automate the login process with this script. Special placeholders for the username and password are also available so that these values don’t have to be stored as plain text in the JavaScript code.
- Debug Output: This script shows how to implement debug output in FrontFace. This feature is just intended for testing and setting up scripts only.
Have you tried the FrontFace software yet? Download the free trial version!