Our support site has moved to https://support.intuiface.com

"Web Triggers API Demo" Sample

Table of Contents

    Introduction

    This article explains how the Web Triggers API Demo sample was built and how you can reuse it for your own needs. To access this sample, use the "Marketplace" tab of the Experiences panel in Composer or Player.

    The demo scenario is the following: You have a passive (i.e. non-touch) screen running an IntuiFace experience behind a shop window and you want users to be able to interact with onscreen content using their mobile phone.

    WebTriggersAPI.gif

    How it works

    On the Composer side

    This sample uses the Web Triggers API. The webpage displayed on your mobile device will forward calls to the sendMessage Web service hosted by IntuiLab, enablign you to remotely control the experience.

    To make sure your mobile device only controls the experience running in your particular instance of Composer or Player, the sendMessage service needs know your IntuiFace account's credential key and the specific deviceID of Composer or Player

    Here is the URL of the page that will be rendered on your mobile device: http://intuiface-mobile-remote-control.webflow.io/?apikey={apikey}&deviceid={deviceID}

    • The apikey parameter is replaced with the entered credential key entered in Play Mode. In a real IntuiFace application, you would specify the credential key in Composer in Edit Mode.
    • The deviceID is accessed via the read-only property Device ID that is exposed by the Web Triggers Interface Asset used in the experience.

    deviceID.png

    The complete URL is dynamically built using a Text Manipulation interface asset, using its Replace action. We're replacing the placeholders {apikey} and {deviceID} with the values retrieved in Play Mode.

    We then use the QR Code Generator interface asset in combination with the URL Shortener Converter interface asset to generate an easy-to-scan QR code.

    On the mobile webpage side

    When the webpage is loaded, a piece of JavaScript will

    • parse the URL to retrieve the apikey and the deviceID
    • call a first sendMessage to send an init message.
      • This message triggers an action in IntuiFace causing the experience to navigate to the second scene.
    • dynamically adds some callbacks to the buttons on the page, based on some of their attributes
      • when the next or previous button is clicked on the mobile webpage, the associated message is sent (nextItem or previousItem) with the proper apikey and deviceID. These messages will control the AssetFlow in the scene named Collection.

    Each call to the API looks like this: https://api.intuiface.com/webtriggers/v1/sendMessage?message=init&apikey=xxx-xxx&playerIDs=yyy-yyy

    init.png

    NextItem.png

    Each button in the mobile webpage has a message attribute used by the script to associate the right command to each button.

    <a message="previousItem" class="webtrigger-button w-button">Previous</a>

    You can download the mobile webpage JavaScript here.