Introduction

This article explains how the Guided Selling - Questionnaire sample experience 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.

This experience uses Intuiface Headless CMS (H-CMS). If you are unfamiliar with Headless CMS, we suggest you first become familiar with it - either via the Headless CMS chapter in our Help Center or the Headless CMS course in Intuiface Academy - before proceeding with this article.

About the "Guided Selling - Questionnaire" experience

This Intuiface experience has been published as a webpage, despite using the same traditional approach to experience creation that has always been possible with Intuiface. In other words, nothing special was done to this experience to make it web-ready. This is the magic of Player.

Below is a live, interactive version of this experience.

You can interact with the experience below. Go ahead - tap it!

What you are seeing is the web-published experience running within an iFrame. Below is the HTML code. Note the "src" value is the URL of the published experience. Pasting that URL in a browser tab will run the experience fullscreen. Try it - if you dare!

<iframe src="https://web.intuiface.com/mkp-guided-selling-questionnaire" frameborder="0" width="100%" height="auto"></iframe>

How is this experience built?

To achieve the task of filtering coffee options and presenting a single result on the "Product Results" scene, the experience is crafted with three scenes and employs the H-CMS in conjunction with three Global Variable Interface Assets that handle the filtering process.

Data Structure of the H-CMS base

The structure of the H-CMS base for this experience is made up of three Components, one for each of the three scenes.

• Products
• Questions
• Product Results

As you can see from the below screenshots, the structure is comprised of three Property types: Text, Long Text, and Image

"Product" Data Structure

 

"Questions" Data Structure

 

"Similar Products" Data Structure (used in the "Product Results" scene)

Content of the H-CMS base

"Product" Content

The content for the Product component can be altered to contain any list of items you desire, but you need to ensure all possible choice combinations have an associated product. The current number of possible combinations (and thus products) is 27:

3 questions, each with 3 possible answers.
3 x 3 x 3 = 27 possible answer combinations = 27 items

This is important when filtering to a single product because if the number of combinations you've calculated is wrong, certain answer combinations will have no associated product, rendering the "Product Results" scene blank.

"Questions" Content

The content for the "Questions" component can be altered to any questions you wish, but keep in mind that if you add or remove questions, the number of products will have to change as well for the "Product" component.

"Similar Products" Content (used in the "Product Results" scene)

The content for "Similar Products" works by filtering the "Filter" property with the promoted coffee, leaving two similar products in the "Product Name" property.

Scene breakdown

The experience is comprised of three scenes. In each scene, all images have been compressed to a size appropriate for their container, minimizing the storage requirements for content and thus maximizing download times for the experience on the web.

Home	Questions	Product results

 

"Homepage" Scene

The "Homepage" scene consists of several assets, including Text, Image, Button, and Toggle Button. There is a Button that enables users to navigate to the 'Questions' scene.

"Questions" Scene

The "Questions" scene has been built using an Asset Flow collection with three members, each used to display one of the three sets of questions and possible answers defined in the H-CMS base. A Toggle Button set is used as a data template, holding the three answers for whichever question is displayed.

With every answer selection, a global variable ("Answer 1 Filter", "Answer 2 Filter", "Answer 3 Filter") is assigned that answer, and the "Product" data set in the H-CMS base is filtered based on the answer.

Since the same Toggle Button set is used for all three questions, we need conditional triggers to determine which question has been asked. Each question has a unique index in the Asset Flow, so that is how they are distinguished. Each answer has the following three conditional triggers; the example below is for the first answer, - i.e. "Answer 1 button":

1. WHEN "Answer 1 Button" is checked and IF the index of the Asset Flow equals "1", THEN set the value of "Answer 1 Filter".
2. WHEN "Answer 1 Button" is checked and IF the index of the Asset Flow equals "2", THEN set the value of "Answer 2 Filter".
3. WHEN "Answer 1 Button" is checked and IF the index of the Asset Flow equals "3", THEN set the value of "Answer 3 Filter".

When the third question has been answered, the resulting filter reduces the "Products" table to a single row. The remaining product in that row is then immediately used to filter the "Similar Products" table with the product name, as shown in the screenshot above. 

Product Results Scene

The "Product Results" scene is made up solely of Image and Text Assets. Each of the assets inside the "Product result" group is bound to the Product component of the H-CMS base. Filtering based on answers to all three questions reduces the "Product" table to a single product on Row 1. This is the recommended coffee.

The similar "Products 1" and "Products 2" groups have Image and Text Assets that are bound to Row 1 and Row 2 of the 'Similar Products' H-CMS component. This is done so that when the "Products" table is reduced to a single row, the Similar Products component will also be filtered and reduced to two rows.

Analytics

Intuiface Analytics dashboard featuring charts that showcase the following information:

• Most Popular responses per day
• Top-rated products after applying filters
• Count of active devices currently running the experience
• Count of distinct devices recorded each day
• Daily Collection of data points