Web
Working with scripts in the website plugin

Website Scripting

Automate websites on your screens with JavaScript, like logging in or scrolling.

About

Run your own JavaScript on a page in the Website plugin: scroll to a spot, log in, refresh, start a video or force the desktop view. Copy the examples here, or build your own with some programming. Works on Android, Fire OS, Windows, macOS, Linux and the Chrome extension, not in web preview or on Samsung Tizen.

Get Started

Add a script: click the Website plugin on the slide, then Add Script, and paste it. We gladly help subscription customers with simple scripts.

Examples

Scroll to a position

Scrolls 500 pixels down after 1 second (1000 ms), so the page has loaded. Try other numbers to find the right spot; the delay may not be needed on every site.

setTimeout(window.scrollTo.bind(null, 0, 500), 1000);

Scroll down the page slowly, again and again

Scrolls from top to bottom at a set speed. Copy it and change SPEED (1 to 1000) and JUMP_TO_TOP (back to the top at the end: true or false).

var SPEED = 20; //change the speed for faster/slower scrolling. Value between 1 and 1000
var JUMP_TO_TOP = true; //Scrolls back to top when scrolling reaches bottom. either true or false

var fps = 100;
var speedFactor = 0.001;
var minDelta = 0.5;
var autoScrollSpeed = 10;
var autoScrollTimer, restartTimer;
var isScrolling = false;
var prevPos = 0, currentPos = 0;
var currentTime, prevTime, timeDiff;

window.addEventListener("wheel", handleManualScroll);
window.addEventListener("touchmove", handleManualScroll);

function handleManualScroll(){
  currentPos = window.scrollY;
  clearInterval(autoScrollTimer);
  if (restartTimer){
    clearTimeout(restartTimer);
  }
  restartTimer = setTimeout(function(){
    prevTime = null;
    setAutoScroll();
  }, 50);
}

