Video Transcript

Hey, this is Steve with Dabble Lab. In this video, I’m going to show you how you can really quickly create an Alexa skill prototype using a cool tool that I came across, not too long ago, called Sayspring. And Sayspring lets you build voice prototypes. I think that’s the right term for them.

So if you come to building skills from the mobile or web building world, you’re probably familiar with tools, like, InVision app or proto IO or Justinmind which are all different prototyping tools that let you create, sort of, a clickable or interactive prototype for UI designs and Sayspring does that for voice user interfaces. And I looked, I haven’t found any other ones that do that. I’ve played with a few that are for, like, conversational, like, chat box and things like that, but this is the only one that I’m aware of right now that let you actually use voice interaction. So it’s pretty cool and I will show you what I know this far.

So you go to sayspring.com first and set up an account. There is a free tier which is what I’m using right now but, I think, it gives you two projects. When you first set up the account, there’s an example project, which I deleted. I think, it’s like a banking skill or something like that. But I used it to when I was kind of just dabbling with it and learning it, I replicated a skill that I did, that I demoed in an earlier demo that is a voice dashboard, so it lets users access like a business dashboard for voice. And I’m going to replicate that in here creating that but let me just in case you haven’t seen the previous video.

Steve: So, Alexa, start my daily meeting. Alexa, start Our Daily Meeting.

Alexa: I’m ready for our meeting, but I’ll need your authorization code to continue.

Steve: 4367251.

Alexa: Okay. I’ve confirmed your authorization code. Would you like to start with sales, marketing, finance or product development?

Steve: Alexa, stop.

Alexa: Okay. I’ll be here if you need me.

So the way that the skill works is it starts with, like, a welcome message, the invocation message and then prompts the user for an authorization code. And then from there, it provides options to listen to updates for sales, marketing, finance, support, and product development. And so I’m going to replicate that skill using Sayspring here, so not all of it but most of it. So I’m going to call it Our Daily Meeting, like that.

And so when you create a new project it has some boilerplate stuff in here but the welcome message would be what would play, sort of, invocation after the skill is invoked the launch request message maybe if we’re trying to relate it back to Alexa skill terms, but the first thing that we’re going to do is we’re going to change this up, so welcome to Our Daily Meeting and I’ll just change this to please tell me your access code. And then the reprompt down here if the user doesn’t respond after x seconds, 8 seconds, I need your access code to continue. And the from here, down here whenever a command isn’t recognized, this is sort of like the general error handling, so I’m going to just leave that as is right now.

So what’s cool about this is couple of things. So you can actually test it using an Echo device which I’ll show you in a minute which is cool. But you can also test right here in the browser which I also like. So you’ll start preview.

Alexa: Welcome to Our Daily Meeting. Please tell me your access code.

So I’m getting the prompt but right now there’s nothing that I have set up to respond to that, so I’ll just close this down.

Alexa: Sorry I only understand the commands entered into this project.

So what I’m going to do is, I’m going to change up this sample here, so I’m going to call this Authorization. And this is going to be my authorization handler, I guess. So when the user says 1,2,3,4, like that, I’m going to send them to the response which is going to just be our authentication response, so we’ll say, when a user provides the access code will say, Okay, I’ve authorized you. Would you like an update on sales, marketing or financing?”

And down here it lets you continue the session, so like if this was an Alexa Skill, you’d be listening for the users response or just responding with a statement that is not listening for the response. So like, ask and tell and we’ll update that. And then this is the reprompt down here. So let me change this to Will you like an update on sales, marketing or finance? Okay. So let me test it to this point.

Alexa: Welcome to Our Daily Meeting. Please tell me your access code.

Steve: 1234.

Alexa: Okay. I’ve authorized you. Would you like an update on sales, marketing or finance?

All right. So now I’ve got to build those out. So I’ll show you how to do that. You add, in Sayspring they are called flows. I kind of think —

Alexa: Sorry. I only understand the commands entered into this project.

Let’s stop preview and close. So they are referred to as flows here. In my mind, these are, kind of like, states in Alexa skill, so these would be different handlers. It’s sort of how it works in my mind, but these would be like different sections of your skill. So we’ll call one sale and then I’ll add another one called marketing, and then I’ll add one called finance. And we’ll stop there for now.

