VOGO Voice – Knowledge Base

Loop with Condition

Estimated reading time: 6 min

Loop with condition is used to execute a specific task based on a condition. In other words, this particular function is made use of when it is required to repeat the steps based on a condition in order to produce the resultset requested by the user. Furthermore, an instance of an Airtable base is implemented within the custom interaction model to create a more purposeful interaction.

This simple and straightforward tutorial provides a step-by-step walkthrough on how to create an interaction flow making use of the loop with condition template. In order to illustrate the iterative process carried out by the loop based on the specified condition attached to it, an elementary use case is employed. With this tutorial you can gain hands-on experience on how to execute the template for the purpose of relaying a list of items to the end user based on the user input amount, and thereby maximize the user’s experience of the functionality of the custom skill. 

Prerequisites: 

  • VOGO Voice account: https://www.vogovoice.com/
  • Access rights to the Intents section under Settings.
  • Access rights to the Interaction builder platform.
  • Airtable API key and Base ID

Setting up an Airtable connector instance

In order to create an Airtable connector instance

1. Log into your VOGO Voice account to be directed to VOGO Voice Management Console (https://account.vogovoice.com)
2. Navigate to Settings on the top right-hand corner of the Dashboard and select Integration from the list of tabs displayed.
Settings > Integration
3. Click on the Add Button on the top left-hand corner of the screen.

4. In the Select Account Type window, choose the Airtable icon from the list of connectors and click the Create Connector button which opens up the Add Airtable Connection window.
5. Populate the required fields in the Add Airtable Connection window.

Field values

  • Assign a Name to the instance of the connector created. Here, the given name is ABC
  • Provide the API key and Base ID of the Airtable base to which access is required.

🖍 Note: The API Key and the Base ID are provided by the Airtable account holders.

To locate Base ID and generate an API Key, refer our Airtable connector guide: https://university.vogovoice.com/kb/airtable/

6. After filling in the required fields click the Save button to set up and integrate the connector instance with the platform.

Create a custom intent

Create an appropriate intent to be invoked for executing an interaction flow mapped to it, the purpose here being to trigger the loop with condition in order to produce the resultset as requested by the user.

Create an intent titled ‘Loop with Condition’ with suitable sample utterances mapped to it. The sample utterances for this intent would be: “Give me a list of items below 50 dollars” & “Show me the list of items below 50 dollars”

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

Steps to Configure the Airtable connector instance 

Once the Airtable connector has been created, navigate to Interactions and click on the Interactions button at the bottom right-hand corner of the screen. Select the ‘Loop With Condition’ intent to be directed onto the Interaction builder platform.

Now, let’s create an interaction flow to return a resultset using the loop with condition template based on the requirements of the skill.

1. In the flow diagram area, you will be able to see the Start and Response component.
2. Roll the mouse over the Response component to see the voice, computer and        camera icon on the top right-hand side of the component.

3. Click on the Voice icon of the Response card to open up the Speak pop-up window with a field titled Say, wherein you need to type the voice action intended to be spoken to the user.
 Say: Welcome to the Artisan’s Corner.
4. Check the checkmark box in the Expect Response and type in the suitable Prompt message to proceed with the flow.                                                         
Prompt: Say next to see the list of products below {{inputs.num.value}} dollars.
The same message will be replicated in the Reprompt field.                                                  
Reprompt:Say next to see the list of products below {{inputs.num.value}} dollars.
5. Populate the field under Expectations by selecting the Global Intent Next from the drop-down list.

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

To add a display message in a video-enabled voice-assisted device

1. Click on the Computer icon, and type in a condensed version of the voice message in the field titled Display Message of the Show pop-up window.
2. Populate the required fields and click the Save button.
Title: Artisan’s Corner
Display Message: Welcome to the Artisan’s Corner.
Say next to see the list of products below {{inputs.num.value}} dollars.

To learn about different template engines to be followed to run functions visit https://university.vogovoice.com/kb/template-engine/

6. Now drag and drop an Airtable component onto the flow diagram area and connect the anchor symbol of Next on the Response component to the Airtable connector.

🖍 Note: To interconnect the different components click on their respective Anchor symbols so as to chain and hold them in the interaction flow.

7. Double click the Airtable component, or click the pencil to access the Configuration window and fill in the required fields to retrieve the desired data from the specific Airtable base.

Setting up the configuration fields for c1

Name: The name is provided by default and can be changed manually. It is used to identify the connector instance and how it is referenced throughout the flow. 

Table: Fill in the name of the table from which the relevant data has to be pulled in to cater to the user specific requirements of the skill. Here the input provided is Table 4.

Max Records: Set the maximum number of data records to be retrieved and displayed through the device from the filtered content. If the Max records is set to 1, then Airtable will return only 1 data record even if the query matches multiple records. Here, the number assigned is 30.

🖍 Note: Table names are case sensitive so please make sure the spelling and spaces are the same.

To know more on how to populate the various fields refer the Airtable connector guide : https://university.vogovoice.com/kb/airtable/

8. Drag and drop a Response component onto the flow canvas. You can alternatively right-click on the anchor icon and choose the response component.
9. Connect the anchor symbol of Next on the Airtable component to the Response card.

10. Click on the Voice icon of the Response card to open up the Speak pop-up window with a field titled Say, wherein you need to input the loop with condition template.

Say: {{#each connectors.c1}}
{{#if price '<=' (toNumber ../inputs.num.value) }}{{Name}}: {{price}}{{/if}}{{/each}}

A Breakdown of the Template’s Structure

Here, we are trying to apply an ‘each loop’ to display the name and price of the products addressing the user input amount. For the execution of this task, we use an ‘if’ condition which compares the price with the user input amount. If the condition is satisfied, it will display the name and price of the product. The user input amount taken using ‘inputs.num.value’ is in a string format. So, before comparing it with the price we need to convert it to a number format. For that we use the ‘toNumber’ function. Herein, the following punctuation marks ‘../’ are used because the ‘inputs.num.value’ is outside the scope, otherwise it won’t work inside the ‘each loop’.

To add a display message in a video-enabled voice-assisted device

1. Click on the Computer icon, and type in a condensed version of the voice message in the field titled Display Message of the Show pop-up window.
2. Populate the required fields and click the Save button.
Title: Artisan’s Corner
Display Message: {{#each connectors.c1}}
{{#if price '<=' (toNumber ../inputs.num.value) }}{{Name}}: {{price}}{{/if}}{{/each}}

To learn about different template engines to be followed to run functions visit https://university.vogovoice.com/kb/template-engine/

The screenshot below captures the aforementioned interaction flow.

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, Loop with Condition intent through which this interaction flow has been initiated will be auto-generated in the User invokes field.
1. Provide the ‘With slots’ field under Conversation titled ‘num’ with the user input amount.  Herein, the input amount provided is 50.

5. Click the plus button within the Conversation section to open up an additional field titled User Invokes. Ensure to populate this field by selecting the Next intent called to action within the interaction flow.

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.

8. On the resultant Test Response window, the blue chat bubbles present the previously input messages within the Response components. The single lightning bolt symbol in yellow represents the Airtable connector instance. 

9. Click on the chat bubble to see the details of the individual responses. To take a detailed look at the data fetching part of the connector instance, click on the lightning bolt icon highlighted in yellow. 

To know more about testing an interaction refer https://university.vogovoice.com/kb/testings/

Congratulations! You have successfully created a custom interaction model by making use of the loop with condition template for the purpose of relaying a list of items to the user based on the provided input amount. On the whole, you have designed an interaction flow that is efficiently tailored with appropriate voice responses catering to the specific requirements of the end-user. 

👍 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 more about Airtable connector, click here.

To learn more about Loop with Condition, click here.

Tags:
Was this article helpful?
Dislike 0
Previous: Saved value vs Incoming value
Next: Subexpression and its Significance