VOGO Voice – Knowledge Base

Code Block

Estimated reading time: 6 min

In this comprehensive tutorial, you will learn how to utilize the decision-making, Code Block component within a custom interaction model. Using Code Block is highly advantageous as it enables Skill Designers who are well versed in JavaScript to gain an upper hand in curating voice skills of a highly personalized nature through the implementation of complex logic which sometimes is not essentially possible in other counterpart components. 

The illustration used in this tutorial serves as a resource to showcase the step-by-step process of rendering a voice update of the availability of books in a library. The comprehensive instructions combined with highlighted screenshots will offer the required direction needed to follow with ease the task of executing a Code Block component to demonstrate the aforementioned use case.

Prerequisites

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

Create the 1st Custom Slot 

Make a custom slot named Books that will represent its collections of books, namely “King Lear”, “Lolita”, “Man and Superman”, “My experiments with Truth”, “Oliver Twist”, “Othello”, and “Pride and Prejudice”. Add these book names as slot values.

Create the 2nd Custom Slot

After creating the first custom slot, follow the same set of steps once more to create a second slot and name it as Status. Then add the slot values as “Available and “Unavailableas 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 ‘Library Management’ with suitable sample utterances linked to it. The sample utterances for this intent would be, “{book} is {status}”, “Make {book} {status}”, “Update the status of {book} to {status}”. These sample utterances will serve the purpose of dynamically managing and updating the library management system.

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 ‘Library management’ 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. Now, drag and drop an Add Variables component onto the flow diagram area.
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. Configure the Add Variables component by adding the key-value pairs as shown in the screenshot below. Fill in the variable name as bookList and add the corresponding values, the format, and content of which is provided below in detail. Then, set the datatype as Array.  To know more about data types, click here.

bookList:

[
{
"id": 1,
"name": "King Lear",
"status": "Available"
},
{
"id": 2,
"name": "Lolita",
"status": "Unavailable"
},
{
"id": 3,
"name": "Man and Superman",
"status": "Unavailable"
},
{
"id": 4,
"name": "My experiments with Truth",
"status": "Available"
},
{
"id": 5,
"name": "Oliver Twist",
"status": "Unavailable"
},
{
"id": 6,
"name": "Othello",
"status": "Available"
},
{
"id": 7,
"name": "Pride and Prejudice",
"status": "Unavailable"
}
]

9. Now drag and drop a Code Block component onto the flow canvas and connect it to the Add Variables card as shown below.

10. Next, mouse over the top right corner of the Code Block component. Click on the pencil icon that appears. This will open up its configuration window.

11. Configure the Code Block component as shown below. 

12. Here the first line of code declares a new variable named item and stores the parsed data from the data part. This step is followed to make a deep copy as alterations to the contents in the data part cannot be made directly. The second line declares another variable named input and stores the data from the variable bookList. Here the path item.var.bookList will fetch the list from variable bookList which is already parsed and stored in the item. The third line declares a variable named book which stores the user input book name. The fourth line declares a variable named stat which stores the user input availability status of the book. 

From lines five to ten,  the code iterates over each element of the variable input and checks if any of the object’s name matches with the value in the variable book. If it matches then the status value of that object is changed to the value in variable stat. In the eleventh line, the code response.var.new = input; is used to store the changed array in the variable input in a variable named new to give it as a response or output. The twelfth line represents the response path. 

👍 Note: If the user is trying to change the status of Oliver Twist from Unavailable to Available in the var.bookList, then the script will iterate over each of the objects to find a match for the Oliver Twist and change its status value to Available.

💡 Tip: The variables used inside the Code Block will not be available in the skill. If you require any of the variables use the syntax response.var.variable name = data; to obtain the variable outside the Code Block.

13. Next, drag and drop a Response component and connect it to the configured Code Block component. 

14. Now, configure the Response components as shown below. To configure click on the Voice icon on the top right-hand side of the Response component. Clicking on the voice icon opens a Speak pop-up window with a field titled Say wherein you need to type the related voice response curated with a customized template as illustrated below.

  Say: {{inputs.book.value}} is now {{inputs.status.value}}. 

🖍 Note: Here the template {{inputs.book.value}} will contain the user input book name and {{inputs.status.value}} will represent the status of the book.

Prompt: Say next for the status before and after updation.
The same message will be replicated in the Reprompt field.
Reprompt: Say next for the status before and after updation.

15. Populate the field under Expectations by checking the Allow Global Interactions and then select Next from the drop-down list.

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: Library Management
Display Message: {{inputs.book.value}} is now {{inputs.status.value}}.

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

15. Next, drag and drop another Response component and connect it to the already configured Response component as shown below.

16. Configure the field titled Say by clicking the voice icon on the newly dragged Response component and type the voice response curated with a custom template as displayed below.

Say: The status of {{inputs.book.value}} before updation is {{var.bookList.1.status}}.
         The status of {{inputs.book.value}} after updation is {{var.new.1.status}}.

🖍 Note: Here, the template {{var.bookList.1.status}} will provide the status before updation and {{var.new.1.status}} will furnish the status after updation.

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: Before and After
Display Message: Before
                 {{inputs.book.value}} :
                 {{var.bookList.1.status}}

                  After
                 {{inputs.book.value}} :
                 {{var.new.1.status}}

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 in the Name field of the Test Response window that shows up. In the Conversation section of the Test Response, the Library Management intent through which this interaction flow has been initiated will be auto-generated in the User invokes field as shown below. 

4. Fill the With slots field titled book under Conversation with “Lolitha” and against the field titled status type as “Available”. 

5. Next, click the + 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. Click Save to perform the test.

6. To validate the Test Response, click on the lightning symbol on the left-hand side on the test case as shown below.

7. The resultant Test Response window displays the output.

🖍 Note: To obtain details about the Code Block component click on the Code Block icon as seen in the image right above.

Congratulations! You have successfully learned how to execute the Code Block component to render a tailored interaction flow attuned to the specific needs of the skill.

👍 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 Code Block, click here.

Tags:
Was this article helpful?
Dislike 0
Previous: Data Branching
Next: Dynamic Slots