Introduction

This article explains how the two Concierge Kiosk (Hospitality) sample experiences - "Four Star Hotel" and "Boutique Hotel" - are built and how you can reuse them for your own needs. To access these samples, use the Examples tab of the Experiences panel in Composer. These samples are suitable for use in a hotel reception.

Trying out the "Concierge Kiosk (Hospitality)" samples

These Intuiface experiences have been published as a webpage, yet they were built using the same Composer techniques used to create kiosk-based experiences. We didn't do anything special to make them web-ready—that’s the magic of Player.

Below is a live, interactive version of one of these experiences.

You can view the Concierge Kiosk (Hospitality) - Four Star Hotel experience by clicking this link

This web-published experience is running within an iFrame. Below is the HTML code. Note that the "src" value is the URL of the published experience. Pasting that URL in a browser tab will run the experience full-screen. Give it a try!

<iframe src="https://web.intuiface.com/concierge-kiosk-boutique-hotel" frameborder="0" width="100%" height="auto"></iframe>

How were these experiences built?

The experiences have been designed for easy customization through a built-in stylesheet and use a Headless CMS base called "Concierge Kiosk (Hospitality)" to manage Text translations, Hotel Information, and Maps and Amenities, all of which are structured to be easily replaced with your own content.

We are also using a variety of out-of-the-box Interface Assets - Global Variables, Google Places, Local Weather, Clock - to bring these experiences to life. 

The following stylesheet, located in the experience, serves as the primary resource for defining the background, button release states, font colors, and fonts. If you modify the fonts and colors here, the changes will be reflected throughout the experience.

Scene breakdown

"Attract" scenes

The "Attract" scenes consist of several asset types, including Image, Video, Text, and Button assets. Among them you will see two buttons named"EN" and "FR". These buttons specify a variant value within the Headless CMS base to display the appropriate translation and set the language options for both Google Places and Local Weather Interface Assets.

When either of those buttons and then the "Tap Me" or "Touch screen to start" is interacted with, the "Home" scene appears.

"Home" scenes

Within the "Home" scene, you are presented with five buttons, each corresponding to another scene in the experience. For example, "Hotel Information" and "About Roomie" go to the same About scene. Here we also display information from the Local Weather Interface Asset as well as the time and date from the Clock Interface Asset.

The two smaller buttons open a search for nearby destinations using the Google Places Interface Asset. Below is a screenshot of the trigger/action pair for those buttons:

The Google Places API reference documentation includes a table listing the available "Included Types".

"All about Roomie/ About" scenes

The "All about Roomie/ About" scenes display information stored in the Headless CMS base for the associated hotel. Roomie supports a photo gallery where users can select images to display on-screen, whilst Lumiere offers a minimalistic approach with just a title, logo, and description.

"Services & Amenities / Goodies & Services" scenes

Within the "Services & Amenities / Goodies & Services" scenes, selecting an amenity displays a list of bullet points specific to that amenity, along with its location. These bullet points can be easily replaced with your own content in the Headless CMS base.

When the "Ask for service" button is pressed, a pop-up form appears, allowing the user to select the services they require, along with fields for room and special requests.

"Find your way / Explore Around" scenes

Within the "Find your way / Explore Around" scenes, we use a Map Collection with a data source called "Summary Results" coming from the Google Places Interface Asset. This is used to display a title and an indicator of the location shown on the map. Once a Search Query is requested, results appear on the left or bottom of the experience, indicating the results returned by the query.

Once a Place is selected, a detail view appears. This view includes all the detailed information returned by the Google Places Interface Asset. You can see all the properties available to be returned here: Interface Asset - Google Places.

How to reuse these experiences

The easiest way to reuse these experiences is to carry out the following steps:

1. Open your preferred "Concierge Kiosk (Hospitality)" experience in Composer.
2. Use "Save as" to create a copy of the experience with a custom name.
3. When you use "Save As," Composer will ask if you want to duplicate the Headless CMS Base. Select "Duplicate". (You don't want to have to create it yourself!)
4. Customize the experience to suit your needs by altering the stylesheet or content within the Headless CMS base.

Data structure of the H-CMS Base

The structure of the H-CMS bases for these experiences consists of five main Components, which are used throughout the experience. On the left is "Five Star Hotel", on the right is "Boutique Hotel".

• Text Settings & Logo: Contains Text and Logo used throughout the experiences.
• About Lumiere / All about Roomie: Contains Information about each Hotel.
  • Roomie Gallery: Specific to Boutique, a Collection of Images.
• Map
  • Categories: Categories used in the menu
  • Sub-categories: Sub-categories used in the submenu
• Services & Amenities / Goodies & Services
  • Amenities / Goodies: Contains information on each hotel's Services and Amenities.
  • Services - Housekeeping: Contains four options used in the "Ask for services" pop-up.
  • Services - Maintenance: Contains four options used in the "Ask for services" pop-up.
• Leave a Review
• Place Settings - Contains three properties (City, Latitude, Longitude) used in the "Find your way / Explore Around" scenes

As you can see from the screenshots, the structure is comprised of Collections and Groups, with a slight variation in naming conventions between the two bases.

Content of the H-CMS Base

"Text Settings & Logo" Content

The content of the Text Settings & Logo component can be customized to include any required translations; you can add or remove language variants as needed. This component contains most of the translations used throughout the experience, with a few exceptions.

"About Lumiere / All about Roomie" Content

The content for the About Lumiere / All about Roomie component contains a Language variant with the associated Title, Description, Check-in, and Check-out times. The Boutique Hotel (Roomie) has a subcomponent that contains a collection of images used in the Roomie Gallery.

"Map - Categories" Content

The Categories component's content can be customized to include any list of categories you wish. In these experiences, we have provided two categories as a starting point, each with an icon, category name, and Place Type. The Place Type is important here, as it is used to search for nearby places within a given location via the Google Places Interface Asset. You can find the list of Place Types (Included Types) from the Google Places documentation table here: Google Places API Table A. 

"Map - Sub-categories" Content

The content for the Sub-categories component can be modified to include any list of Sub-categories you wish. You can find the list of Place Types (Included Types) from the Google Places documentation table here: Google Places API Table A. 

"Services & Amenities / Goodies & Services" Content

The Services & Amenities content is comprised of eight properties: Amenity, Tagline, Bullet 1-4, Location, and Image, which are used in the Services & Amenities scenes.

The content for Services & Amenities / Goodies & Services includes two collection components, each with four Text properties used for the four options in the services popup. Both Housekeeping and Maintenance request components share the same structure, differing only in content. 

"Leave a Review" Content

The content for the Leave a Review component is just a single Text property, used to encode the QR code on the Home scenes. 

"Place Settings" Content

The content for Place Settings is specific to the device or establishment's location. You can change these properties with your desired City, Latitude, and Longitude, and these changes will be reflected automatically in the experiences.