NOTICE: For Voiceflow's biggest UI updates, I will revise all this tutorial. So stay tuned!
Hi, I've createed a basic tutorial for how to create an in-skill purchasing skill using Voiceflow. This tutorial will consist of 2 or 3 parts, and this is part1 today.
In this tutorial, we will create a sample skill with ISP feature step-by-step. This sample skill is based on Amazon's official ISP sample, which is available on Github. So, you can try coding too if you are interested with it.
Here are some notes.
- not completely same as Amazon's sample. I just simplified a little.
- I've tested this sample working at the time of writing, but it may not work in the future.
- The main purpose for this tutorial is for understanding the basic of ISP and how to implement on Voiceflow. So, I will not guarantee if this sample passes Amazon's certification (maybe not). Generally, certificaition for ISP is more difficult than those for no-ISP skills. you may need to add some more features for passing certification. See Amazon's official documents.
- This tutorial may not be for newbies. At least, you should...
- be familar with the concept of intent/utterances/slots.
- have some experiences with creating a skill with Voiceflow, especially Speak/Choice(formerly Interaction, not old Choice)/Flow blocks.
- have some testing experiences with Alexa Develper Console because you can test ISP only on Alexa Developer Console or Echo devices. not works in Voiceflow Test.
We will create a skill named "Premium Hello World". This is a very simple skill.
- You say "Hello", then Alexa say "Hello" in various ways. That's it!!!
- But if You buy a in-skill product called "Greetings Pack" and say "Hello", then Alexa say "Hello" in various languages randomly.
- "Greetings Pack" is one-time purchase typed in-skill product. Once users buy it , they can listen to various international "Hello" forever unless users disable the skill. Updates: I changed this from subscription type to one-time purchase type because subscription requires you to care more in detail than one-time purchase and it's not good for the first-time basic tutorial.
ok. Let's begin!
Create Project
Let's start with creating a new project called "Premium Hello World". For this time, we choose "English(US)" for US skills. If you are living outside of the U.S., you can choose other locales based on where you live and also you can translate all the speech texts in your language.
Create Basic Feature
For ISP, we will need to create various features such as basic, premium, buying, upselling, cancelling, etc... First of all, Let's start with basic flow and add each feature step by step.
Basic feature works like this:
Alexa, open Premium Hello World.
Welcome to Premium Hello World, you can say hello! How can I help?
Hello
Hello. Would you like another greeting?
Yes
Howdy! Would you like another greeting?
No
OK. Goodbye!
Sounds very simple and easy, right? OK, now we will start to create this flow.
Put 2 speak blocks and connect like this.
Type speech texts in each speak block, like these.
Next, we put choice block and create an Intent named "basic_hello_intent".
Add an utterance "Hello" for this intent. Then, users will go to basic_hello_intent when users say "Hello".
Also, when users say other than "Hello", users will go to Else path. This means users say something what we don't expect. So put a speak block for urge users to say again something we expect and return to choice block.
After users say "Hello", then it's Alexa's turn. As I mentioned in the conversation dialog sample above, Alexa will say not only "Hello", but also "Howdy!". We can do this randomly by enabling "randomize outputs" option in speak block.
Put a speak block after choice block and type "Hello!" in speak block. Then click on "system" below.
A new speech text field should be added under "Hello", so type "Howdy!" and click ellipsis icon at the bottom.
"Randomize outputs" shows up, then click on this.
We will see small icons at very right of each "System says". Now Alexa will say one of speech texts randomly.
We can add more speech texts by clicking on "System" icon. Also, if you want to disable randomize, click ellipsis icon again and click "Unrandomize outputs". In this tutorial, we will go "randomize" because it will be more like human!
After Alexa says, we will ask users to say again or not. Put speak block and type like these. We use randomize here again.
Put choice block to capture users' answer, "Yes" or "No". For Yes or No, we can use built-in YesIntent and NoIntent. It's so easy that we don't need add any utterances and also recognition for built-in intents is very accurate.
If users say "No", skill will end, so put a flow block and select "Stop". Stop flow is a Voiceflow's built-in and It will be and should be called anywhere in the skill when users say "Stop", but like this, you can use this as exit block at the end of flow.
Click on "Enter Flow", then will go to inside of Stop flow.
We are now the inside of Stop flow and there are speak block and exit block combined into one block. So Alexa will say something and this skill will end.
Change Alexa's speech text in speak block like this and randomize here too. I love randomize!
Click on home at upper left of canvas and go back to the main flow.
Next, if user say "Yes", Alexa will say "Hello" again, so connect "Yes" choice of choice block back to speak block which say randomized "Hello".
This is somehow unclear. We can arrange the layout of choice block like this.
Looks like 8-shaped looping. Now it's very clear how conversation flow goes, isn't it? IMO, this 8-shaped looping is a handy but practical technique for arranging the layout of block in Voiceflow. Also, we can see that we used the same technique for choice block on the left.
It's another time we use 8-shaped looping for choice block. When users say something other than "Yes" or "No", it will go to else. So, we should put another speak block and connect using 8-shaped looping. Speech text in that speak block will be like below.
Finally, we've done basic feature for this skill!!! This is the entire flow now.
Let's test on Alexa Developer Console. Click on "Upload to Alexa" and open Alexa Developer Console's test simulator. It should works like this.
Next time, we will add some features for ISP:
- add an in-skill product as one-time purchase.
- add intents for buy or refund.
- add premium feature available when users already purchased.
Will continue to Part2.
