Website plugin

With website plugin you can integrate external content to your digital signage.

Options

  • Pre-load website – Player will start loading the plugin 15 seconds before it will be displayed, so when the slide is displayed, the website has already loaded and is ready to display. If the website you want to display has some load animation or video set to autoplay, you can disable this option so that the animation does not run while plugin is pre-loading.
  • Enable scrolling – By default the scrolling behavior is disabled so that the scroll bar is not visible. If you want users to interact with the site, you can enable scrolling.
  • Zoom – Depending on how the website is built, it may render different on certain devices. By adjusting zoom, you can make the page to fit better.

Website scripting

Script execution is very powerful feature, however it requires some understanding of JavaScript code. This page provides common script  examples, however with enough programming experience it’s possible to do complex workflows.

Please note that scripting does not work in web preview and Android players because they display web content in an iframe element (whereas other players use webview element) that does not support this functionality due to how web security works.

Scrolling to a position

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

The window.scrollTo function takes in 3 parameters:

  1. context (null)
  2. horizontal X coordinate (0)
  3. vertical Y coordinate (500)

Usually vertical is the axis we want to scroll. In this case we scroll 500 pixels vertically, but you need to experiment with the numbers to find appropriate amount of pixels to scroll to.

The scrollTo function call is wrapped in setTimeout function call, this delays the code execution to make sure page is loaded. In this case we delay execution by 1000 milliseconds, however depending on how the website is built, it may not be necessary. You can try setting the value to 0 and see if the page scroll still works.

Refreshing page at interval

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

This script forces to page to refresh every 60 sections. It’s worth noting that it calls setTimeout that is executed only once, however since the script causes the page to reload which executes scripts again, so there is no need to use setInterval.

Starting video

Script can be used to start a video in the page. This example will wait for the page to load 1 second, get all <video> tags, take the first one and call play() function on it after. If the page has multiple video tags, this would start the first video it can find.

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

Logging in to a website

When it comes to logging into a website, there is no one-size-fits-all solution. Each website is 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.

Login script performs following actions:

  1. Find username input field and fill it with our username
  2. Find password input field and fill it with password
  3. Find 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 are the ID’s of the elements. While possible with every browser, we focus on Chrome in this guide. Navigate to the page you wish to automate the log in procedure and open up developer tools:

Now from the developer tools pane that just open up select “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 will be highlighted that represents the username field, 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” (step3).

Repeat the same process for the password field. In our example the password field id is “user_pass“. Ideally the log in button has also id attribute present, 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.getElementsByTagName('login_btn').click()

Sometimes however the log in button may not have an id assigned, but instead all fields are wrapped in a <form> element. In the step 4 of the above screenshot the form has an id assigned. Instead of clicking on the button, we can also call submit() function on the form itself:

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

It could be possible however that the form does not have an id attributte assigned 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

FAQ

Website is not showing

Depending on the player you are using, the website is embedded differently:

This is due to how html5 works. Iframe runs in a ‘sandbox’ as part of the browser window, whereas webview functions as a separate web window. If the website you are trying to embed returns X-Frame-Options DENY/SAMEORIGIN header, the page can not be displayed in iframe because website owner has forbade it. However the page is still rendered on our players that use webview instead.

Can I display PDF files? 

Displaying PDF in Chrome extension

Our Chrome extension (including ChromeOS) players have a built-in PDF reader, so displaying PDF’s is straight-forward. In addition there are some extra parameters that you can use to customize how the PDF is displayed. The parameters are added at the end of the file URL:

  • #page=2 – Opens the file on second page.
  • #view=fith – Fits the page horizontally, the other option is fitv to fit vertically.
  • #zoom=150 – Zooms the page 150%.

You can also combine the parameters by chaining them together with sign, for an example:

https://example.com/file.pdf#page=2&view=fith

Displaying PDF in Android, Windows, Linux & MacOS

Our app on these platforms does not have a PDF viewer built in by default, but it’s possible to use an online PDF reader built by Mozilla to display the PDF files, here’s how:

  1. The PDF file needs to be proxied via our servers, we have a service for that. To use it, simply append your file address to this URL: https://playsignage.com/proxy?address=YOUR_URL. By replacing YOUR_URL with the file address, your full URL should look like this: https://playsignage.com/proxy?address=http://www.pdf995.com/samples/pdf.pdf
  2. Go to the URL you just created to make sure it works!
  3. Next we need to encode the URL as it contains characters that can’t be in the browser’s address bar. Copy the URL with your address, now open this service and paste the URL to the textbox there. Next click the ‘encode’ button and in the textbox below you’ll see the result, now copy the result.
  4. By encoding the sample URL we were using, the result now should look something like this: https%3A%2F%2Fplaysignage.com%2Fproxy%3Faddress%3Dhttp%3A%2F%2Fwww.pdf995.com%2Fsamples%2Fpdf.pdf
  5. Now let’s append the encoded result to yet another URL, in this case the online PDF viewer: https://mozilla.github.io/pdf.js/web/viewer.html?file=ENCODED_URL_HERE
  6. By now the example we’ve been using looks like this: https://mozilla.github.io/pdf.js/web/viewer.html?file=https%3A%2F%2Fplaysignage.com%2Fproxy%3Faddress%3Dhttp%3A%2F%2Fwww.pdf995.com%2Fsamples%2Fpdf.pdf
  7. Open the URL you created to make sure it works, then you can use it in the website plugin!

Tip: You can also use parameters to open the PDF at specified page, change zoom – documented in here.

 

Play  accepts popular credit cards