VOGO Voice – Knowledge Base

Set favorites & retrieve items from the list

Estimated reading time: 11 min

The focus of this tutorial centers around sharing knowledge with Skill Designers on how to create an interaction flow on a more advanced level. The comprehensive step-by-step instructions have been developed to demonstrate how to set favorites as well as retrieve items from the list of favorites. The aforementioned concept will be illustrated by creating two interactions.

The following tutorial by means of a use case shows how to create a list of favorite restaurants. Successively the personalized aspect of setting favorites is leveraged for a user to easily look up the cuisines at their favorites. The first segment of adding items to the list is executed via the interaction named ‘Add favorite’, while the second one that centers on viewing the list is implemented through the interaction entitled, ‘My favorites’. 

Prerequisites

  • VOGO Voice account: https://www.vogovoice.com/
  • Access rights to the Interactions section.
  • Access rights to the Interaction builder platform.

Part 1 – Setting Favorites

Create a custom slot named Restaurants that will represent the restaurant names namely  Curry Leaves, Taco Town, Classico Italiano, and Coconut Garden. The aforementioned names are to be added for slot values as shown below. 

To learn how to create custom slots refer to the guide: https://university.vogovoice.com/kb/creating-custom-slots/

Create a custom intent

Make a suitable intent to be invoked for executing an interaction flow mapped to it.

Create an intent titled ‘Add Favorite’ with suitable sample utterances linked to it. The sample utterances for this intent would be, ‘Add {restaurant}’, Add {restaurant} to my favorites’, ‘Add {restaurant} to my list’. These sample utterances will serve the purpose of adding the user’s choice of restaurant to the list of favorites.

To learn how to create custom intents refer to the guide: https://university.vogovoice.com/kb/creating-intents/

