Using JavaScript in VAD applications

3CX Voice Application Designer (VAD), transforms the diagrams from your designed application into VoiceXML scripts. VoiceXML scripts can have JavaScript code to make some computations so the JavaScript library is available to the application designer. You can take advantage of this functionality simply by using the objects and functions available. As an example, we will create an application that can give a different welcome prompt message depending on the time of day.

Step 1: Creating the project

First you must create a new project. Open the VAD and go to “File” > “New” > “Project”, select the folder where you want to save it, and choose a name for the project. In our case we will call it “TimeSelectionTest”.

Step 2: Determining the current hour using JavaScript

JavaScript provides us with the “Date” object, which allows amongst other things to get the current date and time. What we need to do is define a variable, for example, “CurrentHour” and assign its value using a JavaScript expression.

To create the variable, select the file “Main.flow” in the “Project Explorer” panel and open the Callflow variable editor by pressing the button on the right of “Variables” in the properties window. Click “Add” to add a new variable. Enter the name “CurrentHour” and press “OK” to accept the changes.

Then, add a “Variable Assignment” component by dragging it from the toolbox to the Callflow. Select the variable “callflow$.CurrentHour” in the Properties window and then open the expression editor by pressing the button on the right of “Expression”. Using this editor, select the expression type as “Javascript Expression” and enter the expression “new Date().getHours()” as shown in the figure:

This expression has two parts: The “new Date()” builds a JavaScript object of type “Date” using the default constructor which initializes it with the current date and time and the method “getHours()” returns the number of the current hour, between 0 and 23.

Thus, we assign the current time to the variable “CurrentHour”.

Step 3: Deciding the message to play depending on the current time

Now that we have the current hour, we can use a “Conditional” component to decide what message to play:

  • When CurrentHour is between 6 and 12, we’ll play a “Good morning” message.
  • When CurrentHour is between 12 and 20, we’ll play a “Good afternoon” message.
  • Otherwise we’ll play a “Good night” message.

This means that the “Conditional” component must have 3 branches. Add the component by dragging it from the toolbox, and add the necessary branches. The main flow should look like the picture below:

We can now set the conditions for each branch. As mentioned, the branch “morning” shall be activated when the current hour is between 6 and 12. To do this, select the branch “morning” and click the button on the right of “Condition” in the properties window to open the expression editor.

In this case we will use a “VAD Expression” to verify that the 2 conditions are met (CurrentHour> = 6 and CurrentHour <12). Since the two conditions must be met simultaneously, first we’ll use the VAD function “AND” and validate these conditions in each of the two sub-expressions by using the VAD functions “GREAT_THAN_OR_EQUAL” and “LESS_THAN”:

Then we will select the branch “afternoon” and follow the same procedure we did before so that this branch is activated when “CurrentHour” is between 12 and 20.

Finally, the branch “night” should be left with the “Condition” empty. This means that branch “night” is loaded when “morning” and “afternoon” have not fulfilled the condition. “Night” will be activated when “CurrentHour” is after 20 and before 6.

Step 4: Add messages to play

Once we have the “Conditional” component configured to select a different branch depending on the time of day, we can add a “Prompt Playback” component to play a different message in each case.

To do this, drag the component from the toolbox to the diagram and set the appropriate message by pressing the button on the right of “Prompts” in the properties window. Repeat this step for each branch.

The Callflow should look like the image below. It is now ready to be deployed to your installation of 3CX Phone System.