Hello everyone, today we will see how to set up a skill to use Javascript functions in the Code block.
Javascript is a fairly simple code to understand that will allow you to perform operations a bit more advanced in your skills. This code is used in the Voiceflow Code block that you can place anywhere in your skills.
I have made some functions that you will be able to use in this tutorial and in your skills but feel free to add specific code requests in the comments, and if possible, I will add these new functions to those already existing.
Before starting in detail, here is the working principle of the system I have set up to allow you to have new functions as soon as they are available and/or updated.
I use a file that contains all the functions (existing and future ones), this file is encoded and hosted on a server. In your skill you will use the API block to retrieve this file in a variable and launch it from a Code block. This is your Init block if you want, the one that loads all the functions at each launch of your skill.
Then, all you have to do is launch the function(s) you want to use (we will see together the functions available to date).
So much for the basics, let’s start by creating our new skill in Voiceflow.
So start by logging into your account in Voiceflow
Then click on “New Project”
We will start by adding Global variables in our skill,
myVar
which will be used to test our functions
theCode
which will contain our code with all the functions
voiceflowJS
that allows us to call our functions
Once you have created these variables, we will add the API block which will allow us to retrieve all the Javascript functions I have created for you.
In the block API parameters, use https://s3-eu-west-3.amazonaws.com/gallagan/codejs.json
as url and map the response.code response to the theCode variable we just created.
You can add a Speak block on the Fail output of the API block just in case
Then, let’s add a Code block just after our API block.
I renamed it Init but you can rename it as you wish
Copy and paste the following code:
eval(Buffer.from(theCode, 'base64').toString('ascii'));
Warning, if you have changed the names of your variables, you must also change “theCode” here.
You have just setup your skill to be able to use the functions in a Code block.
Let’s end up adding a Code block and a Speak block after the previous ones.
In the last Speak block, add the variable we created at the beginning of the tutorial, for me it was myVar.
You can add Speack blocks to the fail outputs,
here is what your skill should look like:
Everything is ready, let’s move on to the fun part!
From now on, we will only use the Code block that I renamed “Demo”. So for the next code, copy/paste them into this block.
Let’s start with a rather simple example, in the “Demo” block code, copy/paste the following code:
myVar = eval(voiceflowJS.getLocaleDatetoString);
Here we use the getLocaleDatetoString function of our voiceflowJS variable, then we pass the result into our “myVar” variable. Finally, thanks to the Speack block, we display the result.
The principle will always be the same here, voiceflowJS contains all the functions, so to call a function we use: voiceflowJS.thenameofthefunction.
Let’s test our code with the “test” button at the top right of your screen.
Then click on the “Start Test” button
There you go, you get the result of our getLocalDatetoString function.
Are you starting to understand the process here?
Let’s try again with another function, getHours
In the Code block, add the following line:
myVar = eval(voiceflowJS.getHours);
If you wish you can comment the first line of code with //. This way, the commented line will be ignored.
For this example it will not have any impact since we replace our myVar varaible every time but it is a good idea to have this habit to find out later on what functions you use or not.
Again, run the test.
Here I get 17 because that’s when I write this tutorial. You will have the time of the code execution.
Now that you have understood the basics, have fun testing the following functions:
myVar = eval(voiceflowJS.getMinutes);
myVar = eval(voiceflowJS.getSeconds);
myVar = eval(voiceflowJS.getCurrentDay);
myVar = eval(voiceflowJS.getCurrentDayinLetters);
myVar = eval(voiceflowJS.getCurrentMonth);
myVar = eval(voiceflowJS.getCurrentMonthinLetters);
myVar = eval(voiceflowJS.getCurrentYear);
Here is the example for getCurrentDayinLetters
Let’s now move on to functions that use parameters. Add the following code to your block code:
voiceflowJS.minNumber = 0;
voiceflowJS.maxNumber = 20;
myVar = eval(voiceflowJS.getRandomNumber);
Here the getRandomNumber function uses two parameters, voiceflowJS.minNumber and voiceflowJS.maxNumber. Pretty simple, isn’t it? Go ahead, test this function!
You can run the test several times, you will get a random number between 0 and 20.
The following function rounds off the number passed in parameter with voiceflowJS.number
voiceflowJS.number = 42.42;
myVar = eval(voiceflowJS.getRoundNumber);
Here is the result
This other function allows you to obtain a random string of the length you want
voiceflowJS.stringLength = 20;
myVar = eval(voiceflowJS.getRandomString);
voiceflowJS.stringLength = 20 indicates here that you want to get a random string of 20 characters long.
I think you have understood, here is another one getFormatedNumber
voiceflowJS.number = 12584.89;
voiceflowJS.currency = 'EUR'; //EUR, USD, JPY...
voiceflowJS.currencyFormat = 'fr-FR' //fr-FR, en-US, ja-JP...
myVar = eval(voiceflowJS.getFormatedNumber);
voiceflowJS.number = 12584.89;
voiceflowJS.currency = 'USD'; //EUR, USD, JPY...
voiceflowJS.currencyFormat = 'en-US' //fr-FR, en-US, ja-JP...
myVar = eval(voiceflowJS.getFormatedNumber);
Another one, getYearsMonthsDaysSinceBirthdate
voiceflowJS.year = 1979;
voiceflowJS.month = 5;
voiceflowJS.day = 22;
myVar = eval(voiceflowJS.getYearsMonthsDaysSinceBirthdate);
With this one, getReplaceAll, you can replace all occurrences in a text:
voiceflowJS.myText ="We are outside. We are waiting.";
voiceflowJS.replaceFrom = "We are";
voiceflowJS.replaceWith = "He is";
myVar = eval(voiceflowJS.getReplaceAll);
The last one allows to clean up an html source, getRemoveHTML
voiceflowJS.htmlSource = `
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<!--comment-->
<head>
<title>This is my title.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
body {margin-top: 15px;}
a { color: #D80C1F; font-weight:bold; text-decoration:none; }
</style>
</head>
<body>
<center>
This string has <i>html</i> code i want to <b>remove</b>.<br>
In this line <a href="http://www.bbc.co.uk">BBC</a> with link is mentioned.<br/>Now back to "normal text" and stuff.
</center>
</body>
</html>
`;
myVar = eval(voiceflowJS.getRemoveHTML);
Finally, here is the content of your Code block at the end of this tutorial:
//myVar = eval(voiceflowJS.getLocaleDatetoString);
//myVar = eval(voiceflowJS.getHours);
//myVar = eval(voiceflowJS.getMinutes);
//myVar = eval(voiceflowJS.getSeconds);
//myVar = eval(voiceflowJS.getCurrentDay);
//myVar = eval(voiceflowJS.getCurrentDayinLetters);
//myVar = eval(voiceflowJS.getCurrentMonth);
//myVar = eval(voiceflowJS.getCurrentMonthinLetters);
//myVar = eval(voiceflowJS.getCurrentYear);
voiceflowJS.minNumber = 0;
voiceflowJS.maxNumber = 20;
//myVar = eval(voiceflowJS.getRandomNumber);
voiceflowJS.number = 42.42;
//myVar = eval(voiceflowJS.getRoundNumber);
voiceflowJS.stringLength = 20;
//myVar = eval(voiceflowJS.getRandomString);
voiceflowJS.number = 12584.89;
voiceflowJS.currency = 'EUR'; //EUR, USD, JPY...
voiceflowJS.currencyFormat = 'fr-FR' //fr-FR, en-US, ja-JP...
//myVar = eval(voiceflowJS.getFormatedNumber);
voiceflowJS.currency = 'USD'; //EUR, USD, JPY...
voiceflowJS.currencyFormat = 'en-US' //fr-FR, en-US, ja-JP...
//myVar = eval(voiceflowJS.getFormatedNumber);
voiceflowJS.year = 1979;
voiceflowJS.month = 5;
voiceflowJS.day = 22;
//myVar = eval(voiceflowJS.getYearsMonthsDaysSinceBirthdate);
voiceflowJS.myText ="We are outside. We are waiting.";
voiceflowJS.replaceFrom = "We are";
voiceflowJS.replaceWith = "He is";
//myVar = eval(voiceflowJS.getReplaceAll);
voiceflowJS.htmlSource = `
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<!--comment-->
<head>
<title>This is my title.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
body {margin-top: 15px;}
a { color: #D80C1F; font-weight:bold; text-decoration:none; }
</style>
</head>
<body>
<center>
This string has <i>html</i> code i want to <b>remove</b>.<br>
In this line <a href="http://www.bbc.co.uk">BBC</a> with link is mentioned.<br/>Now back to "normal text" and stuff.
</center>
</body>
</html>
`;
myVar = eval(voiceflowJS.getRemoveHTML);
Congratulations, you have just finished discovering the Code block.
As usual, if you have any questions or if you want to see new Javascript functions do not hesitate to comment below.