Webpages

Using your already existing webpages is an excellent way of adding dynamic and relevant content to your screens and the webpage settings can help you achieve the best results possible.

Quick Guide

1. Select Add media -> More -> Webpage, input the full URL that you would like to show and select Add webpage
2. Select the playback mode on the Edit media tab that opens
3. Make any additional settings required
4. Select Save

See below for detailed explanations of each available configuration step.

Add webpage

This is the first step where you input the URL, the address, to the webpage that you want to show. Select Add media -> More -> Webpage. If your site has a Webpages folder, you can also select Add webpage there.

Name

• Give the URL a more user-friedly name (optional)

Url

• Input your URL including protocol, for example https://www.smartsign.se

Select Add webpage (Add in the Webpages folder). The webpage is created right away with the playback mode Live, and its details open on the Edit media tab. There you will see a preview of the website where you can select playback mode.

If you enter a YouTube or Vimeo address, it is saved as a video stream instead, see Video Streams. In Template Creator, such an address can't be added as a webpage. For on premise installations, webpages can be added in Template Creator only with Add media -> More -> Webpage, not selected from the media library.

Action bar
The action bar allows you to preview and see the changes you make for the website.

• Preview
  • Click Preview to see how the webpage will look on the screen.
• Move
  • Move the webpage to another folder.
• Delete
  • Use if you want to remove the media file
• Refresh
  • Reload the preview using the current settings, also before you have saved them.
• Crop
  • Crop the webpage. Only available in Snapshot mode. Read more below.

Playback mode

There are two playback modes you can select.

Live

• The webpage will be shown live, using the built-in web browser of the device.
• Screens may have limitations depending on the website you want to show.
• Advanced features are generally only supported by the Smartsign Windows Player.
• If the webpage blocks being shown in a frame, a warning tells you that it will not work with Live on most screens. Use Snapshot instead.

Snapshot

• The webpage will be shown as a static image. The image will be updated at a specified interval and it can be cropped if desired.
• Snapshot works with any screen or player as the Smartsign server is responsible to feed the snapshots to the devices.
• Read more about advanced features below.

Windows player only settings

In Live mode, turn on Windows player only settings to show the more advanced features such as login, request headers, cookies and timezone. In Snapshot mode, they are always shown.

Please note that these features are only supported as follows:
Snapshot: All devices
Live: Smartsign Windows Player (with the setting Use external WebView enabled, see admin guide (Live login) for requirements and technical details.)

Additional settings

Snapshot Refresh Interval

Input the time interval between snapshots in Hours, Minutes and Seconds. The default is 30 minutes. Only shown in Snapshot mode.

Please note that there may be a limit configured on the server overriding this setting if it is set to low. Note that the minimum value actually used is controlled by the server configuration.

Snapshot delay

Input the time to wait before taking the snapshot, the timer starts when the page has completed loading. Enter the number of Seconds; the default is 1. Only shown in Snapshot mode.

Custom request headers

Custom request headers can be used to provide static authentication headers and other application specific headers to make a webpage respond as desired.

warning

These settings are only valid for Snapshot, or Live on Windows Player 10.8+.

Request headers
Open Request headers, select Add row and enter a Name and a Value for each header. Select Encrypt to store the value encrypted; it is then masked.

Cookies

Cookies can be used to provide session management data and user preferences in order to show the relevant content on the webpage.

warning

These settings are only valid for Snapshot, or Live on Windows Player 10.21.4+.

Cookies
Open Cookies, select Add row and enter the Name, Value and Domain of each cookie.

Preview
Click Refresh in the action bar to reload the preview using the cookies/headers that you have configured.

Timezone

The timezone that the snapshot browser uses when it loads the page. Select it in Snapshot browser timezone. The default is the timezone of your web browser.

Login

If the webpage requires a login, Smartsign can attempt to login before loading the page. Where to input the username and password can often be auto detected, but it can be specified if needed.

warning

• These settings are only valid for Snapshot, or Live on Windows Player 10.8+.

• Being able to perform login is very much dependent on the 3rd party webpage that you are trying to login to and every page is different.
  While we strive to be as compatible as possible in this regard, we cannot provide any guarantees that it will work. Also, if it does work, we cannot guarantee that it will continue doing so.

Login page
Input the URL to the login page including protocol. It's commonly a different URL from the one you want to show on screen, but it can be the same too.

Example: https://login.microsoftonline.com (for Microsoft 365/Power BI)

Username
Input the username that should be used to login.

Password
Input the password that should be used to login.

Advanced login settings

Fill in these settings if the login fields on the page are not found automatically.

Some example CSS-selectors:

Type	HTML	CSS Selector
Id	<input id="Uname" />	#Uname
Attribute	<input name="Uname" />	[name=Uname]
Class	<input class="User-Input" />	.User-Input

Username CSS-selector
Input a CSS-selector for the Username input element on the login page. If not found, auto detect will be tried.

Password CSS-selector
Input a CSS-selector for the Password input element on the login page. If not found, auto detect will be tried.

Submit button CSS-selector
Input a CSS-selector for the Submit button element on the login page. If not found, auto detect will be tried.

Custom CSS-Selector
Input a CSS-selector for a Custom input element on the login page. (optional)

Custom Input Value
Input a value that should be entered in the custom input element identified by the Custom CSS-Selector.

Crop a snapshot

Click Crop in the action bar to crop the webpage snapshot. Crop is only available in Snapshot mode.

Webpage viewport
Specifies the Width and Height of the browser's viewport when taking the snapshot, 1920 x 1080 by default. Values below 150 are raised to 150. When you change them, a new snapshot is taken.

Crop area
Click and drag on the snapshot to select the area that you would like to cut out, or enter Position X, Position Y, Width and Height in pixels.

Click Crop to apply your selection, or Reset to remove the crop. Then select Save.