Building an Alexa Skill with Voiceflow
Alexa is one of the fastest-growing technologies out there, more developers and students are showing a huge interest in VUI development.
If you are looking for some resources to build an Alexa skill then you can go through this blog. Here, I’ll be using Voiceflow to build a super awesome Alexa skill in just 30 minutes. Voiceflow allows us to build voice apps just by drag and drop without diving deep into the code. If already built an Alexa skill, still do give a read and try building another one using Voiceflow.
What can you do with Voiceflow?
- Design prototypes for Alexa & Google Assistant.
- Build voice apps as good as custom code, easier and faster.
- Launch voice apps to both Alexa & Google — with one platform.
- Track & analyze the results of your voice apps with custom analytics.
What we are building
We are going to build a superhero search app using the Open Source Superhero API. In this skill, Alexa will ask the name of a SuperHero from the user and it will tell the biography of that Hero.
So, before we start building Alexa skill you need to do sign up at voiceflow.com
Okay, done with sign up?
Let’s Start Building! :D
After sign up, you’ll land to this page. Voiceflow already created a project for you by default, you can change the project name by clicking on the existing project name at the top left corner.
In the Blocks submenu on the left, you will see several blocks that can be used to build an Alexa skill or Google Action. Each block performs a certain function, and Voiceflow is based on building Voice apps by combining these blocks.
Let’s discuss the blocks which we are going to use for making the SuperHero skill.
1. Speak Block
The first block that we will use is the Speak Block, to make Alexa say something to the user. Drag the Speak block onto the canvas, rename it to Introduction and write a suitable welcome message for your app in the text area. After this, connect start with Introduction Block.
2. Capture Block
The next block we will use is the Capture block. It is used to take input from and store it into a variable. Create a new variable in the ‘Variables’ submenu on the left by typing a name and pressing enter.
Drag a Capture Block and connect it with Introduction Block. After this, write “Actor” in “Input Type” and “hero” in “Capture input To”.
Drag a Speak block after this and connect it with Capture Block, saying: “Searching for {hero}. <break time=’2s’ />” . Be sure to enter {hero} by hand so that Voiceflow detects it as a variable.
3. API Block
Now, we’ll be using Integration Block so that we can use SuperHero API for getting the SuperHero info. Drag the Integration Block, connect it with the previous block. In Integration Block, click on Custom API then it’ll Endpoint URL as we are going to make GET request from the API.
In Endpoint URL paste:
https://super-search-akashjoshi.flexiple.now.sh/?hero={hero}
Be sure that you write {hero} by yourself so that Voiceflow detects it as a variable.
Click on Test Integration to test the API call.
Now, we need to map the object path with the variables, here’s a video below to understand how to map the JSON output with your Voiceflow variables:
https://www.youtube.com/watch?v=dGVbEzM3soc&feature=youtu.be
Declare and map all the required variables, after mapping it would look something like this.
In the Integration Block, we can see that there’s two output one without a prefix text and another one with fail as a prefix. Whenever API call fails, the flow goes through fail state.
After this add a Speak Block saying “Hero not found” and connect it with fail state of Integration block. If the API succeeds and a hero was found matching the {hero} variable, all the output variables will be set with the correct values. Otherwise, they will be at the default value of 0. For this, we need to add If Block to the canvas.
Build better voice apps. Get more articles & interviews from voice technology experts at voicetechpodcast.com
4. If Block
Drag If Block and connect it with the success state of Integration Block. In the If Block, add a condition to check whether fullName = 0. If it is 0, connect it with previous Speak Block that having output “Hero not found”.
Else, the Hero was found. So, speak the hero name by writing in a speech block: “Their hero name is {name}. Their full name is {fullName}. They were born in {born}. They are {alignment}. They work as a {work} from {base}. <break time=’2s’ /> Do you want to search for another hero?”
Now, add a “Set” block by clicking ‘+’ sign at the bottom of a Speak block to the canvas and set fullName to 0. This is important because if the variables are not cleared, the previous answer will be repeated by the skill
5. Choice Block
Choice blocks allow you to ask users to make a choice from a pre-defined list of choices. If the user says one of the choices listed in the choice block, it will follow THAT choice’s path. If the user says something that isn’t one of the listed choices, the user will follow the ELSE path.
To make our Alexa Skill more conversational, we do not end our skill just by this output. We’ll ask users whether they want to search for another superhero or not.
Drag a Choice block to the canvas and connect it with the previous block. This block will check whether the user wants to search for another hero or not. Enter synonyms of Yes for searching further.
For else, add a Flow block, selecting Stop Flow as a flow.
Connect ‘1’ output of Choice Block with Capture block followed by Speak Block saying, “Which Hero do you want to search for?”
After this, the flow would look like this,
We are done! Let's test our Alexa Skill.
Here’s, sample output of SuperHero Alexa Skill.
Share Test
You can also quickly share what you’ve built using Voiceflow with others. Voiceflow has its own creator simulator where you can test just by the project link. To share your project link with others, click on the share option at the top right corner of the console.
Deployment
The thing I like most about the Voiceflow is that it is Cross-Platform, which means at the same time you can deploy your Voice App on both platforms Alexa as well as Google Assistant.
It saves a lot of time :p
Deployment in Alexa
Click on the ‘Upload to Alexa’ button at the top-right corner of the console and connect your Amazon developer account with Voiceflow. After this, test your skill on the Alexa simulator, whether it is working properly or not. If everything’s fine then fill all other details and submit the Alexa skill for production.
Deployment in Google Assistant
Refer to the below link for uploading your project to Google Assistant.
https://learn.voiceflow.com/articles/2705386-uploading-your-project-to-google-assistant
After this, follow below link to send your project for production
https://learn.voiceflow.com/en/articles/2712178-deploying-your-google-assistant-project-to-production
Hope you liked this article. Thanks to Akash Joshi for making SuperHero API accessible for our Voice App.
Community
Do join our #VFIndia community, we regularly do Meetups on #VoiceFirst and if you face any problem while building the Voiceflow project, you can ask about that in the #VFIndia Facebook group.
Commudle- https://commudle.com/voiceflow
Facebook- https://www.facebook.com/groups/701062400414417/
Have questions? Ping me on twitter :p
https://twitter.com/AsDivyansh
