With this smart integration, you can easily display a web page on your information screen. The integration takes a screenshot of the page you want to view and then updates that screenshot after an hour. You can set different steps to be taken before the picture is taken; log in, click buttons, etc. This enables you to display web pages that are behind a login or similar.
NOTE: the integration can only display public web pages, if the web page is only available internally on your network, it will not work.
If you are going to display a web page as is, try publishing it as a normal web link first. You can read how to publish a web link here: Publish web links, Youtube & HLS stream
Jump to:
To add an integration, follow these steps:
-
Click "Integrations"
-
Click Website screenshot
- Click "Add to PLAYipp"
- Click "Activate connection"
- You can now add a source. Start by entering the display name of the source.
- Enter the URL you want to display
- In order to get correct data, you may need to set the time zone, you can do that here.
- Here you can choose which browser should be used to take the picture. The version can be adjusted in case the webpage does not support a particular browser.
- If you need to change the resolution of the browser that takes the image, do so here. It can be good to do if you have to display the widget on a smaller area, and you want the web page to adapt to that size.
Sometimes you also need to increase these values if you need to scroll on the web page to see what you want to display.
- If you want the browser not to identify itself with a user agent, uncheck this.
- Many pages have the same type of login flow, you can read more about how it works here: Requires login
- If you tick this option, you can add scripts that run in the browser before the player takes a picture. You can read more about it a little further down in the guide
- Click add source
Before you can start adding autologin or scripts, you need to know how to find out the names of the elements you interact with. To find out, follow these steps:
- Open the browser in incognito mode (the most common keyboard shortcut is ctrl/cmd + shift + n)
- Open the link you want to display in this new window. In the guide below we use https://content.playipp.com/test/login/ but all web pages are built differently so you will get different names.
- Right-click the element whose name you want to find out.
- Select inspect
- A window will pop up with all the HTML code for the website. A row will be highlighted. When you hover your cursor over this row, you will see that the field you right-clicked on will be highlighted.
Right-clickn this line.
- Choose copy > Copy selector
Now you have a piece of text in your clipboard. You can paste this field name/selector into various scripts to determine which element to interact with.
NOTE: All pages are built differently, so the names are different for each page.
With the login required button, you can easily create a script that enters a username, password and then clicks login. If you have to type username > click next > type password > click login or similar, you have to use the scripting option to do each step separately.
When you've filled everything in, it might look something like this:
NOTE: All pages are built differently, so the names of the selector are different for different pages.
With scripts, you can set up a number of steps to take place before a screenshot is taken on the page. It could be logging in, going to a subpage, approving cookies or the like.
TIP: It's easiest to open an incognito window while you figure out what steps are being taken. If you use your usual profile in the browser, you may have accepted cookies, logged in or the like already.
In the example below, a button called "#wt-cli-accept-btn" is clicked, then wait 5 seconds before the picture is taken.
If you make a mistake or put the steps in the wrong order, you can change the order of the steps by pulling the handles (the 3 lines on the left side) and dragging them correctly.
The options available are the following:
- Click
Simulates a click on a specific part of the website.
For example, click the login button, a link on the page or the "Accept cookies" button on pop-ups that always appear.
- Drop down menu
Selects an option from a drop-down menu. For example drop-down menus to select months, years.
The value field is the dropdown value you want it to select, to see how to find the name of the selector see the selector section
- Write
Writes text for a specific part of the website. For example. Enter username in a login form or enter text to search in a search field.
Value is the text to be written, to see how to find the name of the selector see the selector section
- Write (protected)
Enters sensitive text into a specific part of the website. For example. Enter a password in a login form.
Value is the text to be written, to see how to find the name of the selector see the selector section
- Wait
Wait for X number of seconds before the script moves on to the next step. For example, if in the previous step you have clicked on a button and now want to wait a few seconds for the website to load properly.
- Enter/Return
Simulates Enter key press on a specific part of the website. For example, if in previous steps you have entered something in a search field and now want to press Enter to search. To see how to find the name of the selector see the selector section
- Go to URL
Loads a new web link to continue the script on.
For example, if in previous steps you have logged in to a service, now you want to go to a specific part of the service.
The value is the web link to which the script should go.
- Add CSS
If you want to hide part of the web page or change the CSS, you can use add CSS.
Value is the CSS code to be executed e.g. "color: #ffffff; background-color: # 000000;". To see how to find the name of the selector see selector section
If no selector is selected, the CSS will go directly to the body element.
When you have your source ready, you can add a widget to the screen that displays this.
- Click here
- Click "Publish"
- Click on the location or group you want to publish the widget to
- Click on the area you want to publish the widget to
- Click "Add new"
- Click "Automated content"
- Click Add website screenshot
- Click on the source you want to add
- Here you get options to change the position of the screenshot in the area and zoom.
- When you are done, click add to playlist
- Here you can change the name of the widget.
- Click select folder
- Select the folder you want to save the widget to
- Click select folder
- Click save
- Now your widget is published on the screen and it will appear on the screen soon.