Building AI Chatbots using Voiceflow | STEP BY STEP

in this video we learn how to master voice flow and here we learn by doing we start with building some of the basic customer service chatbots and we work our way up by building an advanced e-commerce chatbot and then a complete AI conci system for hotels and these are not just chatbots we will learn some of the most requested Integrations like calendly air table zenes Google Maps and we deploy each of these chat Bots to web flow Shopify store and WhatsApp we will discuss voice flow functions API calls and everything in between you might be asking why voice flow and why me if you look at why voice flow here voice flow is for teams building more than a basic chatbot if you read their updated website here build Advanced automations no code that scales customize everything thing collaborate at scale build faster automate more with less cost at scale I won't be reading everything but you get the idea Trilogy automates 60% of their L1 and L2 support tickets these are some of the amazing case studies here R Auto saves 30 hours per week with voice flow JP Morgan shs cut time to Market from 8 weeks to 2 weeks voice flow reduce ticket costs from $31 to $2 that is amazing if you got time I strongly recommend that you read their entire website there are a lot of case studies lot of great reviews Enterprises the teams that are using voice flow today I have built and sold over 40 AI agents in the past 8 months and those are worth over tens of thousands of dollars I have used voice flow for 90% of these projects and why are businesses willing to pay thousands of dollars for these AI assistants look at this article Clara's AI assistant is doing the job of 700 workers and if you read a bit more further the integration is expected to increase profits by $40 million in 2024 and not just profits if you look at the efficiency has resulted in fewer errors a 25% decrease in repeat inquiries and reduced average conversation times from 11 to 2 minutes that's a lot imagine how much they would pay someone to make that 40 million profit even 1% is a lot you might be saying it's some Fortune 500 company how would that relate to me if you look at this article that came out less than week ago with the latest this data it clearly shows only 35% of the companies use AI as of 2023 and 9% of the Fortune 500 companies use Ai and majority of these companies use AI for customer service if you look at the main points here 42% of the companies globally are exploring Ai and will soon implemented that is the opportunity here that 60 42 to 6 5% of the companies who are actively looking unless that business owner is living under a rock they know they have to implement some kind of AI to stay in this game AI is here to stay so it's up to agencies people like us to come in and fill that need you might not save $40 million like Clara did let's say you helped a business replace 2/3 of the customer service team a small business had 10 customer service Representatives let's say you your AI agent managed to replace 2/3 here and that would mean increase in profits average customer service rep makes $40,000 us but let's imagine they are Outsourcing it and it's only $10,000 that it's still six customer service reps is close to 60,000 ,000 that you're saving and businesses are happy to pay $10,000 a year for making this AI agent if they see that kind of result building these AI chat Bots is definitely a high income skill that you can have in 2024 Bo flow is one of the best platforms out there to do that hey my name is money and I have my own AI agency gy matter AI that have been running for the past eight months and in this video we are going to learn about voice flow we will start from the basics why and when we should use voice flow and starting from the key Concepts which llms are available the knowledge base the tokens all that stuff and we cover a beginner tutorial which is a customer service chatbot for my AI agency and we will actually deploy it onto the website it's on webflow and next we will explore an advanced tutorial with an e-commerce chatbot which has air table integration zendesk integration Google Sheets and we will explore other resources other free resources that we can learn more about voice flow let's start with why we should use voice flow if you look at their website they say voice flow helps conversational AI teams build and launch incredible AI agents for any use case faster that is absolutely true if you look at how smooth the interface is how easy it is to navigate everything is just drag and drop and if you look at the teams that are using voice flow McDonald's Amazon PayPal BMW Google Home Depot JP Morgan these are some of the best brands on the planet today and they are using flow and it's so easy to build and scale and we will learn that in this video today people like Liam Atley are building AI education platform an entire SAS has AI Liam on voice flow so you can that's $100,000 per month AI SAS on voice flow and it's easy to use great support they have excellent Discord Community every question will be answered the team is super responsive everyone is super helpful you can check their dogs templates and they have a lot of tutorial videos on YouTube as well next coming to the key Concepts first we have llms if you are here you know what large language models are they are AI programs that can generate text summarize analyze there are so many tasks that they can perform they are trained on this huge amounts of data if you want to learn more about what large language models are and what they do you can always watch there are a lot of YouTube videos covering that I won't be going in there the reason I mentioned llms here is to show you which llms voice flow offers this is the this is basically learn voice FL chatbot that you would see once you log in once you sign up for the voice FL account let me show you which AI models that they have gbt 3.5 turbo 4 Turbo 4 Cloud instant 1.2 Cloud 1 and two and these are the large language models that are available right now they will be adding more second we have knowledge base this is what differentiates our custom chatbot from CH GPT models like CH GPT has been trained on lots of data but it's not custom it doesn't know who you are what your business is but once you use these custom knowledge chatbots we are basically training the chatbot on our data so for data sources you can add plain text you can upload files in formats like PDF text dogs the maximum file size is 10 MB the URLs sitemap whole sitemap and for integration ations we have zenes help center for now I'm assuming they will be doing more adding more for data source don't get me wrong when I say Max file size is 10 MB the number of files that you can add these 10 MB files will go up based on the plan that you have for example 50 data sources on a fee free plan 200 data sources on uh on professional plan and 2,000 on teams plan amount of data that you can add to your knowledge base is still a lot and finally we have token usage earlier when I showed you what llms voice flow has you can see 0.6 tokens 12 tokens 25 tokens this is based on how much these llms usually charge so if you want to know how these tokens will be charged I will provide this link in the description down below to learn more about the tokens you will get about 100,000 tokens on the free plan and around 2 million tokens for professional plan if you need more tokens than 2 million you can always buy million tokens for $5 and if you look at the pricing we have a professional plan for $50 per month and you can see up to 20 agents 200 knowledge based sources and 2 million monthly a tokens and team plan is 20 workspaces unlimited agents and 5,000 knowledge based sources and up to 10 million monthly AI tokens you will get a free trial of 14 days for the professional plan if you would like to sign up for 10 teams plan you can always contact them next let's discuss the usage for every message I was being charged around 500 to 50 00 tokens and it was mainly based on the number of chunks these are the inputs and outputs is the max token settings if you look at the model itself the max tokens that you see here is Max tokens that they have is 2,000 you can set anywhere from 10 to 2,000 you'll be charged based on that that is on the output side of things for input you see how it has these chunks chunk limit 1 2 3 4 the quality of your answers will go up based on the number of chunks that you use it's basically context if you raise the chunk limit your accuracy will improve but it will require more tokens output is can be adjusted based on Max tokens and it should be whether you're are generating a a short tweet as less than 160 characters or you generating a Blog article So based on that you need to adjust Max tokens and it differs for your use case and this is the system prompt we will see more about this in in our tutorial that's on token side of things again I you can read more about what tokens are in this article and they have even a 10-minute video explaining in detail what token are how you can optimize your token usage all that good stuff now let's go to Voice flow Basics you might be wondering there has been a bit of change in the presentation itself if you go back I did not cover this in the agenda this is because halfway through the tutorial voice flow changed all their branding their website and everything they look completely different so I wanted to add redo some of the tutorials and add a bit more info I thought it would be useful so you will see three more slides in this presentation so it voice flow Basics is one of them we will discuss blocks and cards we learn about buttons choices intents utterances AI tasks and responses components and functions and in the beginner tutorial we will go through all of these voice flow Basics not the components components we'll see in that advanced tutorial but in the beginner tutorial this is a customer service chatbot for my AI agency gray matter AI we will have different conversation flows we have this Gmail integration where some when someone submits a form within the chatbot we will get a notification in Gmail and we will deploy this on my webflow website that's the web chat integration and we will also see how to integrate cly using code without any third party software third party SAS that we have today and the next Advanced tutorial this is more of an e-commerce template the retail chatbot template that they already provide we will learn more about components what they are how they help help how we can reuse them in any conversation flow and we talk about zenes kpi we actually go in and integrate a live zendesk uh platform with the chat bot so user can submit their ticket on the chat bot itself we will first try to answer any question that they have if we don't manage to find the answer we will let them submit the ticket and we will integrate air table API as well where they can a track the orders and B add notes to the order itself whether that's cancellation request whether that's uh delivery address change or any notes that they want to add to the order we will do that from the chat bot and we will integrate this chatbot on a Shopify store and I have this bonus tutorial that I'm working on on this is also a template by voice flow but they are not providing it anymore it's a AI coner system for hotel so on top of what they provide I want to show you how to integrate Google Maps into that hotel template because finding a restaurant finding uh places of attraction in and around that hotel would be a great uh Plus for the hotel chatbot and we have stripe API we will use custom actions and see if we can integrate stripe to chatbot itself and we will learn how to deploy this chatbot on WhatsApp and finally we have this section level up your voice flow it's not really in sequence I will basically demo the first SAS after the first tutorial I will usually include these SAS in the middle of a tutorial by the end of the tutorial or whatnot to show you any easy way on how to achieve this without doing a long session for example SAS one we can integrate calendly add videos make your chatbot look beautiful with CSS and talk to agent with a click of a button but I will also show you how to integrate calendly manually so you will see that comparison and SAS 1 2 3 I have three softwares that can level up your agency level up voice flow and if you have further questions or if you want to access these templates for free you can join my free school Community below I have resources that are chatbot templates from my previous tutorials we do weekly 1H hour Q&A sessions and I also have workshops planned every 15 days or so or even once a month that would be a longer Workshop of 3 to 4 hours where we learn new stuff together so without further Ado let's jump into our first tutorial let's go to boys flow website once you're in you can see how widely different is from just few minutes ago they actually rebranded 3 days ago they changed their logo but it's still relatively easy to find everything that we discussed previously their Marketplace their functions uh the documents in the resources you can find the YouTube tutorials as well GitHub the Discord Community they have even updated trusted by previously it was 200,000 teams now it's 250,000 teams this goes to show how fast the AI is being adopted if you don't have an account uh click get started since I already have an account I will just sign in you will once you log in you will see this screen create a new assistant I will call this gray matter AI for modality you can select either chat or voice I'm going with chat and language these are all the languages that you could select I'm going with English obviously continue and here manage access you can either invite inv people of your team to this workspace or in rare cases I did invite some clients that they really wanted to see transcripts and see update knowledge base themselves in that case you can invite the clients as well one drawback that you can see is clients can basically see what work you did and they can replicate it if they want to mitigate that there are SAS right now to create a custom dashboard for a client I will show that once we get into the demo itself I will demo some of these cool softwares that are available to level up your agency so that you can work with clients more effectively so that they can see the analytics see the transcript see update the knowledge base themselves without coming to the voice flow seeing your flow all of your B for now I am not inviting anyone I will just create an assistant this is what you would see once you create a new assistant I will first delete everything I already told you how we would learn here we learn by doing so I won't be explaining all of this stuff right now we will see one by one once we get into the tutorial and every chat bot that I built from scratch I usually create a mirror board this will be based on two things one the client's website and two based on what we found in the discovery call so I have both of these context what we discussed during the discovery call and the client website and I will put together this conversation flow for our first client call and we will discuss whether they like the flow or or do they want to see something else add a new integration or whatnot this is really simple flow that I have for my agency usually it's this multiplied by two three uh they definitely need a lot of Integrations and lot of uh intents butn and whatnot for this flow I will start with a welcome message and ask them how can I help and then we will have three buttons one for the services and two is contact us basically submit a form and third is a discovery call and there is a no match also even if they ask a question it will be routed to it will be considered as no match and we use knowledge base to answer the question once we answer the question we loop back and say how can I help and we will present them with these buttons and the ability to ask a question as well and once they select Services they will see a Services Carousel and for the contact button which is submitting a form we will use the form that I have on my website name email why they why how can we help and the budget for the project and we will ask for a confirmation if they want to edit the these again they will go back and we will do an API call using make if it's successful and and uh email is sent to our Gmail then we'll say thank you if not we can we say something went wrong and we can start the flow again and for the discovery call Button we will provide them with our calendar link that they can book the call with again after each of these we will again loop back to the first saying how can I help or we will add a goodbye Button as well if they would like to and the conversation that's the flow if you want me to walk you through the whole process as to how I would create this flow feel free to comment down below and I will make a dedicated video going through the client's website so back to the voice flow we have our gry matter AI uh first like I said I will start off with the welcome message for that I will use a text card I will just drag and drop here and I like naming my blocks so I am calling this a welcome block and for the welcome block so you can basically use any text that you want uh any welcome message that you want for this case I'm saying hello my name is Richie how can I help you and this is variant generation you can generate let's say three variants of the same message hi am Richie what could I do for you for you how can I assist you I will just accept that command enter and control enter if it's windows and each time we interact with this chatbot you will be seeing a different message so basically start to text card and this is the first message they will see so once this is from talk we are using a text card to talk now it's time to listen how do we listen there are three different options here we can either use buttons we can give them a yes or no choice or predefined choices and or we can just basically capture everything that they say whether that's text or whatnot we can capture that for first let's use buttons first button I we talked about services first button services and second button submit a form and third button let's say for the buttons like I showed you earlier I am going with the services contact which is submit a form and Discovery call I will say schedule a call so let's see how this looks hey there I'm Richie how can I assist you you see services submit a form schedule a call but not every person that comes in would select these they might type something like what services do you offer even though we have a dedicated flow for services it says sorry I didn't get that please try again what we have to do is that's where the intent comes in you need to attach intent for services what do I mean by that when you need to create a new intent services for the attan is what services do you offer if you generate 10 sample examples close to what they have I'm interested in learning more about Services you provide what kind of services does your company specialize in how can I access your services so these are some of the things or different variations of things that people can say to the chatbot and it will recognize that we are talking about or the person that visitor of that website is talking about the services and we will display them the services so that is the intent that we have let's say uh we will add couple of more intents for uh these two as well create a new intent we are calling it contact for sample erences I want to submit a form let's generate five samples for this and you can see the intent confidence or the atanes number of atanes is low good practice is best practice is to try and fill up all the atan is Fill This Bar let us add I need someone to contact me and generate five more samples okay we have good number of phrases now so that's enough for the contact and for schedule a call we can create an intent saying call for the utterances I want to schedule a call sounds good let me generate 10 more variants of nice the bar is full and I'll go ahead and create the intent let's say someone comes in ask for what services do we offer or click the button here we need to start connecting these Services button to a flow let's start with a text block I will say here are some Services we offer I won't be generating any variant for this for this block I'm calling it Services now that we added a text you can either provide a list which is really basic you can add an image an image is something you can browse or you can just provide a link to the image if you have the image URL for example this is an image link that I have I am entering that and once you hit enter you will see an image AI chat Bots image is also really basic so what I would want to do at a minimum is to add a card so what does a card do a card has a URL and a title and there is a description and there is an ability to add a button as well there is a button as well I said go to URL and this is how a card looks like so ideally you will have multiple cards right so let me delete these two since you already know how that works a carousel is something with multiple cards card one you can just add a card and add more and you can list all the services that you have for example I will be using the URL that I just used for the title I said AI chatbots for the description I have some test description here and the buttons is we can say learn more and for the action once they click learn more we need to we have multiple options you can say go to block you can send them to welcome block or you can go to intent and you can reroot them to a different intent you can either end the conversation which is really bad user experience but you can set a variable you can open a URL I think this is what's most applicable at this point for the URL I will just provide the URL for the actual AI chatbots web page that I have once you hit the test once I select Services here are some Services we offer this is what they would see if they hit learn more they will be redirected to my website Cool since it's a carousel we can add more chat more cards to this let me add two more so this is the flow that we have so far I also added bflow automations and AI Consulting and I do have more services that I want to list but you get the idea you know how to add these carousels now in the talk we learned about all the text image card and Carousel now that we have the services Carousel before I hit run let me train the assistant so that it learns all the intents and stuff okay assistant is ready for testing once we run test you can let me try whether it recognizes the intent I said what services do you offer so it classified the intent and it's showing me it's taking me to this flow and I can see AI chat BS workflow automation uh Consulting when I I said learn more I'm being taken to that page session ended path not connected but it shouldn't be like that remember people are conversing on a website with a chatbot so if you stop abruptly it's a bad experience you need to keep them in the loop I can just take this conversation flow and loop it back here but every time it says hello my name is Richie hi can how I can help you today I do like the buttons aspect of this text but this welcome block wouldn't be able to help me so for that reason I suggest we create a new blog for let's call it a follow-up question block for that we need to use text I'll say question I said do you have any other questions I'll generate three more variants perfect I will just copy this flow here and paste it okay now each of these I want to connect this to the followup question block how do I do that I will just drag this and in the actions I can go to the block or go to intent or end the conversation set variable everything that we've seen earlier I will say go to block and we go to question block so let's do that for all of the URLs once they click learn more we will redirect them redirect them to the website and also ask a followup question now that we connected everything we can look Missy you can just say go TOS go to block and select the block Services it works just fine so now on to the next button submit a form for this we need to use make and submit this form the information that we collect from the user and send this in an email to our Gmail or whichever platform we use to do that I need to show you some of the best practices that I follow I don't want to make this flow really huge on the homepage what I want to like to do is I will add a topic a new topic for this topic we are calling it contact so this is where we are trying to capture the information that people say let's say want to be contacted or I want to contact someone at your agency that's when we trigger this flow and we do that by creating it as a new topic so it's away from home and let us start with a text saying so once they hit I want to be contacted or I want to contact someone we will take them to this flow and first question we would generally ask is let's start with your first name and uh we can generate variance if we like let's say let's name this block name okay think about this in the home you see submit a form and you either click the button first thing you would see great let's start with your first name or if they say I want to contact someone great let's start with your first name you need to really visualize and test this before moving forward this sounds okay for the basic demo now the user will share their name we need to have a way to capture that response in order to send it to our Gmail right for that we need to use a capture card by default capture card captures last atance it's something that user set after every message last Ence will change now we need to have different variable because last Rance keeps changing at every instant we need to capture their name email uh why they are here and phone number that's what I mentioned in my mirror board earlier and there is a way to figure out what info that a certain business certain agency is capturing if you look at my website right if you go to the homepage or even the contact us page you will see name email message and their budget that's the reason why I put these four some businesses may need location such as a real estate business let's say so in that case you go with what the business wants to capture that's the idea for this reason let me create a new variable instead of last erence I'll be calling it first name capture user reply to first name and then we go to next Tex so the next question would be thanks please enter your email and I will change the name of the block as well I Chang the name to email now let us capture the email and and we will save this to a new variable email then we need to find out why they are here so that would be another text block so I said how can we help please provide us with the detailed explanation of your product always proofread your chatbot content every block every card step by step because that's important you don't want spelling mistakes or misspelled grammar in there trust me now let me rename this block to Y here and we will also name the variable as y here as well instead of last atance we create a new variable y here create variable and now so far we have first name email and why they're here now it's time for Budget again we ask them what is the budget for the project estimate only this is not final price by any means we will then rename the blog to budget and be capture their response as well I haven't shown you how to set variables you can either capture all the users response that is the last deterence and save it to a variable or we can have a button and save the input from the button as a response as well let me show you instead of this let's say we have a button in here which has three choices we are giving them three buttons the first one would be less than 5,000 okay I added three buttons less than $5,000 5,000 to 10,000 and 10,000 to 20,000 now we have the buttons we are not actually capturing what user has selected to do that the next step that I'm going to do is the API step for the make uh we go to make to set this up we will send all of this info to our Gmail we we need to do a set step for less than $5,000 we need to add an action which is we are setting the variable and we are applying this to a budget variable you need to create a new variable budget is not available in the this is something I created you need to apply this to budget and we are calling this less than 5K add set okay string should be in in quotes less than five okay got it so we do the same for the other two as well we need to set actions so I've added actions for each of these choices and we will connect each of these choice to next block but before we do that I think it's better if we before we go to API step let's do a confirmation Block in the confirmation block we will ask them for is this information accurate and we will give them what they just entered for first name we'll select first name email email for y here variable I'm reading it as message uh it doesn't make sense if we say why here but for the budget estimate it's straight for forward and we will ask them would you like to submit this and we will give them a yes or no choice now let's test the flow that we have so far you can hit r or run test buttons submit a form okay you see how we haven't selected the block here that's easily fixable let me select the block on contact name okay let's run the test again submit a form great let's start with your first name money money test.com demo text for the budget I will select 5,000 to 10,000 okay what I would like to do is eliminate 5K to 10K it doesn't look professional okay and when I say no it says excellent let's begin with your given name it doesn't sound good either I will make these changes first let me remove the randomizer here I'm changing it to please enter your first name and for the variables here I will edit them 5,000 instead of choices I will add buttons I don't want users typing when they can select make these choices easily for actions let's go to block contact name and if they say yes we will take them to the API step let me test this quick okay is this information accurate first name email message budget estimate do you like to submit that if I say yes it will now it's not connected to anything but if I say no it will loop back again so let's have our API step we need to send all of this info to Gmail Dev and we select API for the API step we'll need this request URL for this you need to head to make.com I will provide all the links below I already have an account if you don't have one you need to sign up once you're in this is the dashboard that you see you need to create a new scenario and the first application we need is once you select web hooks you need to pick custom web Hooks and you need to choose create a new hook and save you will see this URL once you see this copy address to clipboard and you go to the API step and you paste this URL and send a request 200 means it's a successful API call if you head to make you see successfully determined so you hit okay the other module that we need to add is Gmail now this is the Gmail address that is being used to send these emails so you need to authorize I already authorized mine it's just following step by step you need to just sign in with your Google account and it's done and you will see this page once you authorize that I will select send an email and for the recipient I'll be using the same email that I uh signed in with and for the subject I selected form submission but but you can select anything that you want before we come into content I would like to add few few things here in the parameters section of the voice flow because this these parameters are the variables that we are trying to capture the first one is the first name we'll need to enter the variable here I will do the same for the next three variables now that we selected all four parameters we can go ahead and edit this in make I will just use a generic message saying you received uh following submission now we don't have these details just yet for now you need to just save it and try and run once okay first you need to save save it let me stop that for a while first save it and then run once now that we added these details I will try to send a request with these test Fields money money at test why here is a test and the budget is 5,000 I will hit generate and 200 is a success once you go in I have received an email actually form submit saying first name email see how these fields are empty so to receive the info we run this scenario only once and we have this data now let me connect each of these with the respective Fields now you need to hit okay and save it once again and I will run this once more and I will resend the same data to okay I received one more email says form submission now I see first name money email email message and budget that's how you integrate Gmail using make now all you got to do is you need to turn it on and set the scheduling as immediately as data arrives and every time someone submits a form here on here and it would be a success for Success we will add a text button says thank you your form has been submitted and we will finish off with this with go to block and we will go home and we will start there okay if it failed for some reason we'll say something went wrong please try again and we will take them to uh the welcome block as well we don't want them to try and try again let me test the whole thing and test okay I entered following details money money gmail.com demo chatbot 5,000 to 10,000 and I hit yes API call successfully triggered this is in the debug mode by the way so that's why you're seeing all of these messages your end user won't be able to see anything of sub so you don't have to worry about that and at the end of this submit the form flow I selected welome message I should probably go and change it to the question question question block so it would be a followup instead of the actual welcome first message reintroducing uh our AI assistant again we successfully finished two conversation flows and we are still in the first basic tutorial and this is the form submission that I received by the way now we have finished two conversation flows for our customer service chatbot we still have a schedule a call which is calendary link and the other one is actually using our knowledge base to answer the questions first let's cover how we can use AI model and the knowledge base our own knowledge base to answer the questions that user has for this you need to go to content and you need to select add data source when we covered key concept we talked about how we can add plain text we can upload files of different sizes URLs site maps and Integrations for this example I will use my sitemap this is my website and I will copy the URL and and I will just add sitemap.xml in the end and that will give my sit map and this is something voice flow has introduced recently refresh rate you know how websites are constantly updating and if it's a notion database or a URL like a Google doc you need to be continuously refreshing that so it's daily never weekly monthly I hope they will bring hourly soon but let's stick with daily for now and continue these are all the pages that my website has I will add all of them to the knowledge base and data sources are being added and status is successful as you can see now if we hit on this settings you will see the knowledge based settings AI model is gbt 3.5 turbo they have added Cloud 3 I think it's recently it was not here 4 days ago awesome uh you can get these on a paid plan I will use GPT 3.5 turbo for this example you can set the temperature wherever you like Max tokens it's it will be usually low I left it at 500 you can go up to 2,000 if you'd like chunk lamit three is good and this is a prompt that I prepared I will share the prompt and the template in the school Community uh please check the link down below if you want me to make a dedicated video on prompt engineering for AI agencies comment down below as well once we save it we can preview the knowledge base yeah once we had sent this is the response that I got if you see the sources frequently asked questions AI Consulting AI chat Bots good work and to use this what we can do is we need a no match for the action we need to use one of the AI steps which is response AI card for set time AI don't worry about it in the next tutorial I will go through set AI there is a wonderful example where we can use set AI so this is a response AI step and instead of using AI model I will select knowledge base and question would be whatever the last utterance of the user is so we will try to answer this question when there is a no no match and if it's found it will display the answer and we will then go to that follow-up question if it's no we will say so for no match not found I am just saying something went wrong please contact us and I gave my email address and that will end the flow so let's test it run test we already have intents listed for all of these right we have Services submit a form a contact uh and a call for this I need a different question that is not being covered in the endent I said what is gray matter AI so nothing matched and it use the knowledge base AI knowledge based response GPT 3. vobo you you can even see the number of tokens that has been used and gy matter AI is a company that offers comprehensive awesome we know that knowledge base is working for submit a form we forgot to connect this flow go to block block contact name nice for the no match we need a no match case here as well right awesome finally we are at schedule a call to do this we need to set a variable let's call it [Music] link create a variable named [Music] link and we will set that to my calendly link which I'm going to copy and paste now once we set the link let me just move this a little bit now let's have a text blog where we copy a code an if frame this will be a calendly embed paste it here and we follow that with our calendary will be rendered in the chat we can only say please book a time that works for you we cannot confirm whether they actually booked a call or no we can ask them in the form of buttons you can say I'm done and we can then go to the block uh home and question Let's test this schedule call now we see this empty gray block here because the calendly is won't be rendered here in the test chatbot what we want to do right now is go ahead and deploy this into our main site and then tweak it from from there let me now that we finish the whole thing the we finished all the flows Services submit a form schedule a call no match right now we will go ahead and publish this I will call this Richie go ahead and publish successfully published let me embed the fidget and before we do that there is a bit of customization that we could do you can see under General it says chat persistance never to F forget write 25 pixels by 25 pixels I can turn off powered by voice flow and for the appearance uh we can customize the color I will go with purple neon you can upload an image if you'd like I won't be doing that now now I will copy this script and head on over to gatter Ai and webflow dashboard you need to go to site designer and this applies for both uh Wix Squarespace or any no code uh web platforms this is all the sections that I have once you hit add you will see um embit HTML embit this is what I need usually it's by the end of the page but if you want to drag it and add somewhere that you like you can do so as well so I need to edit the HTML embit I will just paste the code that I have right now and hit save save and close publish publish to selected domains and done I did not have a chatbot previously now once I hit refresh I am seeing a chat icon greetings amrai how may I help you schedule a call perfect I see my Cal here you can a person can go ahead and book the call and answer any questions once they are done all can be done within the window once they are done they will hit I'm done we can ask have more questions um anything that we want submit a form first name last name said yes thank you your form has been submitted and let me check my email real quick yes form submission received test money test test 5,000 and that should con include our first tutorial we haven't finished just a moment here and for actions go to blog so I basically connected this set link to the new blog we can call this link cly you can find this template in in my school my free community link will be in the description down below yesterday it worked fine but when I was testing this morning something came up something did not seemed right when I was chatting when I hit submit a form I was asked my first name and I was asked to enter email once I entered email as you can see the flow went back to the start again it's asking my for my first name so this is an important screen how do you access these transcripts it's under designer content and number three is transcripts so under transcripts you can see the test that's we that we actually did in our chatbot and the tests that are done on the website I mean it's not a test even though it says test User it's actually ual website visitor if someone from your team has any conversations with the bot their name will show up here as well so if you look at the conversation that I had this morning this is great because if you can actually go in review all the transcripts that are that a chat bot is having and if you find an utterance that matches with an intent you can add utterance to in intent submit a form is contact 100% right I selected a button but this is this shouldn't be contact it is for some reason it is thinking that the intent is contact so it's re restarting the flow how can we fix that before I show you how to fix that this is an important screen that we have right now when errors like these show up you can save this for later if you have a team member or if you are working with the dev you can actually mention them hey money uh it shouldn't say that look at message number three it's not right and once your team member logs in they see the same screen as well they see the notes and once they review that they can hit Mark as reviewed so transcripts is a great feature to add utterances to the intents that's one thing and for team collaboration as well so let me show you how to fix what happened earlier it happened in contact right for some reason the response that we provided here is triggering the intent so what we can do is Select capture email and in the settings intent scoping instead of listen for all intents select only intents in this step that way it doesn't try and figure out which intent it is and restart the flow it will just capture what is being set in that step so do that for all the intents here so that way there won't be any errors intent scoping only intents in the step nice that should fix it if you have any problems feel free to join my free community school I'm happy to answer any question that you have let's recap what we have learned so far we know what intent is we know response AI we use that to answer questions from our knowledge base set AI I will discuss that in the next tutorial and we have seen using all of these four Talk cards that is text card image card the actual card and the Carousel and we know how to use listen buttons choices and capture in logic we know how to set the variable and we know what random is we are randomizing all these variants and component I will discuss that in the next tutorial as well and we know how to end the flow we will just drag this and place at the end of the conversation and that will end the flow we in the logic we have yet to discuss what a condition is and component in the dev sign of side of things we need to learn what a function is what API when we are submitting the form to Gmail we saw the API step custom action we will see that in further tutorials let me show you what a conditional logic is library is something where you save a certain flow for example if you want to save these three flows uh the question follow-up question block the knowledge based block and this new block what you need to do is you just select these blocks and you hit save to library and you can give a template a name for example demo and you can create it it will be saved in the library once you drag and drop demo you will see your three blocks that you have saved and that's the use of Library you can save these blocks or conversation flows and reuse them in other templates or in the same template for example let's see save in information block here what's happening is what is your name if they are using the conditional logic this is by default available in all of the voice flow templates any template or any assistant that you create you will see these so this is not something that I created or something new if what is your name if the answer is Elon Musk if the name is Elon Musk then the answer would be Twitter is best all other names hello name so you get the idea what is 2 + 2 and you can take it if they answered four right answer all other answers wrong that's a conditional logic you can apply that in here whether if they selected email take this flow if they selected for number take them to this flow based on conditions you can differentiate so there are lot of ways to use conditional logic in your chat Bots let me show you and how that works what is your name if I say Elon Musk taking PATH one Twitter is the best so you get the idea let me show you what a function is function is something they introduced voice flow introduced recently there is lot of info online if you search for it I won't be going into coding aspect of things because that's what it is let's say in in voice SL functions allow you to create reusable user defined steps that can perform task ranging from Simple Text manipulation to making complex API calls so there are a lot of functions that are provided by voice flow or the community for us to use I won't be going into the coding aspect of these functions but I will show you how to use a function template download it and use it in your chatbot if we go to Voice flow there in the resources there is Integrations and functions build reusable Integrations with voiceful function these are the built-in functions that boys flow offers Dynamic Carousel using zendesk help center analytics we will choose something simple for this example search and retrieve uh Jeff from JY you download the function as you can see the input variables are search term language API key and limit output would be a gif path says success and error path let me download the function I just downloaded the function what I would do now is go back to my voice flow chatbot and I will import a function go to content and in the functions I will say import and I will browse the file selected the function that I just downloaded let's go back to the designer in Dev select function once you select let me rename this block you can select the function here JY search as soon as I selected this there is a input variable mapping as you can see here what does this what variables does this need okay keyword to search for JFS and this is language twl code an API key they even gave us the URL on how to obtain the API key and the number of JFS to retrieve from JY okay for search term let me test this I will say welcome and language it's TW letter code and limit I will need one limit let me go and grab my API key from Jiffy I copied the API key let me try and run this once I execute this the path is Success so let let us see this in action okay I got a gif so this is not connected to any flow and it doesn't really add Val value to manually enter all these values and we should give user some kind of power over this right for example let's create a variable here let's call that a term as in search term we will add this as create a variable named term and to get term we need to had a text I said please enter a search term and once they inputed the search term we will capture that and we will save it as so we are what we capture will be the term so we say please enter a search term and let's say we say goodbye love you goodbye Jeff has generated so I won't be finishing this flow I mean the end user wouldn't be able to see this anyway I wanted to show you how to use functions in your chatbot there are some really great functions that you can add to your chatbot for example this is dynamic Carousel using knowledge based sources would be a great addition for someone like a Shopify store or any e-commerce store for that matter ability to generate images with the buttons and Carousel product recommendation chat bot would be great for this if you want me to make a dedicated video on Bo L functions comment down below so that's all for functions if you want to share this with a client for testing purposes or whatnot you can hit share button and you can change the branding as well if you want to add a password for the chatbot you can do so this is again for the sharing purposes not really the actual chatbot uh that has been deployed in the website that's different even if I you can start the conversation and look at again and testing you cannot see the cly being rendered but on the main site even if you refresh it you won't see the updated logo to update this you have to go to the settings and no no not settings Integrations and then in general good start a new chat schedule a call nice it's working I'm done anything anything else that should be it we have seen the Integrations we have seen the settings and we have seen the and this is analytics the number of interactions that chatbot had with the user any user again number of users that includes the website visitors as well the number of sessions and number of times each flow has been selected and the recognition rate the 65% of the messages that are being said can be matched to intent and 36% is not being recognized that's what it's saying and we already talked about transcripts and you know [Music] content and here we have the designer I will show you how to export this as a template I already showed you how to share this with your prospective clients share prototype you copy the link and they get the URL and they test it that's one way if you want to give away your templates this is how you do it export as assistant file Json and you export it I the file has been downloaded if you want to use my template in your voice flow you need to hit import. VF file here and select the file that you downloaded from the account I think I covered most of the basics we will now look at an advanced e-commerce tutorial where we integrate a table and zendesk for a table we will track the order and add order nodes for zendesk we will try to answer users question if we did not manage to find an answer we will let them submit a ticket we will see whole we will see see that video we will work on a template not really build it from scratch if you want to customize that template for your needs I strongly suggest you watch this video I go step by step explaining how to make this template your own replacing products from the existing ones to new ones using product recommendation all of that stuff you will learn a lot if you watch this video I will provide the link both in the card and in the description down below for this video to use this template I strongly suggest you watch this video followed by this video I have not covered the API Integrations of send desk and air table in that video for that reason a lot of people have asked me to create a followup video and a longer tutorial covering that aspect that is why I am including that part in this voice flow course so these two go hand in hand they are complimentary to each other make sure you watch that and I also discuss how to integrate this chatbot with Google Sheets as well so there's a bonus as well to get that template you need to it will already show up in your voice flow account it will say start with the template retail purchases webchat that is the one you need to use you just copy that template first I will go through the entire template and explain what's happening and what it does once I do that I will actually go into each of these components and finish zenes order information account information components in sequence so let's go to home and see the beginning of the flow we once we start chatbot will try and get account information if the account is found it will say welcome back by the first name how can I help you today and we can shop beauty products orders and purchases returns and exchanges customer service these are all the bu butons and if you hit something else it will ask you how can I help and it listens for our intent so if we select shop products what happens in shop products is they will ask you to select one of these buttons makeup skincare hair fragrance and each button is takes you to Carousel of different products that they have so so if you are a clothing store you have T-shirts jeans that's why I mentioned watch this video first because I will actually show you how to edit each of these Carousel and make it your own and that's for shop products if we go orders and purchases it will ask you to track the order if you can check order state you will give it your order number and based on the order number it will go and check your info against air table database and if it found the order info it will give you the order status whether it's in shipping or it's delivered or it is delayed whatever the case may be and if you want to cancel an order it's a different flow we won't be going into that if um it would be we will be adding a feature where you can add notes to your a table database whether that's cancellation request we will see all of that if you see here this is a component send zendesk ticket it is would you like to talk to an agent if they say yes they will be you'll be able to the user will will be able to submit a ticket to zendesk if you see this send in customer service as well there is ability to send a ticket to customer service once they are not able to find any solution for the question you would be able to send as sends ticket that's the use for the component you can create component once and reuse that component anywhere that you'd like in that chatbot so for that reason components are really useful we haven't had a chance to discuss components in in the basic tutorial but you know what they mean now if we test from here we won't be able to get accurate how should I put it since we have not connected our a table we won't be able to authenticate ourselves so let's start the flow from here and see high G zero okay let's say shop beauty products makeup vegan cural okay nice you see how it's the products are being displayed and once you hit add to cut it will be redirected to the page you want to learn more or get recommendation this this is really nice in the customer service one of the aspects that I really like is sentiment classification or sentiment analysis this is especially useful in niches like weight loss or Fitness because you are acknowledging you are a support bot for voice loss Beauty Store as spond news or problems helping them solve them based on user sentiment generate a statement that acknowledges how they're feeling and provide them with some comfort or encouragement this is huge it is it does make these chat Bots more humanlike how should I say it if they say I'm struggling to lose weight if an AI or a chat bought okay how much weight did you want to lose that's the kind of response people expect from a chat Bo if AI was able to match that match that sentiment and offer comfort and encouragement this is one of the features that I really like in voice flow the sentiment analysis what can I help you with today I'll look through documentation to answer your question before connecting to an agent I'm fed up with my when I said I'm fed up with my oily skin that's a typo I said oily skin but you get the idea I understand that you're feeling frustrated and I'm here to help you don't worry we'll work together to resolve your issue and ensure a smooth experience hang in there and we'll get you sorted out we'll get everything sorted out for you you see how it's matching the emotion and providing comfort and encouragement before it provides an answer the reason for unable to find relevant answer is something that I did you have to if you look at home first then will ask you to add these sample URLs to knowledge base I haven't done that you okay I was able to select all of these copy and paste them in the knowledge base data source URLs import so I went back to the designer and you need to train your assistant to get these answers if we go to customer service customer service intro ask us any question I'm fed up with my dry skin let's see what AI says now two things happened we used AI set AI set is for the sentiment analysis and the sentiment classific ification and it utilized a total of 65 AI response is token consumption 125 I'm sorry to hear that you're feeling frustrated again it came up with some comfort and encouragement and this is the AI response from knowledge base which is I'm sorry to hear that you're fed up with your dry skin here are some steps you can take to help alleviate dry skin these this is from our knowledge base mind you so whatever question they ask we will try to incorporate our products wherever it makes sense to do so that's what I did with my previous e-commerce clients we will provide them with info and we will also promote our products that is the set AI step we are classifying this is how you do an AI model and set AI step we saw response AI in the basic tutorial this is set AI based on users's last atance classify user sentiment for example mad frustrated confused curious scared this is based on the question when I say fed up they knew that I was frustrated so it classified and this is also uh response AI step instead of using knowledge base like in previous example we are using AI model you are a support bought for voice flose Beauty Store responding to new users problem and helping them solve them so this is where we ask them to provide comfort and encouragement this is based on the sentiment that has been classified in the previous step so this is the 25 tokens that it took and this step took 125 tokens and we answered the question using our knowledge base which is what we did in the previous example as well so that is the customer service side of things every answer AI doesn't have answer to every question right so we will have all of these tickets and all of the documentation that our client gives us that an e-commerce store gives us and we have all of that data and we try to answer users question using that but when we fail to do so when we when AI doesn't find an answer we give them a chance to submit a ticket this is the zenes ticket component here did this help uh solve your question if they say yes they will they AI will say great what else can I help with if they say no oh no I'm sorry to hear that and we will ask them to complete a ticket that we will let them submit and the send us that the customer service and we saw Shop product and orders and purchases Works in a similar way where we try to find the order using an order number and returns and exchanges is something to do with zendesk as well they have it looks like you want to learn learn about returning the order if they say yes would you like to talk to an agent we will show return policy again this is not linked to a table or any other database they are processing cancellations through zendesk also so I believe a better alternative would be add order noes or we can have a dedicated button saying cancel order if the user clicks cancel the order we will send a note to our a table database saying the user wants to cancel the order first I will show you zenes integration because that has showed up in three different parts in the chatbot alone first you go to zendesk and this is the dashboard that you would see whether you're doing this for your business or your client's business this is what you would see on the dashboard now we need to go to the admin Center manage in admin Center on the right you will see apps and Integrations in the apps and Integrations there is zenes skpi this is the first time that I'm doing this in the account so I I will agree to the terms get started okay go to settings and under the zenes kpi and enable token we haven't created tokens before so let's create one okay once you create your token you need to copy it because once you leave this page they won't show it to you again I am naming this as test just to make sure I will delete this after the tutorial I will save this I copied the API token right for token access if you read here it clearly shows for authentication for authoriz ation you need to have your email address SL token colon and the API token this is the whole we need all of this info and we need to go to basic authentication header generator I will provide this link in the description down below you need your email address SL toen call in the API key that you just copied and you do a base 64 encode and you copy the result that has been generated and now we head on over to our template here you need to change couple of things in this template for it to work first I pasted instead of API key if you copy and paste your API key straight forward it wouldn't work you have to follow what I just showed you and replace the API key field that we have on on the API block to the URL that we just copied and you can leave the body in the raw form as it is and you need to have your sub subdomain changed this is something we we find in our our subdomain is usually if you look at the URL you will see the subdomain here for me it's gray matter help. zendesk we I can just replace this subdomain in the URL field that we have on the chatbot and it it had to be post request now let me send a request the user question I'm saying it test two and the name mani kanisani and this is my other email that I have I think I had a wrong code before let me paste this again okay the status is 2011 and that is a success if I open my this is the earlier test that I did if I refresh my page I see a test two which is open ticket test two has been created and I will receive an a message from a message to my other email as well that a ticket has been generated under my name let's see that as well is a ticket was created on your behalf obviously it would be a bit longer than this if you follow the flow let me do that now we can now test at chatbot and one more correction that I did is here it was earlier it was capturing as user email I created a new variable saying email that is because I have also made a small correction to this template which is previously when I started working this with with this template it said capture user reply to um in the sorry the email block what it said was capture user reply and they're saving it to user email what I did was I am now capturing the entire user email it was user email earlier but I created a new variable that said email the reason for that if you look in the body of the API call it is mentioned as email I just wanted it be consistent for that reason I went ahead and changed it again this email this template will be provided in my school if you have any questions you can ask me there let me test this Clow now always remember to train your assistant I did if not you might run into some errors once I run test I added some random text M successfully API call successfully triggered thank you for submitting your ticket if I go to my Gmail this is uh previous test that I did they're showing up let me try and refresh and see if I can find the new one I think this is the one see welcome to AI agency incubator the goal of this schol is to help uh what we just entered and it's 0o minutes ago and if I look at the support ticket email that I received it says a it was created on my behalf and it's the same message that I um entered in the chat so that's how you integrate zenes using the API please make sure you go to mixed analytics and have this format for your API key for this to work and if you have any questions like I said you can find me in school so zenes ticket is done let's go to order information now it's time for air table integration so if we look at the flow of what's Happening we are collecting the order number we are doing an API call and based on that if we find the order number we will display the product name and its shipping status and we will then ask them whether they want to add a note to the order we will ask what the notice and we will update the database accordingly for this to work you need an a table account for this if you want to test this you need an a table account I already created an air table account for order tracking for this demo I created how should I put it the order number three dummy products I'm calling this database order tracking this sheet we have products we have the customer we have the status we have the name of the customer and there is order comment for two of these there is already for two of these there are there are already comments here we will now comment on this one so let's head on over to voice flow and see what information is needed to f finish this we need an air table api. a table it is doing a get request and it we need the API key first things first let me get API key this is the dashboard that you would see if you go to developer Hub the first thing you would see is personal app access token API key is deprecated as of February 1st 2024 you won't be able to to create any just create a personal access token I'm calling this VF demo for Scopes I would add all of the available Scopes so we can read write I don't think Advanced is needed for Access I am letting it access the order tracking let's create the token now again they will only show this token once so make sure you copy it before closing or hitting done now that we have our API key I will just paste it here and how to get this if you go to your a table list records how to go to list records okay let's see click on help documentation if you go to list records here this is the URL that we need you copy the URL and you paste it in here again this is a get request and for the authorization we have our Bearer space your secret access token these are the records that we have if you see the order number is 1 2 3 product is beauty kit customer is and the name is we have the status as well these are the records if you want a dedicated tutorial on how to import these from your Shopify store comment down below I'll make a video for that as well so let's go back and if you look at the parameters here we have order number let me change this a little bit I'll capture the entire user and save it to order num I'll create a new variable for this don't num in here I will change this to the one that I just created order num okay product name shipping status and we also have a name field remember if you look here we also have a name so we need a records do fields dot name as well in here so I'm adding that let's capture more fields that is and let's capture and make a new variable called name oh name already exists then let's use name let's use name okay what I would like to say here is hi name so if we manage to find the order number we will greet the customer we say high name your product name is shipping status okay and let's see if this works we will now send a request for 1 2 3 order number generate 200 now we have 1 two 3 beauty kit money shipped awesome let me try and run the flow first to your order number what other order numbers do we have 456 let's try 456 now 456 successfully triggered hi money your sunscreen is in transit now it's time to update notes the field that you see here Order comment we can for 456 it says address change 789 SS test I will now try to add a comment for 1 2 3 and let's see how that goes first we need our order table URL which is found in the less records that we were looking at earlier update records update or upset records May table sample orders okay this is the URL that we need go so make sure it's a patch request as well you can see that here also for updating the records now what about the field that we are updating we are updating the field order comment so just a little bit we are changing the comment to order comment because that's what we are capturing that's what it's mentioned here as well so to keep it consistent I am changing that and the API key is the one that we have used earlier we can still use the same API key here as well okay let's test the flow from the beginning and see if it worked order number 1 2 3 successfully triggered good beauty kit is Shi do you want to know yes I said I want to cancel the order Okay match match command jum jumping to no okay what happened was you I want to cancel the order it is triggering an intent uh unfortunately let's go to our order information again and let's in the order comment we need to change the intent scoping for listen only here let's do this 1 2 3 yes said cancel my order API call successfully triggered grade your H comment has been added if you look at the order tracking it says cancel my order the comment has been successfully added and that's how you integrate air table using the API block we have now finished sendes integration and order tracking and adding the notes aspect of air table integration I already showed you how to integrate air table if you look at this component get account information this is also using a get request on an air table I already showed you how to use how to go through list records for a get request and the authorization and the parameters the capture response right so you to make this work you can either use existing table that we have and we need to filter by formula instead of order number we can filter it by the name field and verify that way but this is doing something different you need to if you want to use these parameters you have to create your own table in a table your own database in a table and then follow this process think of it as your cour workor now that you learned how to integrate a table try to do this yourself you can let me know in school I will make this part of the video available in my school you can watch it if you are not able to do it yourself so let us test this I already showed you how to publish this chatbot and run it or if you want to share it to someone you can do so as well uh I won't be changing The Branding once it's published instead of testing here I will share prototype copy link open in a new tab and have a conversation here start conversation welcome to boys flow Beauty we are absolutely thrilled to have you how can we help you today let's say shop beauty products skin care nice they are displaying Carousel you want to learn more or get more recommendations yes looks like you're looking for a recommendation I said makeup for dry skin let's see what AI recommends nice it gave me three product descriptions what we can do is you can use a function that is listed on voice flows webs site and with using a function like display Dynamic carousels from the knowledge base try to display a product and an a buy button using that function that that is a good challenge to try if not you can comment down below and I will make this video on school as well in addition to the account information component when I say no oh oh no I'm sorry to hear that you can submit it to our submit let's submit a ticket so there is a condition that the ticket length should be over 80 characters to accept this if I say test it wouldn't go through it will ask me that your request needs to be at least 80 characters so I need to come up with some text thank you for submitting your ticket please note our team receives I Val we'll get back to you as soon as you can if I refresh this I have six so far number seven this is what I just received uh I welcome to incubator and mani Kanani the uh and the email that I just entered I will also receive an email of the same support ticket let's see the conversation has ended we can restart the conversation and check the order tracking as well orders and purchases check order status 4 56 hi money your onscreen is in transit do you want to add a note say yes great your comment has been added this is something in the flow for that reason it's showing up I would actually go in to that flow and delete it let me do that right now so when we check the order status while we are displaying that it is we tested the order information flow earlier that is working fine it is displaying the order status and after the note once the flow is finished it is automatically going to this message that says it looks like your order has been delivered and it's um showing an image that um this is an image that they added by default so we don't need that now that we are displaying the order status in here let me go to a table and see if the comment has been updated cancel my order okay the 4561 um for money we we added the comment change address so B fine change address order number 456 great so that is the template that we have so far again try to complete delete this component by yourself and if you have any questions you can ask me in school I don't have a Shopify store but I want to show you how you would deploy this on a Shopify store of your own Shopify store or your clients and to show you how to integrate this published bot onto a Shopify store we have Daniel from voice flow I'm going to hit publish and once this is done uploading it's going to tell me to embed a snippet on my website so let's go ahead and do this and you can see that I can customize my chat bot down here uh with the logo and different colors what I really want is this body tag that we're going to go ahead and add to Shopify so in Shopify we're going to go to edit code and we're going to go to our theme. liquid file this is going to let you uh add the chatot to any page of your website we're going to go right down to the body right before the body tag paste in the script and hit save and that's it so now when I go to preview store um you're going to see that it pops up here on the bottom right and I can go ahead and interact with it so I can say something like hi let's start the conversation and now I'm going to ask you something like what is your return policy and what's really cool about Voice Low is that every time a user has a conversation with your assistant it's actually saving a transcript and so if I go back to my voice L project here and I go to to transcripts I can see here that this is a conversation I just had where I said what's your return policy hi and I can go ahead and hit Market reviewed sa for later and maybe even tag a teammate to come and check this out yes it's that simple there are other ways where you can integrate this bot on other websites it's almost the same if you want to learn more about that comment down below even this bot is really great as you can see and that concludes our second tutorial now it's time for the final bonus tutorial that I mentioned AI conier for hotel remember how I said I will share some softwares that will level up your agency well this is one of the SAS that I really like and use initially they started out for free but now they implemented something called load tokens recently where you can this is the number of times your AI agent is loaded and had conversations with I mean it's not really counting the number of messages but each time it is the assistant is loaded and had an interaction not just number of messages mind you so an entire chat session if he doesn't if the user doesn't refresh the page and has the conversation one time with the chatboard that is only one load you get the idea right so if you want to load more tokens you can get 15,000 load tokens for 20 USD so that's a a really good deal voice flow is an amazing tool but let's learn what else voice glow can provide to level up that experience first off what I really liked about voice CL is that embed feature you can select various themes there is a lot of customization to edit the CSS file if you know coding and there is a file upload feature imagine you are working with a plumbing business or a property management business that has to deal with a lot of photos lot of repairs that would come up being able to receive images in the within the chatbot allowing users to upload Imes is a great thing to have an i frame we talked about the calendly embed it's easy it's just copy and paste a link and it's done that's the same with a YouTube video or a VI Vimeo player as well and you can embed a whole Google form and you can prompt user to select multiple options at a time they can click that that's huge too selecting multiple options and autoc carousel renders carousels programmatically through a Json array this is something I haven't tried before but I would love to if you want me to do a dedicated video on softwares on top of voice flow or just voice glow let me know in the comments down below I will show couple of features here that I really like you need to download their voice glow template once you finish downloading head on over to voice flow and start the import I opened the template this is what you would see everything is in the library what you could do now is there is dynamic buttons Dynamic Carousel file upload cre browser data iframe multi select let me first have um I frame what I would do is copy this iframe embedding select trackpad while we are here copy the whole thing and this is one of the chat Bots that I'm giving away it's a real estate chatbot that this is one of the demo chat Bots that we made for a real estate company for demo purposes so this is where we can add a video for example in the action body if you see there is a YouTube video embed if I go on YouTube and see copy this and paste it wait is there an embed option okay if there is an embed option it's easier command C let's paste the URL okay when the hit when they hit virtual tour it they [Music] will let me train the assistant once they head virtual tour they need to see this video so what you need to do in order for this to work is you need to go to budget first and you need to create a budget on voice flow and you need need this voice flow dialogue API and it's different for each chatbot so if you go to okay you need to go to Integrations and API Keys copy API key and then and then voice glow you paste the dialogue API hit enter save let me first publish this I'm not we have published the bot and we have the dialogue API here which voice CL assistant okay I'm Rosa from New Empire you see how it CH it looks completely different here you can go ahead and edit the title Rosa your first let's okay and what I really love about voice glow is their ability to change themes you can go purple San not just that if you want you can go to dark mode as well it looks really cool if you hit virtual tour previously it ended if you try and test this on voice flow it wouldn't display but if you do this on if you do this on voice Clow uh it it renders perfectly and for those who want to do a calendly embed you can do so here as well you don't have to follow what I taught you in the first tutorial all you need to do is this is the embed website embed in the action body instead of google.com you will just copy it and paste let me show you real quick uh let me show two more we can have this website embed we can request handoff which is we can ask the users can actually request for a human agent that is really cool and it is possible to edit all of those on voice flow itself but they do require additional work SAS like these makes things so much easier for voice Clow example if we hit schedule of viewing and the path name I will just add an action go to block home question questions follow for the followup question and in the action body all you need to do do is add a website add your cly link copy that link just paste it here and you are done you should see that in action and I hit schedule of viewing okay let me publish that there once I publish the chat bot on voice flow I will now hit schedule of viewing and it opened my cly there is a popup of cly perfect go to main menu let's see what else did we add no team members are available after I'm out past okay yeah this is I won't be showing that here but you get the idea you have a lot of options that you can use with voice CL if you want to play around with template feel free to do so it has different flows the contact as current projects team resources schedule of viewing and I have a question this is a really good uh um real estate template that you can use and I strongly recommend that you check out these guys you can also customize all of these buttons there is ability to add Dynamic carouses again if you want a dedicated video mention that as well widgets it's really cool but what you need to do is if you do decide on the theme the images all of that stuff what you need to do next is there are unsaved sanges you need to save it once you save it you need to deploy this widget from Bo CL itself you need to you need to forget what I taught you in tutorial one if you deploy that code only voice flow stuff will show up and the the theme or the video embeds the file uploads they even though you copied and pasted that all of that in your template or in your project it wouldn't work you have to copy this code this is a popup this is a i frame this is a full HTML wherever you want if you want it this in a dedicated chat box there is a lot of customization that can be done if if I start showing everything it would be too long like you've seen in this example there are a lot of options lot of features that voice glow offers Dynamic buttons Dynamic carols file uploads get browser Google Form video multi select request handoff set run time voice note and website we have seen few of these and they are always updating their template when when they started out they only had two to three of these features in past four months or five months they have change this product close to six seven times now they constantly updating new features and I do recommend you check them out if you want this template again will be posted in my school so far we learned about building a customer service chatbot with calendly integration and we've deployed that customer service chatbot on a webflow website and second we looked at a SAS that can level up your agency and we did that with an real estate template where you can change the colors integrate your calendly embed videos U you can even let them upload files all that good stuff and then we went into e-commerce temp template we explained step by step what it does we integrated that e-commerce template with zenes and a table with zendesk we try to answer the question with sentiment analysis we recommend products we try to answer the question with our extensive knowledge base but if we fail to provide an answer we will let them submit a ticket and we also did order tracking using air table with the order number and we also added the ability to post order comments to our a table database and we haven't really went through the account confirmation aspect of things but you can do so using the get method we discussed how to achieve that functionality if you did not manage to complete that step let me know and I will do a school training now we are on to this hotel coner assistant this is something really great I have been putting this aside for a while now but I really want to start reaching out to hotels with this template and I just want to show you the range of topics this chatbot has if you look at the topics here Hotel facilities recommendations room change make a reservation modify nights work parking gym meals menu VIP offering and the components wow B boy check-in checkout facilities Hotel goodbye housekeeping meals time room number set booking if I go through each of these flows one day wouldn't be enough and one course is not enough let me quickly train the assistant and see see how it performs in a test then that will give you a demo as to what kind of functionality this chatbot has and we will deploy this on WhatsApp imagine H your guest doesn't have to go in and really talk to chatbot that is hosted on website that's not a great experience imagine everything can be done on WhatsApp when the guest checks in about to check out when using the hotel I think that would uh that's the next best thing to using an app a dedicated app who am I speaking to I'll say money so let us first they are capturing the username I want to bypass that nice to meet you do you have a reservation I would say yes for booking number I will say 1 2 3 4 5 nice okay perfect I've located your booking depending on what you're looking for I can likely point you in the right direction please select one of the options below I will say hotel I'm here to assist you with everything Hotel related such as changing your accommodation or modifying nights book let's say room change and see now see how it's saying could not handle step redirecting to Next Step this is where you can add custom actions to actually go in to the client's website Hotel website and check to see if they have an availability that way this is a generic message that they added you have a room on fifth floor available but it's not really do that in real time we we hope you enjoy this new room let me know if you'd like to keep searching using hotel caner hotel coner assistant if you wish you can select any of the available options let's say facilities again could not handle step just think about the custom actions you could add parking everywhere it's custom actions you have there are currently four parking spaces available yes once they say yes imagine being redirected to uh parking spot page where you can pay and a way to verify that stripe transaction and parking space being booked imagine how valuable that would be for a business and recommendations I can provide you with some what can I search for you this is where I wanted to add a Google Maps API so I can search anything that I want for example restaurant so there is a flow that uh has been preconfigured near Bo slow Hotel there are variety of local culinary options since a hotel is a fixed entity you can definitely program something but if you want to search for events if you want to search for tourist attractions we need to keep the options open not just a restaurant but anything that they want to search if we go to hotel nights booked modification modification of Hotel modification of hotel reservation on do you want to add a reduce number of reduce it is possible to reduce three nights from your reservation do you want to shorten your state voice L Hotel let's say yes wow if you are watching what's happening on screen there is this is just so complex there is a lot of customization that needs to be done a lot of functionality to be added but this is a great demo that you could show to your P prospective clients I'm not sure why Voice Low removed this template from their offering every step of the way they have prompts they have notes written all over the template if you go back I have only showed you the main things we haven't seen meal meals menu we haven't seen uh the VIP offering which is everything is a big flow in and of itself the checkin checkout aspects and I have praised this template enough what I've been trying to say is if we manage to figure out this functionality all the custom actions this chatbot would be a great value for both the hotels and their clients as well if you look at any of these topics or component components every component will have a custom action linked to it and don't be intimidated by these custom actions we haven't really talked about custom actions but we have been using custom actions for a while now if we look at our previous assistants even in the first assistant that calendly embed that we did even in the second example where we used voice Clow to display iframe the video and embeding calendly embeding whole websites onto the chatbot we are using custom actions it's as simple as that few lines of code but it would be different for every business that you work with every hotel that you work with depending on the text tag the database and so it varies Case by case for that reason I won't be editing this template to much just one aspect that I really wanted to improve is the recommendation side of things if you look at what's happening here when we start the flow the chat bot will wait for your input whether it's Resturant event which is uh the most probable answers for no match it will actually reprompt you what can we recommend you uh restaurant and events if if you pick both of these it will show you what's around the hotel but what I want to do is maybe add a button saying find a place you can search for pharmacies or places of attraction in and around Hotel not just restaurants and events there is a lot we can do with a feature like that the problem that I see right now is Google Maps embed is being rendered on a iframe so it won't be able to display that in WhatsApp we can show that on the friend end on the web chat it is possible but on WhatsApp however you will get a link and the description of the place that is still valuable I want to definitely try that and make this learning experience on how to embed Google Maps into your chatbots and how to deploy a chatbot on WhatsApp and if you recall when we try and test this chatbot earlier it did not recognize my username I wondered there is no authentication mechanism here it's not really checking against an air table of any sort but for some reason it says I didn't get your name what the issue that's causing is we are trying capturing the username what I found to work best is capture entire user reply and save it into the variable that is username we just need to use this and if we run the test nice to meet you money uh it goes forward so that's a fix uh you can keep in mind when capturing responses and setting the variables now on to the recommendations let's modify this flow a little bit and we can go from there first when the flow starts it says what can we recommend you today instead of could not handle step redirecting I I think it's better if we just delete this block and let's do this instead of no match I want to add another Button as well find a place we will add a text block saying I said great what would you like to find uh as in which place again you can come up with better Alternatives and we capture that we will save that we get to that uh now the part where we integrate Google Maps API we need I will provide all of these links in the description down below we need Maps embed API and if you go to apis and sort them by Maps you will see a Maps embed API and places API new you'll need a Google Cloud uh this developer account it's free to sign up for we need both of those I opened those two here and we can this is the places API and uh this is embed the map first what we need is this iframe this is what helps render Google Maps on our Chann adbot it's the same kind of I frame that we used in our first tutorial customer service chatbot what we did differently is we just used width 300 and height 300 I want to use that so let's use a test blog just as we did for the customer service chatbot and we will just baste this instead of this whole URL what I would like to do is add a URL we haven't added URL as a variable just yet I will do that now once we do that you can see it is a variable and I want to change the height and width to 300 as well because I believe it's a really good size now we have seen how to embed a map on our chatbot we did that using the iframe map Ed API now it's time to get places and what we need here is the places API what it does is whatever you search for it will either give you a list if we go through the various types that they offer you can see there is nearby place details Place photo nearby search text sech autoc complete there are definitely a lot of options that you can go through but for our example we are using text search new and for context I have been following voice flows tutorial on how to embed Google map in your website AI assistant I have seen comments that it's not working for some reason I really wanted to try it out in this tutorial so that would be a value ad if you have any questions you can feel free to hop on to that video watch it join their Discord ask any questions that they have or join my school to know more and I will also link some of these videos to in the description down below where I find them really valuable for example how to get better responses and other videos include uh building a function from scratch Vector databases and I also wanted to link one more memory to knowledge base in voice flow and new and improved knowledge base step this is really good to have I didn't want to reproduce everything the only reason that I've been doing this is there has been errors in the tutorial and I wanted to fix those now without further Ado let's go to okay what text search is doing is you can either search a place or since it's a text based search you can basically ask anything that you want this is the example that they gave Pizza in New York or shoe stores near Ottawa pharmacy near Vancouver whatever you want you can do it based on text so for that reason we are using this and they also gave us how to do this API I calls as well if you see here it's a post request we have seen a get requests in a table uh first part and that's using the order number and tracking the order and to add order comments we used patch request now we are looking at post requests they also mentioned how a text query should look like on the headers the content type and uh Google API key and one more header which is field mask and then the URL itself for the Post request so what I would like to do now is copy all of these and go back to voice flow and paste each of these in the respective Fields I will bring out an API step maybe it's better instead of last atance I will save this to new variable saying find place and we go to the API step and we want post request paste the URL and we have headers which is uh content type I believe let's go content type so for API Keys you need to use API keys and you need to go to the credentials page this is the credential page so I will quickly create a new project called voice flow so you need to if you're doing this uh first time in your account you have to uh fill out the payment information as well so once I set up my billing I have my API key you can save it to a variable saying API key it's better if you save it to a variable saying API key and enter give it a default value and create a variable so that way you don't have to keep it exposed if you look at the headers we need Google field Max and the body in the Raw format let's go to documentation and the text search you can see to retrieve all fields we need to use star this is the text query that we need to use in the body text query and our variable I will use star here for now and then if you go to body I will be using text query with find place which is our variable here we are capturing that okay I have my API key here and find place is Indian restaurant in Vancouver generate success awesome this is definitely a long list of results I want to add a quick note here if you go to the project that we created earlier for me it's voice flow make sure you have places API enabled because it gave me a 403 error earlier that I haven't enabled places API so that's one thing that might cause errors which is not covered in the original tutorial so keep that in mind now if you go to text search documentation if we scroll down there is Max result count where do I find it okay Max result count it should be between 1 and 20 for testing purposes I will say Max count three in the beginning and see how many results I would get but in the end we only need one because that's easier for chatbot if you want to do search instead you can have multiple results but since we are doing one place I initially test out with three but I will change it to one wow even for three results do you see how many how much data we have gathered we can render any of that in the front end if you want to now I just added quotes to Max result count now let's go on to URL remember we added iframe earlier and we have this Source equal to URL let me set the URL here I'm naming it set URL apply to the URL the variable that we have created earlier let's use that we need to go to um Maps embed API and we need this URL the one with the map mode API key and parameters we need to copy that paste the URL here right now in the variables we have map mode our API key and parameters we already have our API key we will just replace that now and for parameters we need to go back to the documentation uh okay map mode first there is place there is view Direction street view and search place is the one that we are going to use so we need to replace map mode with uh p and Q is required Q okay we need to use place and Q and what about the parameters if we okay these are the parameters Q Center let's replace parameters with Place ID So based on the documentation this is how we need to set this parameter Q is equal to place ID and place ID in Braes which is our the actual parameter you need to append these if we try to render with this URL it wouldn't work we need to append the API key and the place ID let me add each one of those so you can see okay this is the final URL after I added all the plus signs append but please make make sure you change the map mode that I wrote here you need to write place instead of map mode only then it would work I have updated that in my school and the final template so if you try to use map mode it would not work so next step is to capture response to do that we need to First send a request you see how in the places there is ID and this is where we get our place ID to render it on the map so in the capture response I will say response. places 0. ID and we need to save it as I think we already have a place ID yeah we do okay Place ID send request generate yeah places and the zeroth place ID the whole thing is called a response so we are taking places then ID from the response okay I think we can go ahead and test it from here oh we haven't trained okay let me train the assistant first okay it's done let me test it I said barbecue restaurant in Vancouver okay API call successfully triggered I see a gray okay okay it won't be rendered in the test of voice flow if we can we can go to Voice glow and test it over there or you can directly deploy this on your front end and see if it works so the test didn't went well so I thought okay we already know that iframe wouldn't be displayed on The Voice flow test box right we need to test that on a website either it's web chat or we have a SAS called voice Globe we can that's what I thought to use it on voice glow I need to first publish it now I know why voice glow has taken down this if you looked at other assistants so far usually publish button would be here and a run button would be over this side I haven't even realized when I tried to publish it even the export for production popup that I've been receiving is different publish this version to production and use it with our dialogue manager API okay when I hit publish this is what I see error updating version so basically this Advanced chatbot that I've been raving about is a legacy version apparently I believe that is the reason why they have taken it out for example you don't see this in in the other resistance if we go back and see the publish button is here and the Run button is here and when you hit publish it say publish this version to production and use it with our with your web chat so that what it usually says so uh it was weird from the beginning but even if you look at the assistant settings it clearly shows the environments that it it has been in production and now it's in development I mean the changes have not been deployed into the production yet so that's how it works with the regular resistance I didn't want to give up on this great template so what I did was I created a new AI coner for hotel copy and paste everything to the new assistant and actually link all the intents build all the intents so see for example you have to select an intent here so there is no match we have to select no here and for the component this one so we need to select anything else I had to go through each of these step by step and make all of those changes and I had to redo all the recommendations one for for example instead of saving the maps API key I am now setting apply to map API key and I have my key here and I am passing that to set URL this is as it is what we have seen earlier in that Legacy chat bot once the call is successful and the place is successfully rendered we will say done would you like to find a different place and we Loop it back back to sure what would what would you like to find and if they fail we s we say something went wrong please try again and maybe Loop it back to the same what would you like to find let me run this I said Indian restaurant in Vancouver API call successfully triggered but I have been showing this so let's head on over to voice glow and we need to grab our API key here copy API key and make sure you publish the latest version so I'm creating a new assistant voice flow and let's say hotel cons here let's say your personal AI assistant and for the dialogue key I'm copying it on say let's save it we can change the theme if we'd like so once you do that you can create you can actually go to prototype and chat with that in a different window nice a barbecue restaurant have been rendered on a map sure what okay see how was done what would you like to uh would you like to find a different place we need to give them a yes or no choice so this is good let me go back and fix it right now in the recommendations we need to add a capture card to this sorry buttons component there is a goodbye component we'll let them say goodbye and if they say yes however we will take them to what would you like to find this should work let me publish so it's successfully published so once the map is rendered if we look if you play from here we'll usually um see done would you like to find a different place if you hit yes we'll be taken to sure what would you like to find phy in Vancouver API call successfully triggered so you will see a map here so there you have it now we have already published the latest version of this AI cons here for hotel deploy that on WhatsApp is let's go to if you go to channels here you see a WhatsApp button you can integrate you can deploy your chatbot to Whatsapp or Discord for now through voice glob Instagram telegram Voice is coming soon to do that these are the steps that they list you need to go to meta business Suite I will provide all the links in the description below you need a business page first this is my business page account and after that once you have a business page you need to go to a URL which is developers. facebook.com/ apps all the URLs will be link available down below we will now create an app then you select other other business next and the app name I'm calling it Hotel you can leave the email as say if you have a business page that is already linked or whatnot to a WhatsApp account you can definitely try and do that since business portfolio is optional at this point I won't bother linking it now I can do it later click on WhatsApp set up and portfolio it had selected something by default I will leave that as is I will hit continue it's just selecting a business portfolio Okay uh let's head to our voice CL and see what the steps are we already created an app and step two would be to Whatsapp configuration web hook section paste the following okay we have the web hook URL and go to Whatsapp configuration okay call back URL let me edit all of these call back URL and verify token if I and save perfect in order to finish this setup you need to subscribe to messages make sure you do that in the web hook field let's go back to voice CL okay step pass successfully that's good and step three would be WhatsApp access token so this is the information that we need from WhatsApp now in order to get this WhatsApp access token we need to go to.com and settings system users now I don't have any system users yet if you do you need to uh use that I am creating one right now now I accept I will now generate a new token for app Hotel token expiry will select never you need to select WhatsApp business management and WhatsApp business messenging and generate token so this is the access token copy and save this token as it won't be stored in Facebook voice clope access token okay so make sure you're in API setup now you need to copy your phone number ID phone number ID what's a business ID what's this business account ID let me add my own number here okay I received a hello world let me Bo Club said test and save so for some reason I had some errors I did not everything should have worked perfectly but uh it for some reason it didn't go through I was researching online I was watching watching videos provided by voice flow going through all the steps One Step that I see is assign people I am for just to be sure I am assigning all of these uh full control to people under the app I found out what's causing the issue when I was trying to deploy this chatbot on WhatsApp using another SAS called flowbridge AI there are some Wonder ful tutorials on YouTube that you could follow when I was doing this flowbridge tutorial I was prompted to connect my own WhatsApp number instead of using the test number for some reason it is not allowing me to use the test number for this process for that reason I was not able to move forward but the steps that I showed you in video works well and if the business page that you have has already if it already has a WhatsApp number which most businesses do then it will work fine the only reason that it haven't worked for this account is I didn't want to delete the old account and create a new one from scratch and if you go online you can find number of tutorials this tutorial is using Min chat and this tutorial is using flowbridge and flowbridge themselves have made a video and this is using the actual native voice flow to Whatsapp integration even though it it's a bit complex and voice glow has a tutorial and there is a flowbridge tutorial as well so there are a lot of resources I didn't want to make this a longer tutorial than it needs to be and I also wanted to provide a bit of clarification on the AI conier chatbot that we talked about the place to publish this is you don't have to deploy this from voice glow for it to be able to work on recommendations the maps will be rendered if you just deploy this on a website in the same way in the first tutorial if you saw that I was using uh calendly embed on my website and it worked fine you you just have to deploy it on on the website the web chat then it would work if you want to deploy this on a WhatsApp as of now they are not really displaying these results displaying these if frames and EMB bits but you they might in future now you will get a link you get to click it and it's still a great functionality to have for the next steps I strongly recommend you you check out the voice flow YouTube channel and join their Discord for any kind of help that you want and join my school AI agency incubator for all the templates and all the resources and if you have any questions regarding this tutorial this course feel free to drop in ask any question that you have they will you will find these resources once you are in uh it would be one of the top posts here if you don't see it just click on YouTube resources and will likely be the first one that you see and depending on when you join and that concludes our course today and I'll see you in the next one

Channel: Mani Kanasani

Views: 19,217

Keywords: voiceflow chatbot, ai automation agency, chatbot, chatbot whatsapp, chatbot tutorial, how to build chatbots, ai chatbot tutorial, how to make a chatbot, chatbot tutorial for beginners, how to build a whatsapp chatbot, no code chatbot, chatbot course, what is chatbot, voiceflow tutorial, chatbot ai tutorial, ai automation course, chatbots, make tutorial, zendesk tutorial, airtable integrations, google maps api, calendly tutorial, voiceflow, custom knowledge chatbot langchain

Id: HKn3IgmhZ_k

Length: 171min 35sec (10295 seconds)

Published: Wed Mar 27 2024