JavaScript Injector

The JavaScript Injector from Screenly introduces an innovative utility to your digital signage content development toolkit. Essentially, this feature enables the execution of JavaScript code on a website. While the most prominent application might be logging into websites, its capabilities extend beyond this. For instance, it can be utilized to perform actions like dismissing a GDPR consent dialogue, thereby offering a more seamless user experience.

Getting Started

To get started, install the Screenly CLI.

In order to use the JavaScript Injector, you need first to create the web asset.

You can do that in the user interface, our CLI or by using our API directly. The recommended way to work with our JavaScript Injector is to use the CLI, so we will be using that for the documentation.

Add Engadget as an asset

$ screenly asset add https://www.engadget.com Engadget
+----------------------------+-------------+------+--------+
| Id                        | Title     | Type | Status |
+----------------------------+-------------+------+--------+
| XXXXXXXXXXXXXXXXXXXXXXXXXX | Engadget | N/A  | none   |
+----------------------------+-------------+------+--------+

Let's store the Asset ID for later

$ export ASSSET_ID=XXXXXXXXXXXXXXXXXXXXXXXXXX

Alternatively, we can use the nifity --json option in the CLI and pipe it to jq to just get the Asset ID:

$ screenly asset list --json | jq -r '.[] | select (.title|test("Engadget")) | .id'
XXXXXXXXXXXXXXXXXXXXXXXXXX

With our asset created, we can now apply the JavaScript Injection for this site. The above site, Engadget, uses Yahoo's cookie consent popover. When you first navigate to the site, you need to click the cookie consent dialogue to continue. This is obviously not ideal for digital signage.

Luckily, we can use JavaScript to close this dialogue. The script yahoo-cookies-consent-closing.js does just that, so let's apply it to our asset using the CLI.

Apply our Yahoo cookie consent closer to the Engadget asset

$ export JAVASCRIPT_URL='https://raw.githubusercontent.com/Screenly/playground/master/javascript-injectors/examples/yahoo-cookies-consent-closing.js'
$ screenly asset inject-js "$ASSET_ID" "$JAVASCRIPT_URL"
20XX-XX-XXTXX:XX:XX.XXXZ INFO  [screenly] Asset updated successfully.

That's it! When the asset now loads on your screen, the above snippet will run automatically and close the cookie consent dialogue.

Important considerations

Your script should be idempotent as it can run multiple times.
Your script should execute with an interval or await when a specific element appears on the page. There is no guarantee that the page is fully loaded when the injector runs the script.
Screenly player persists cookies set for a slide until the player reboots or playlist changes. You can check if you have already set a cookie to optimize your script.
If your page includes redirects, the player will execute the injection script on each page.

JavaScript Injector

Getting Started

Important considerations

Examples