Support

What is the Website plugin?

With our website plugin, you can add external web content to your slides. The plugin is a bit like a swiss army knife, you can add a simple URL, you can add HTML code and you can use Javascript to scroll to a specific section, get rid of GDPR pop-ups, and log in to sites like salesforce, etc.

The Website plugin is also amazing with HTML5 widgets.

Watch the demo in our preview player.

Options

  • Website – If the website is hosted on a server, use the “Website” option and paste the URL.
  • HTML code – If you have an HTML code snippet, you can paste the snippet to the code pop-up. Where to find widgets?
  • 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 the 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.
  • Refresh periodically – The website is refreshed every time the slide is shown, however you can set the refresh interval to refresh more frequently.
  • Zoom – Depending on how the website is built, it may render different on certain devices. By adjusting zoom, you can make the page fit better.

​Website scripting

Website Scripting execution is a 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 Website 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. Website Scripting is supported in Windows, Linux, Mac, and Chrome extension (ChromeOS) players.

Scrolling to a position

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 the 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 the 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.

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

Refreshing page at an interval

This script forces to the 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.

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

Starting video

Website Scripting can be used to start a video on 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 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.

Login script performs the 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 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 are the ids of the elements. While possible with every browser, we focus on Chrome in this guide. Navigate to the page you wish to automate the login procedure and open up developer tools:

Open chrome 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).

Find login identifier that can be used by JavaScript

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 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 attribute 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

Microsoft login

Just replace replace username and password variables. This login script works for Microsoft, Office365, Hotmail and PowerBI 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();
}
setValue('i0116', user);
setTimeout(clickButton.bind(null, 'idSIButton9'), 100);
setTimeout(setValue.bind(null, 'i0118', pass), 500);
setTimeout(clickButton.bind(null, 'idSIButton9'), 1000);

Continuous scrolling

The script below will scroll the website from top to bottom at a given speed. This script is more complicated, but you don’t need to understand how it works. You can copy the script below and adjust the SPEED and JUMP_TO_TOP according to your needs.

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 falsevar 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);

Websites built with react.js

If the website you’re trying to script is built with react.js, you need to fire events that the input field has changed, because react won’t pick up changes directly done to the element by setting value. Read more: https://stackoverflow.com/questions/23892547/what-is-the-best-way-to-trigger-onchange-event-in-react-js

HTML5 Widgets

HTML Widgets are small code-based widgets that you can customize and design without having to think about coding at all.

There are tons of HTML widgets out there, the best option is to try your luck with a search engine, including the term HTML widget in the search query, for example, “Stock price HTML widget”. Here are some free ones that we’ve come across:

  1. Elfsight – over 30 high-quality widgets including Google Review, Coronavirus Stats, Countdown Timer, Pop Up, Pricing Table, Google Maps, Event Calendar, PDF Embed, Team Showcase, Menu, Weather, and lots more.
  2. WIDG.io – lots of responsive widgets for growing your business. Most of their widgets are made for touch interactive platforms, but you also find widgets like All-in-one Reviews, Before and after image slider, QR Code, and more.
  3. TradingView – Over 15 financial widgets, totally free.
  4. SnapWidget – many social widgets, some of them are free, others are pro.
  5. Powr.io – 50 widgets, free and premium. NB! Their widgets do not load in web preview due to security limitations but still work on players.
  6. Windy – Stunning weather pattern maps.
  7. WeatherWidget – a decent alternative to our weather plugin.
  8. ClockLink – even more clock configurations to supplement our clock plugins.
  9. TimeAndDate –  analog and digital clocks.
  10. KeepTheScore – various scoreboards, such as tally counter, leader-board, and basketball scoreboard.
  11. Timezone.io – dashboard to see the local time of various team members, great for distributed organizations.
  12. FX-Exchange.com – interactive currency converter widget that can be used on touch screens.

Do you know something we don’t? Let us know and we’ll update this list!

FAQ

The website is not showing Link

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 browser window. If the website you are trying to embed returns X-Frame-Options DENY/SAMEORIGIN header, the page cannot be displayed in an iframe because the website owner has forbidden it. However, the page is still rendered on our players that use webview instead.

What can be done?

  • You can contact the website maintainer or developer and ask them to lift the restriction.
  • You can use a player that displays the websites in a webview (see above) to bypass the restriction.

How can I log into websites with HTTP Basic Auth? Link

You can supply username and password in a special URL format: http://username:[email protected]/

This sends the credentials in the standard HTTP Authorization header.

How can I identify the player device in my web application? Link

If you have a web application and you need to identify which device is making a request to your app, you can use a dynamic URL parameter {UUID} that the player will replace at run-time with its UUID. For example a by using the following URL in the website plugin with a device that has UUID ABC123:

https://example.com?device={UUID} becomes https://example.com?device=ABC123
https://example.com/device/{UUID}/hi becomes https://example.com/device/ABC123/hi

Can I display PDF files? Link

You can simply upload a PDF file to your library where our server will convert each page in the document to an image. However, if you have a PDF file that is frequently updated, you can link to it instead with a website plugin so it would always show the most recent version.

Displaying PDF in Chrome extension

Our Chrome extension (including ChromeOS) players have a built-in PDF reader, so displaying PDFs is straightforward. 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 the 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 the 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 to display PDF files, here’s how:

  1. Append your file address to this URL: https://docs.google.com/viewer?embedded=true&url=YOUR_PDF_URL
  2. Make sure that it works in the browse, for an example: https://docs.google.com/viewer?embedded=true&url=http://www.pdf995.com/samples/pdf.pdf
  3. Paste the resulting URL to our website plugin

The HTML widget is not showing? Link

If the widget does not display, you can also try hosting the HTML code on a public server, (for example https://htmlpasta.com/) or serve it from an HTML file in your server.