Steps to create an interaction flow

  1. Log into your VOGO Voice account to be directed to VOGO Voice Management Console (https://account.vogovoice.com)
  2. Navigate to Interactions on the vertical bar displayed on the left-hand side of the Dashboard.
     Dashboard > Interactions

3. Now, click on the Interactions button at the bottom right-hand corner of the screen. Select the ‘Add Favorite’ intent to be directed onto the Interaction builder platform

4. In the flow diagram area, you will be able to see the Start and Response components.
5. Unlink the Start component from the Response card by clicking the delete icon placed in the middle of the chain.

6. Drag and drop an Add Variables component onto the flow diagram area and connect it to the Start component.

7. Now mouse over the top right corner of the Add Variables component. Click on the pencil icon that appears. This will open up its configuration window.

8. Next, configure the Add Variables component by adding the key-value pairs as shown in the screenshot below. Fill in the variable name as check and drag and drop the find function from the Data part as value. Now continue to configure as illustrated below. Click the plus button that appears under the heading Arguments and add the first argument as slots.restaurant and set its type as Path. This will give an array of all the slot values that have been added in the slot named restaurant. Set the second argument as {“value”: “{{inputs.restaurant.value}}” } and set the type as Object. If a match is found, then that object is returned. To know more about data types, click here.

🖍 Note: Here the find function is used to check if the user input value is available in the values of the slot named restaurant

9. Now drag and drop a Check Variable onto the flow canvas and connect it to the already configured Add Variables component. To configure the Check Variable component, populate the left-hand side of the Configuration window as in the screenshot given below. Set the data type based on the input, which in this case is Path, and choose the relational operator ‘Exists’. The purpose of this step is to check the existence of any value in the variable named check using the path var.check.value. 

Left-Hand side: var.check.value

10. Drag and drop another Check Variable component to the flow editor and connect it to the ‘Then’ path of the first  Check Variable component. To configure this Check Variable populate the left-hand side of the Configuration window as shown below. Set the type based on the input, which in this case is Path, and choose the relational operator ‘Exists’.  The purpose of this step is to check the existence of the Settings named favorite.

Left-Hand side: settings favorite

11. Now drag and drop a  Response component and connect it to the Otherwise path of the first Check Variable.
12. Configure the Response component as shown right below. 

Say: Sorry! I couldn’t find that restaurant.

🖍 Note: Ensure to click the Save button to save the interaction flow as and when edits are made.

Add a display message for a display enabled voice-assisted device.

Title: Add Favorite

Display Message: Sorry! I couldn’t find that restaurant.

To know about how to configure the Response component, refer to the https://university.vogovoice.com/kb/response-component/

For further reference on how to populate the additional fields visit https://university.vogovoice.com/kb/guide-response-component/

13. Drag and drop another Add Variables component to the flow canvas and connect it to the ‘Then’ path of the second Check Variable component. 

14. Configure the Add Variables component by adding the key-value pairs as shown below. Fill in the first variable name as list with settings.favorite as its value. Set the data type as Path. The list of favorite restaurants will be fetched by this variable. Next name the second variable as newList and in its value field, drag and drop a concat function.

Click the plus button that appears under the heading Arguments and add the first argument as var.list and set the type as Path. Then set the second argument as inputs.restaurant.value which represents the user input value. This function will concat the new user input restaurant name to the list of favorites.

🖍 Note: When the user gives the input, the concat function creates a new array by concatenating the existing array with the added value. 

15.  Now add the third variable to the existing Add Variables component. Name this variable also as newList. Next, drag and drop a compact function to it. Now continue to configure as illustrated below. Click the plus button that appears under the heading Arguments and set the argument as var.newList, which will remove any null values from the list. Set the data type as Path.

🖍 Note: The Compact function is used to remove any null value that is inserted while using the Concat function.

16. Name the fourth variable also as newList and drag and drop a uniq function to it.  Now set the argument for this variable as var.newList, which will remove any duplicate values. Set the data type as Path.

17. The third and fourth variables once configured will appear as shown below.

18. Drag and drop another Add Variables component to the flow and connect it to the Otherwise path of the second Check Variable component. This path gets executed for a new user who has not yet added any favorites. To configure this card as shown below, name the first variable as newList and drag and drop a concat function to it.

Next, click the plus button that appears under the heading Arguments and set the first argument as var.newList and its type as Path. Then set the second argument as inputs.restaurant.value which represents the user input value of the restaurant name. This function will concat the new user input restaurant name to an empty array. 

Name the second variable too as newList. Drag and drop a compact function to it. Then, click the plus button that appears under the heading Arguments and set the argument as var.newList, which will remove any null values from the list.

19. Drag and drop a Save Settings component to the flow canvas and connect it to the second and third Add Variables components. To configure as shown below, name the Save Settings as favorite and store the corresponding variable var.newList. Set the data type as Path

🖍 Note: Here we are saving the user’s favorite list in the variable var.newList.

20.  Drag and drop another Response component to the flow canvas and connect it to the Save Settings component as shown below.  Now configure the Say and Display part of the Response card as shown below

Say: {{inputs.restaurant.value}} is added to your list of favorite restaurants.

Add a display message for a display-enabled voice-assisted device.

Title: Add Favorite
Display Message: {{inputs.restaurant.value}} is added to your list of favorite restaurants.            

Testing and Validation 

a) For New Users

  1. Click on the Test button next to the Flow Editor button on the interaction builder platform. 

2. In the Tests pop-up window that appears click the + button on its top right-hand corner.

3. Fill the Name field of the Test Response window that shows up.

4. In the Conversation section of the Test Response, Add Favorite intent through which this interaction flow has been initiated will be auto-generated in the User invokes field.

5. Provide the ‘With slots’ field under Conversation titled ‘restaurant’ with the user input.  Herein, the input provided is Taco Town.

6. Finally, click the Save button to save the input and perform the test.

7. To validate the Test Response, click on the lightning symbol on the left-hand side of the test case. 

Test 2 – Old User

Repeat the aforementioned testing and validation steps 2, 3, and 4 for testing an interaction for a new user and then continue as follows.

