VOGO Voice – Knowledge Base

Code Block

Estimated reading time: 3 min

Components are the key elemental building blocks that form a pivotal part of VOGO Voice’s interaction builder platform. A specially curated interaction on our platform will always include a fine arrangement of select components capable of delivering an individualized voice experience for the end-users. Code Block component is yet another significant component that gives an upper hand to developers and Skill Designers to render a highly tailored interaction flow attuned to the specific needs of the skill. The execution of this card allows to work out a multi-path branching that supersedes the functionality of its counterpart components and delivers the desired voice experience. As the name suggests. Code Block allows the option to code in JavaScript to create a multiple output path in a conversation for the user to interact with during the skill session. The yellow color assigned to the Code Block card suggests that it is a condition or decision-making component. 

This user-centric guide outlines the anatomy as well as presents its configuration within an interaction flow. To help you get started, the self-explanatory guide, on the whole, delineates the purpose of the component along with its relevance within a session.


How to access the ‘Code Block’ component

Navigate to the interaction builder platform of VOGO Voice to access the Code Block under the Components section. Click on the component, then drag and drop it onto the flow canvas.

Click the Edit symbol on the top right-hand side of the component card to configure it with the desired code that will enable a multiple output path.

Purpose and Relevance of the ‘Code Block’ Component

The core functionality of the Code Block component is such that it enables Skill Designers and developers to code using JavaScript to render a personalized user experience. 

Configuring this card by means of coding allows this component the ability to replace the functions of a few other components, namely, Check Variable, Add Variable, If/Else, Switch, and Data Branching. The component further allows to branch up to 10 paths i.e. 0-10 whereby 0 is the Default path which will appear automatically even when it is not called to action. The screenshots below display the placeholder text as well as illustrate the sample coding format to be followed while configuring the Code Block card.

To receive output via the selected path, you need to use a special variable ‘response‘ to return data from your Code Block as output. With this component, you can change/replace the variables in the flow, or make new variables or manipulate the settings based on specific requirements of the skill.
For instance, in your flow, if you have a variable called city with its value AI, that can be changed through the Code Block using the following piece of code
response.var.city = BL:
response.path = 0;

👍 Note: After each custom coding for it to become valid, make sure to select the appropriate path from 0-10, wherein 0 always denotes the default path. 

Given below is the coding format to be followed while configuring the Code Block component.

Sample coding format:

let item = JSON.parse(JSON.stringify(data));
let input = item.var.bookList;
let book = item.inputs.book.value;
let stat = item.inputs.status.value;
for (let i = 0; i< input.length; i++){
    if(input[i].name === book){
        input[i].status = stat;
response.var.new = input;

The ‘data’ variable central to the component is made use of to access all data inside the interaction flow. E.g. data.var or data.settings or data.inputs etc. Since data is immutable, therefore you can’t change the data through your Code Block. Yet in some cases, you may need to update some values in the data part, for example, when some conditions are met, you need to change a flag or likewise. In order to do that, you need to make a deep copy of the data object and make necessary edits and reassign it to response.var.modifed = modified; To make a deep copy of the data object, use this command on the top of your script let item = JSON.parse(JSON.stringify(data)); 

The additional quality of coding within this component as opposed to others qualifies it to maximize the user’s experience while interacting with the skill. As a result, it can replace not only the functions of select components, but also simplify the flow, and produce a productive as well as a cumulative effect within a custom interaction model. Another significant feature that makes this component exceptionally unique is that any data retrieved via this component to produce as an output within the interaction flow can be edited or customized which otherwise is impossible in other components that can only retrieve data to fulfill the user’s request. In such a scenario, this leaves no room for a developer to tailor the output before it is delivered to the end-user thereby depriving the opportunity of generating a high-end user experience, but that can be achieved to a fuller degree by the insightful use of the Code Block component.

Was this article helpful?
Dislike 0
Previous: Speech Synthesis Markup Language (SSML)
Next: Dynamic Slots