Transfer a URL from a Kiosk to Another Device with a QR Code

This entry describes how you can generate a QR code from the web page displayed in the browser using a script. The QR code can e.g. be used to transfer the URL of the displayed web page to a smartphone. We start with the template empty and generate a browser with a webpage element. Double click on the webpage element and add the start URL .Then you create an image element next to the web page element. The image element must not overlap with the web page element, otherwise it will not be displayed. 

Now the image element must be adapted for the QR code display. To do this, you must start the expert mode by entering &expert in the URL address line and then pressing Enter to reload the project. 

Double-click on the image to open the image's properties dialog and press the Expert Edit button at the bottom left.

Go down in the properties dialog and add under Add property the setting qrCodeData with the value and the type auto. Then press the Plus button to add the setting.

Then go to the expert setting src and add the setting ,"fileName":"" after the entry "fillColor": "rgb(0,0,0)" value that it looks in the end like this:

  "fillColor": "rgb(0,0,0)",
  "fileName": ""

Save the settings. Select the image and assign the tag name qrCodeImage in the menu bar. 

Select the web page element and assign the tag name browser in the menu bar. 

Go to Settings - Content - Scripts and press the Add button. Give the script the name QRCodeUrlScript and add the following script lines:

siteKiosk.content.onContentInserted(() => {
	const qrCodeImage = siteKiosk.content.getElementByTag("qrCodeImage");
	const browserElement = siteKiosk.content.getElementByTag("browser").getDomElement();
	browserElement.addEventListener("page-finished-loading", url => {
		qrCodeImage.setPropertyValue("qrCodeData", url.detail);

Save and publish the project. Now after changing the url in the webpage element, the displayed QR code will be automatically adjusted.