Introduction

This article explains how the Real Estate Shop Window sample was built and how you can reuse it for your own needs. To access this sample, use the Examples tab of the Experiences panel in Composer or Player. You can also download it from this page of the Intuiface Examples catalog.

This sample was designed to be run on a portrait-oriented passive screen, meaning a non-touch display that could be placed behind a shop window. Anyone walking in front of this display - even if the the agency is closed - could interact with on-screen content using his/her mobile phone thanks to the Web Triggers set up in this experience. 

This sample can be easily reused for any product presentation in a retail environment, not just for the real-estate market. 

    

How it works

The main principles are the following:

• This experience retrieves a list of properties to present from an Airtable base. 
• A QR Code is generated based on your Intuiface credential key and a device ID (uniquely identifying one particular display among all displays) that leads to a mobile web page. 
• This web page enables the user control the screen, browse properties, make a selection and email selections to himself / herself. 
• A configuration group enables the entry of a credential key and saves it to a local Excel file.
• A modified version of the Shopping List interface asset handles the selection and generation of an email body to send to the user. 

The Airtable base

Use of Airtable as a CMS to store and access a product catalog makes it easy to update experience content without having to use Intuiface Composer.

You can also easily copy this base, add your own products and link your new base to the experience. To do so, update the BaseID and Authorization properties of the Airtable Interface Asset. See detailed instructions here. 

 

QR Code generation

Since Intuiface's out-of-the-box QR Code Interface Asset only works on Windows, we used a different method here so this experience could be run on any of the devices supported by Intuiface Player. 

Specifically, we used the QR code generator API documented at http://goqr.me/api/. This API returns an image of the generated QR code. The use of API Explorer is not even necessary. Just bind the Image property of an Image asset to the API request below: 

https://api.qrserver.com/v1/create-qr-code/?data=URL&margin=10

The URL parameter is the URL you want to encode. In the case of this "Real Estate Shop Window" sample, that URL is: 

http://intuiface-mobile-remote-control.webflow.io/real-estate?apikey={apikey}&deviceid={deviceID}

The sample uses multiple Global Variable and Text Manipulation interface assets to fill the apikey and deviceID placeholders to ensure the mobile phone will only control the screen associated with a specific QR code. 

 

The mobile web page

The URL of the mobile-ready Web page embedded in the QR code is the following: http://intuiface-mobile-remote-control.webflow.io/real-estate?apikey={ApiKey}&deviceid={deviceID} with {ApiKey} and {deviceID} dynamically generated by the experience. 

The method used is the same as the one in the Web Triggers API Demo sample. A piece of JavaScript in this Web page will: 

• parse the URL to extract values for apikey and deviceID
• call the Web Triggers API with a first init message. 
• dynamically add callbacks to the buttons on the Web page based on each button's "message" attribute. Each button will then call the Web Triggers API with its associated message. 

You can download the mobile Web page JavaScript here. 

The script requires JQuery to be loaded, so be sure to include this line in your HTML page header

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

The Web triggers used

All the buttons in the mobile Web page have a "message" attribute. This will be the parameter sent to the Web Triggers API as follows: 

https://api.intuiface.com/webtriggers/v1/sendMessage?message=init&apikey=xxx-xxx&playerIDs=yyy-yyy

From top to bottom and left to right, the list of messages is the following

• previousPhoto
• nextPhoto
• previousItem
• nextItem
• selectItem
• clearSelection
• sendSelection
  • This leads to another Web page where the user can enter an email address and hit a Submit button. The message attribute for the Submit button is sendEmail with parameter1 equal to the entered email address. 

These messages are then captured by the "Message is received" trigger of the Web Triggers Interface Asset. 

The product list and email body generation

The Product List interface asset is a modified version of the Shopping List interface asset. The modification mainly consists of additional fields for Cart Item to handle the structure of a real estate listing. 

Email body generation was also modified to take these new fields into account and fill the placeholders located in the EmailTemplate-RealEstate.html file included in the folder of this Interface Asset.