The smart page app allows for advanced page display controls by using JavaScript to interact with the page content for completely custom functionality. In other words, the Smart Page app allows you to run simply snippets of JavaScript on any page to perform any sort of interaction you may require.

The Smart Page app is available for VuePilot version 2.2.4 and up.

A basic understanding of HTML and JavaScript is required to use smart pages.

How Does It Work?

Web pages are loaded as normal, however once the page has fully loaded your custom code is injected into the page and executed.  This enables any number of powerful customizations to perform very specific actions.

The code is written in standard JavaScript and is passed down to the VuePilot player via the API

Why Would I Use This?

We are often asked how to perform some sort of action on a page once it loaded in order to change what’s being displayed, some examples may be

• Clicking on a link to open another section of the page
• Expanding a dropdown list to reveal more information
• Entering and submitting information into a form such as login details or session information
• Scrolling to a particular part of a page
• Injecting content into the page, maybe a custom banner or a footer

The Smart Page app aims to solve these requests and allows users to achieve results with a few simple lines of code.

The applications for what can be done with Smart Page is endless

Regarding Alerts & Confirm

Please note that the VuePilot software disables all native alert and confirm browser functionality as it interferes with the rotation operation, so if you are attempting to test a smart page script, you will not be able to simply pop up an alert to test.

Regarding Support

Please note that we do not provide software development support. We can provide basic assistance with regards to troubleshooting your Smart Apps but it is up to the customer to build, develop and debug your Smart Page apps source code.

Examples

Scroll To Bottom Of The Page

You may wish to scroll to the bottom of a page, perhaps after a few seconds.  This can be done by simply using the window.scrollTo method and wrapping it within a setTimeout

In the following example we will scroll to the bottom of the page after 5 seconds (5000 milliseconds)

Code

setTimeout(function() {
  window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' })
}, 5000);

---

Scroll To Bottom Of The Page Slowly (100px At A time)

In this example, you may want to scroll to the bottom of a page but slowly so it is viewable on the way down. This can be done again by simply using the window.scrollTo method and wrapping it within a setInterval

In the following example we will scroll down 100px from the current position every 1 second until we reach the bottom of the page

Code

const height = document.body.scrollHeight;
let currentPos = document.documentElement.scrollTop;

setInterval(() => {
  if(currentPos >= height) return;

  window.scrollTo({ top: currentPos + 100, behavior: 'smooth' })
  currentPos =  document.documentElement.scrollTop;
}, 1000);

---

Inject Content Into The Page

You may wish to inject some form of content on the page, such as a banner or a heading. You can do this by using the insertBefore method

The following example will insert a H1 element, styled with a background color of red and a font color of white immediately after the body tag

Code

const h1 = document.createElement("h1");
h1.textContent = "TESTING VUEPILOT SMARTPAGE";
h1.style.color = "white";
h1.style.textAlign = "center";
h1.style.backgroundColor = "red";
h1.style.padding = "20px";
document.body.insertBefore(h1, document.body.firstChild);

---

Automatic User Login

User login can be performed by detecting if there are user login input elements on the page, then simply filling them in and submitting the form.

WARNING: Please be aware that you should create restricted READ ONLY user accounts if you wish to do this as the script will contain login credentials and will not be encrypted within our database. Do not use administrator accounts or personal accounts with elevated access. We suggest creating an account that only has access to view the required resources with no ability to WRITE or modify data.

In this example (taken from the Grafana login page), the user is directed to a login page displaying two input boxes named “user” and “password” with a login button that does not have a name, but is ARIA labelled. We first check if there is a “password” field on the page, and if so, then we will populate them and click the login button

Code

if (document.getElementsByName("password").length > 0) { 
  document.getElementsByName("user")[0].value = "demo"; 
  document.getElementsByName("password")[0].value = "password"; 
  document.querySelector('[aria-label="Login button"]').click(); 
}