5. Provide the ‘With slots’ field under Conversation titled ‘restaurant’ with the user input.  Herein, the input provided is Coconut Garden.

6. Navigate to the User Settings section and click on its plus button. On the fields that appear, input favorite as the key and [“Taco Town”] as the value. Set the data type as Array.

7. Finally, click the Save button to save the input and perform the test.

8. To validate the Test Response, click on the lightning symbol on the left-hand side of the test case. 

Output

The following test windows show how the values are added to the list. In the first test for the new user, the user input value is saved in the settings named favorites as an array.  Whereas, in the second test for the old user, the user input value is saved along with the old value in the settings named favorites as an array. 

Test 1 – New User

Test 2 – Old User

Part 2: Listing Items from the Favorite list

Create a custom intent

Make a suitable intent to be invoked for executing an interaction flow mapped to it.

Create an intent titled ‘My Favorites’ with suitable sample utterances linked to it. The sample utterance for this intent would be, ‘My favorites’. The sample utterances will serve the purpose of fetching the user’s list of favorites.

To learn how to create custom intents refer to the guide: https://university.vogovoice.com/kb/creating-intents/

Steps to create an interaction flow

  1. Log into your VOGO Voice account to be directed to VOGO Voice Management Console (https://account.vogovoice.com)
  2. Navigate to Interactions on the vertical bar displayed on the left-hand side of the Dashboard.

           Dashboard > Interactions

3. Now, click on the Interactions button at the bottom right-hand corner of the screen. Select the ‘My Favorites’ intent to be directed onto the Interaction builder platform.

4. In the flow diagram area, you will be able to see the Start and Response components.

5. Unlink the Start component from the Response card by clicking the delete icon placed in the middle of the chain.

6. Drag and drop an Add Variables component onto the flow diagram area and connect it to the Start component.

7. Now mouse over the top right corner of the Add Variables component. Click on the pencil icon to open up its configuration window.

8. Next configure the Add Variables component by adding the key-value pairs as shown in the screenshot below. Fill in the variable name as favorite and drag and drop variableClone function to it. Click the plus button that appears under the heading Arguments and add the argument as settings.favorite and set its type as Path. This will create a copy of the content in settings named favorite which can be modified without affecting the actual data in settings.

Name the second variable as list and add the following array as value and set the data type as Array. The format and content of the array are provided below in detail. 

list:

[

{
"restaurant": "Curry Leaves",
"cuisine"	: ["Dosa","Idly","Pav Bhaji"]
},
{
"restaurant": "Taco Town",
"cuisine"	: ["Al Pastor Taco","Carnitas Taco"]
},
{
"restaurant": "Classico Italiano",
"cuisine"	: ["Lasagne","Brodetto","Caponata"]
},
{
"restaurant": "Coconut Garden",
"cuisine"	: ["Chapea","Curry duck","Brown stew fish"]
}
]

🖍 Note: This represents the list of restaurants and their cuisine specialties.

12. Now drag and drop a Check Variable onto the flow canvas and connect it to the already configured Add Variables component. To configure the Check Variable component populate the left and right-hand side of the Configuration window as in the screenshot given below. Set the data type based on the input, and choose the relational operator is greater than. The purpose of this step is to check if the length of the variable named favorite is greater than 0 or not. 

Left-Hand Side: var.favorite.length (Path)

Right-hand Side: 0 (Number)

13. Drag and drop an Add Variables component to the flow canvas and connect it to the ‘Then’ part of the Check Variable component. Configure the Add Variables component by adding the key-value pairs as shown in the screenshot below. Fill the first variable name as num and drag and drop a findIndex function to it.

Configure the first argument as var.list and set the data type as Path. This contains a list of all the restaurants and their cuisines. Set the second argument as {“restaurant”: “{{var.favorite.[0]}}” } and set its type as Object. This will fetch the index of the restaurant name which is first on the user’s favorite list.

Name the second variable as item and drag and drop pullAt function to it. Configure the first argument as var.list and set the type as Path. Set the second argument as var.num and set the type as Path. This function will fetch the item from the list that has the index in variable num.

Name the third variable as newItem and drag and drop concat function to it. Configure the first argument as var.newItem and set the type as Path. Set the second argument as var.item and set the type as Path. This function will concat the pulled at object in the item to the variable named newItem.

14. Now, configure two more variables as shown below. Name the fourth variable as newItem and drag and drop compact function to it. Configure the argument as var.newItem and set the type as Path. This function will remove any null values in the variable newItem.

Name the fifth variable as pull and drag and drop pullAt function to it. Configure the first argument as var.favorite and set the type as Path. Set the second argument as 0 and set the type as Number. Here, the purpose is to pop up the first element from the array named favorite.

15. Drag and drop a Response component to the flow canvas and connect it to the Otherwise path of the Check Variable component as shown below.

16. Configure the Response component as shown right below. Type the following response in the field titled Say.

Say: Sorry! You haven’t added any favorite restaurants yet.

Add a display message for a display-enabled voice-assisted device as given below

Title: My Favorites
Display Message: Sorry! You haven’t added any favorite restaurants yet.

17. Drag and drop a Check Variable component to the flow canvas and connect it to the second Add Variables component. Configure the Check Variable as shown below.

🖍 Note: Here we are checking the length of the list of favorite restaurants stored in variable favorite.

18. Connect the Otherwise path of the  Check Variable component back to the second Add Variables component. This will create a loop where the second  Add Variables component will be executed repeatedly until the condition in the second Check Variable component is satisfied.

19. Drag and drop a Response component to the flow canvas and connect it to the Then path of the Check Variable component as shown below.

20. Configure the Response component as shown right below. Type the following response in the field titled Say.

Say: Here is the list of your favorite restaurants and their cuisines. {{#showList var.newItem lastWord=","}} {{restaurant}} has {{#showList cuisine}} {{this}} {{/showList}}{{/showList}}.
Thank You!

To add a display message in a display voice-assisted device.

  1. Click on the Computer icon, and type in the field titled Display Message of the Show pop-up window. 
  2. Populate the required fields and click the Save button. 

Title: My Favorites

Display: {{#showList var.newItem lastWord="" join=""}} {{restaurant}} : {{#showList cuisine}} {{this}} {{/showList}}
{{/showList}}

Note: To know how showList function works visit https://university.vogovoice.com/kb/template-engine/#

Testing and Validation 

  1. Click on the Test button next to the Flow Editor button on the interaction builder platform. 

2. In the Tests pop-up window that appears click the + button on its top right-hand corner. 

3. Fill the Name field of the Test Response window that shows up.

4. In the Conversation section of the Test Response, My Favorites intent through which this interaction flow has been initiated will be auto-generated in the User invokes field.

5. Navigate to the User Settings section and click on the plus button. On the fields that appear, input favorite as the key and [“Coconut Garden”,“Taco Town”] as the value. Set the data type as Array.

6. Finally, click the Save button to save the input and perform the test.
7. To validate the Test Response, click on the lightning symbol on the left-hand side of the test case. 

Output

The following test window reflects the list of favorite restaurants and their related cuisines.

Congratulations! You have successfully learned by means of this advanced tutorial how to set favorites and retrieve items from the saved list as well as curate tailored responses to the end-user accordingly.

👍 Note: To test the functioning of the interactions on your device you have to deploy the custom skill to facilitate the skill with the new edits. To accomplish this, click on the Deploy button seen at the bottom of the Skill Settings pop-up window.

To know how to deploy a custom skill visit https://university.vogovoice.com/kb/deploying-a-skill/

To learn about Add Variables, click here.

Tags:
Was this article helpful?
Dislike 0
Previous: Replace Multiple Components using Code Block
Next: variableClone Function