Okay. So now in each one of these, I’m going to add a request that is, I guess, it’s the utterance, so I’ll call this the sales utterance. And when the user says the sales, remember the user is responding to the prompt from authorization asking what they want an update on, so we’re going to create that. And I’m going to add the response that is going to be the intent here at least. Again, that’s how I think of it. So I’m going to call it sales intent and this is the update. All right. And then this would, of course, go on and provide all of the details and the update, but just for testing, I will leave it like that. And then I’ll keep the session open and prompt the user by saying, would you also like an update on marketing?

Actually, a better way to do that would you like an update for marketing or — okay. So now when the user response to this prompt over here, Would you like an update on sales, marketing or finance? If the user says, sales, then they are going to get the sales intent here. So I just set that here. And you could actually use add multiple commands, so if you want to build this out where it’s supporting multiple utterances, things that users would say, I could say something like, Let’s start with sales. That. And that’s going to go in the same spot, so that’s going to be the sales intent also. So I’ll just update that like that. And let me go ahead and test this real quick.

Alexa: Welcome to Our Daily Meeting. Please tell me your access code.

Steve: 1234.

Alexa: Okay. I’ve authorized you. Would you like an update on sales, marketing or finance?

Steve: Sales.

Alexa: This is the update for sales.

Steve: Okay.

Alexa: Sorry. I only —

I forgot to put the sales update. I should also do — this is the update for sales. And then I will prompt the user, Would you also like an update from marketing or finance? And then this would be the reprompt here if there is no response. So let me try that.

Alexa: Welcome to Our Daily Meeting. Please tell me your access code.

Steve: 1234.

Alexa: Okay. I’ve authorized you. Would you like an update on sales, marketing, or finance?

Steve: Marketing.

Alexa: Sorry, I only understand the commands entered into this project.

So I haven’t built up marketing yet, so that doesn’t work.

Steve: Sales.

Alexa: Sorry, I only understand the commands entered into this project.

Okay. So let me close this out and let me do the same thing over here and build out marketing. So the user request is going to be my marketing. Marketing utterance I’m just going to say marketing here. And then I’m going to have my marketing intent here. We’ll say, What would you like to hear about next? I’ll use that as my reprompt also; wire this up. And of course, I’m going to do the same thing for finance to build this out. And, I think, you pretty much get the idea so you can go through here and you can create your complete voice user interface and listen to it in the demo here. But I want to show you, at least, test something cool.

Alexa: Welcome to Our Daily Meeting. Please tell me your access code.

Steve: 1234.

Alexa: Okay. I’ve authorized you. Would you like an update on sales, marketing, or finance?

Steve: Marketing.

Alexa: This is the marketing update. What would you like to hear about next?

Okay. So you get the idea. I’m going to now show you what I think is the coolest piece of this.

Alexa: Sorry, I only understand the commands entered —

Steve: Stop.

There we go. Which is the ability to integrate this with your Echo, so you can, like, test inside the Echo which I think is very cool. So the way that that works is you — let’s see, how did I make that work. Maybe it’s on my settings here, integrations yeah. This is it.

Okay. So over here on integration and I set this up earlier and then undid it so I could walk through it for this video. But there are some instructions here on how to set it up. Basically, what you’re going to do is you’re going to enable the Sayspring skill and then you’re going through accounting linking, link that with the account that you use with your Echo. So I’ll walk through it so you can see how to do it. It’s pretty easy. Just go to the skill store and the Sayspring skill. Here you want to enable that with your — the account that you use and I actually use personal account here, so sign in. This is the account I use with my Echo.

And then once it’s enabled, it’s going to prompt you to link and I’m logged in here, so that’s why it’s automatically linked the skill. So once it’s linked up like that, then you can just go back and say.

Steve: Alexa, open Sayspring. Alexa, open Sayspring.

Alexa: Welcome to Sayspring. The available projects are Our Daily Meeting and Voice Dashboard. Which project would you like to open?

Steve: Our Daily Meeting.

Alexa: Welcome to Our Daily Meeting. Please tell me your access code?

Steve: Alexa, stop.

So you get the idea. So I can —

Steve: Alexa, stop.

Alexa: Sorry, I only understand the commands entered into this project.

Steve: Alexa, stop.

Alexa: Goodbye.

So you get the idea now. I can actually test using the Sayspring skill which acts as a wrapper for the prototype that I created in here, so Our Daily Meeting; so pretty cool and easy way to prototype skills without having to write any code. And if you’re doing this in code now you know it can take a little while and a lot of the work is in just figuring out the user experience and the interaction.

So hopefully this is valuable. If you did find this video valuable, please like it and subscribe to the Dabble Lab channel. If you have any questions or comments, you can leave those and I’ll respond just as soon as I can. Thanks so much.