window.addEventListener("scroll", function (e) {
  currentPos = window.scrollY;
  if((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight){
    //scrolling reached bottom.
    if(JUMP_TO_TOP){
      window.scrollTo(0, 0)
      currentPos = 0;
    }
    else{
      clearInterval(autoScrollTimer);
    }
  }
});

function setAutoScroll(newValue){
  if(newValue){
    autoScrollSpeed = speedFactor * newValue;
  }
  if(autoScrollTimer){
    clearInterval(autoScrollTimer);
  }
  autoScrollTimer = setInterval(function(){
    currentTime = Date.now();
    if(prevTime){
      if(!isScrolling){
        timeDiff = currentTime - prevTime;
        currentPos += autoScrollSpeed * timeDiff;
        if(Math.abs(currentPos - prevPos) >= minDelta){
          isScrolling = true;
          window.scrollTo(0, currentPos);
          isScrolling = false;
          prevPos = currentPos;
          prevTime = currentTime;
        }
      }
    }
    else {
      prevTime = currentTime;
    }
  }, 1000 / fps);
}

setAutoScroll(SPEED);

Refresh the page every minute

Reloads the page every 60 seconds. Each reload runs the script again, so it keeps going.

setTimeout(function(){
  window.location.reload(true);
}, 60000);

Start a video on the page

Waits 1 second, then plays the first video on the page.

setTimeout(function(){document.getElementsByTagName('video')[0].play()}, 1000);

Show the desktop version of a site (Android)

Some sites show their mobile version on Android players. This makes the page think it’s a Full HD browser.

const viewportWidth = 1920;
const viewportHeight = 1080;
const devicePixelRatio = 2;

// Set the viewport meta tag to control the layout on mobile devices
const viewportMetaTag = document.querySelector('meta[name=viewport]');
if (viewportMetaTag) {
viewportMetaTag.content = `width=${viewportWidth}, height=${viewportHeight}, initial-scale=${1 / devicePixelRatio}, maximum-scale=${1 / devicePixelRatio}, user-scalable=0`;
}

// Set the window size to match the viewport
window.resizeTo(viewportWidth, viewportHeight);

// Trigger a resize event to ensure proper rendering
const resizeEvent = new Event('resize');
window.dispatchEvent(resizeEvent);

Logging in

Log in to Microsoft, Office 365 or Power BI

Replace the user name and password. Works for Microsoft, Office 365, Hotmail and Power BI sites.

var user = "YOUR_USERNAME_HERE";
var pass = "YOUR_PASSWORD";
function setValue(id, value){
  document.getElementById(id).value = value;
  document.getElementById(id).dispatchEvent(new Event("change"));
}
function clickButton(id){
  document.getElementById(id).click();
}
setTimeout(setValue.bind(null, 'i0116', user), 1000);
setTimeout(clickButton.bind(null, 'idSIButton9'), 1100);
setTimeout(setValue.bind(null, 'i0118', pass), 1800);
setTimeout(clickButton.bind(null, 'idSIButton9'), 2000);

Log in to another website

When it comes to logging into a website, there is no one-size-fits-all solution. Each website is a different system and needs a tailored approach. While JavaScript programming skills would be beneficial, it is certainly possible to create the script without any technical background. We gladly assist our subscription customers with simple scripts.

The login script performs the following actions:

  1. Find the username input field and fill it with our username
  2. Find the password input field and fill it with the password
  3. Find the login button and click it

First, we need to teach the script to find the elements in the web page. To do so, we need to find out what the IDs of the elements are. This is possible in every browser, but we focus on Chrome in this guide. Navigate to the page where you want to automate the login and open the developer tools. (Settings -> More Tools -> Developer Tools)

In the developer tools, choose the Elements tab if not already selected. Then click on the Select Element button (step 1) and mouse over the username input field and click on it (step 2). The HTML code that represents the username field will be highlighted; it should be an <input> tag. Most website creators assign a unique ID to that field that we can use to reference it in the script, in this example it is “user_login” (step 3).

Repeat the same process for the password field. In our example, the password field id is “user_pass“. Ideally, the login button also has an ID attribute (here “login_btn”), in which case we have all the information needed to create the script:

document.getElementById('user_login').value = "YOUR_USERNAME_HERE";

document.getElementById('user_pass').value = "YOUR_PASSWORD_HERE";

document.getElementById('login_btn').click();

Sometimes, however, the login button may not have an ID assigned, but instead, all fields are wrapped in a <form> element. Instead of clicking on the button, we can also call the submit() function on the form itself:

document.getElementById('loginform').submit();

It is possible, however, that the form does not have an ID attribute either. Then we can search for all <form> elements on the page and submit the first one we find, but beware that this only works if there is only one <form> on the page:

document.getElementsByTagName('form')[0].submit();

If you are very unlucky and none of the elements have an ID attribute assigned, then there are 2 options:

  1. Contact the website developers and ask them to assign ID values to login page elements
  2. Hire a developer to write the script – it’s still possible to find the elements, but it’s beyond the scope of this article. A qualified JavaScript developer should be able to develop the script in about 30 minutes to 1 hour

Options

In the Website plugin:

Option What it does
Add Script Where you add and edit scripts, in the Website plugin
Execute Script During Preload Runs the script 15 seconds before the slide shows
Supported Android (3.0.8 and up), Amazon Fire OS, Windows, macOS, Linux, Chrome extension (ChromeOS)
Not supported Web preview and Samsung Tizen: they show pages in an iframe, which blocks scripts

FAQ

Can the script run before the slide shows?

Yes. Turn on Execute Script During Preload: it runs 15 seconds before the slide.

The site is built with React. What changes?

React doesn’t notice values set straight on a field, so fire a change or input event too (how). The Microsoft login example does this.

How do I log in with HTTP Basic Auth?

Put the user name and password in the address: http://username:password@example.com/. No script needed.

How does my web app know which player is asking?

Put {UUID} in the address; the player replaces it with its ID. https://example.com?device={UUID} becomes https://example.com?device=ABC123.

Why doesn't my script run?

Scripts don’t run in web preview or on Samsung Tizen players. Test on a supported player.

Related Articles

Get started designing your content

Most people think designing content for digital signage is super difficult, but if you can use PowerPoint, you can also create and design your own content in our editor.

Book a free demo

Loading free times…