Build Simple No-Code Chatbots For Beginners

welcome to today's video where I'll be showing you how to build AI powered chatbots with no prior experience required you absolutely won't need to know how to code for this you don't need any prior chatbot building experience and you don't even need to know how to prompt AI That's how simple this is going to be and the result we'll be going for here is a chatbot that you can place on your very own website or share with somebody via link and that chat bot will take them through a little journey but hold up a second while editing this video I realized that I need to address a obvious question here eigor how does this chat but that we're about to build differ from the gpts released by open aai both of them are chatbots right well as of today gpts are not embeddable into a website plus there is no predefined Journey that you can send the user on so if you want to build website chatbots this is the way now let's have a look at the end result and this right here is what we'll be building so as you can see there's a little chat widget on our website and it opens up the chatbot that I'll show you how to use so let's just start the conversation with Hi and then it greets us and then we get these fre options let's say I want to explore the AI tutorial videos there we go it links to the YouTube channel and now I can either learn more like so or I can exit the bot so trust me if I tell you this is so easy to build and integrate into your website and because it's so easy we'll even go a step further I'll show you how to include custom knowledge bases so if you have PDFs external websites you can include this in your Bot so your users will be able to talk to it freely heck I'll even show you how to make the bot search the internet by himself so you can get upto-date results every single time and all of that will cover in this relatively short video and I'll just point this out again with no prior experience required so with that being said let's not waste any time and get right into building this so the website we'll be using for today's tutorial is called bot press and there's two reasons I picked bot press here first of all because over the past few months me and the team have been busy building with various platforms we explored various no code platforms and also created custom bots and one thing became clear if a beginner wants to start building Bots there's no better service than botpress and I say this generally we legit tried them all and this one is the most beginner friendly want so that's one reason we're using it and the second one is because bot press reached out and wanted to sponsor a video so based on our bot building experience and various requests on the YouTube and because I was already confident that this is the simplest platform to start with it's just a perfect match I wanted to create this video anyway to show you how easy this can be and they're sponsoring a tool but I can guarantee you that this video would have existed if they would have sponsored us or not and now let's get into it cuz this couldn't be any simpler so for the first step just go to the first link in the description and then you need to create an account so what I did is I just continued with Google cuz it's so simple and once you're in you'll see this super simple interface we don't need any beginner demos here because you have this video right and I'll just lead you through it step by step and although we'll be creating a brand new chatbot from scratch here in a second I want to show you the end point so we get to talk about some of the basics in action here so for that I'll just open up my bot like so and now we enter bot press studio and if I zoom out like so you'll see the entire architecture of our bot in one view so I made this little Bots for you to understand some of the base Concepts here and the Very first one is that there's always a starting point and an end point so right here on the left you can see start that's where everything begins and then here over on the end it says and at this point I would like to introduce a comparison because building a chatbot is really like taking the user of the chatbot on a little journey they're going on a little trip a little adventure and on this journey they can have various stops where they explore something that is new to them so as mentioned the Journey Begins here at the start and it ends here at the end now you could also think about this that on this journey you're taking a train and the train has various stops and what you see here is a total of four stops and what these stops are called inside of this Builder is nodes so this right here is one node this is a second one a third one and a fourth one so as mentioned this is a website bot and what I want this bot to do is very simple I just wanted to send people to the various destinations depending on the preference so first of all it says welcome to the AI Advantage website and then it gives the user free choices you can check out the AI tutorial videos you can join the Weekly Newsletter or you can check out the products in the shop and if you follow this line you're going to find that the AI tutorials video continues to this stop or also called node that basically tells them check out the AI Advantage YouTube channel and then includes a link now the same thing goes for the newsletter and product with just a different message and a different link and then they get another choice if they say learn more it's going to go back to the first choice and if they say exit at this point guess what it just goes towards the end and that's basically everything that is done here so again the bot is supposed to take a user on a journey and along the way you have different stops and you can decide what happens in those stops what gets Comm communicated and that's exactly what we'll be building step by step now so what I'll go back to the homepage and I'll just say create chatbot right here okay congratulations you just created a new chatbot hop into our new studio to start editing perfect let's just say edit and now it's going to ask me start from a template so we're just going to take the start from scratch because we just want an empty template right here there you go use template and if I just right click this little note and delete it right away you'll see the only thing we have in here is the starting point one node in the middle that says add stuff here and then the ending doesn't get any simp than this okay so how do we add things well luckily it's quite simple if you move your mouse to the left here it will open up a side menu see that now this opens and closes cuz it could be in the way but what I like to do when building just click this little pin and then it will keep it open no matter what you do so now we're ready to build things and look I really want to simplify this for you so what we can do is we can close this execute tab we also don't really need AI right now cuz it's going to be built in anyway and then everything down here we can close too and what we'll be left with is the categories send messages that's when the bot sends a certain message which can include either text an image video or others we're going to have this flow logic category so this one is all about what is happening next so if the user has a certain intention you can redirect him but more than that soon so for example you can see one of these flow Logics in action right here where it doesn't even take a condition just every time it continues to the next spot and you really need these cuz this is how you connect the different stops on your journey and lastly you have these capture information fields and all we're going to be using here is the choices in the first row so you can have a single choice or multiple choice basically guiding the user on his journey telling him where he could go next so it becomes easier for him to get exactly what he's looking for okay so let's build this website bot with just the text message and the multiple choice cards here so first let's start editing what we already have so as you can see here we have a send message text you can identify that by the icon here you see that's identical as the send message text up here but also you can see it in the top right where it says send message to chatbot user so we'll just say something simple here like welcome to the AI Advantage website okay and now let's add our first choice so what we can do here is just drag and drop this multiple choice below our text message and then already on the right you can see we're typing inside of this field called question to ask the user so what's the question we want to ask let's say what would you like to explore today perfect and then down here just by clicking this little plus icon we can add several choices so right here we have free so one would be AI educational videos newsletter and products and what I personally like to do here but this is up to you I always like to add emojis it just makes it a little easier to navigate for the users in my opinion and actually I'll just remove the word AI cuz in the context of this bot on the AI Advantage website people will know what kind of educational videos these are and already we have our welcome message and free choices so I think it's about time to give this a test run and the way you do this you just go to the bottom right and now you can say something like hi and the great thing here is because we're testing you see all these little comments so these won't be present in the final version but right here we see the conversation started and yep here's the messages welcome to the AI advantage website what would you like to explore today perfect let's say we want to explore educational videos and there you go the conversation ended which makes sense because down here it says always no matter what happens go to the end of the conversation so naturally we have to add some things here so let's do that and what I'll do here is I'll just drag out another text card and then I'll drag this end out to the right so what is this about what message do we want to send we'll say check out the AI Advantage YouTube channel to learn about generative Ai and then over here I'll just include the channel link like so and then once the user received that message what we want to do is move on and give him multiple choices so let's say one would be learn more and we'll just say exit what you can do here at the top is just name this note I'll just say videos and we're actually very far along here because look all you need to do is the following you need to link this up to each other to define the route on your journey right so if you zoom in you can see these little dots here and you can click these which creates the paths just like the path right now where we see it always goes towards the end we could just hover over it and delete that so now there's no path now this butt wouldn't work and that's why we're getting this little orange feeli but let's just unpin the cards here to make this even more visible and what you want to do here is Define the journey so let's see if they get the welcome message and click educational videos well we would want this to link to the videos right so wherever you go on this note it will just latch onto it and there you go that's linked up so what's next if they're in here they're going to get this message with the link and then they get to two choices right learn more or exit so guess what if they say exit I want to go towards the end like so if they say learn more we're just going to send them back to the add stuff here note which we can now name welcome AI Advantage website perfect and there you go so this first part should already be working so we can just go in and in the conversation I'll just hit this little new conversation button and now we can restart it so I'll just say hi okay what would you like to explore today let's say educational videos perfect there you go we have the link to the Channel with our message and we get these choices let's see if the link works yep perfect and then we'll say learn more and it should go back and give us the choices again perfect so now obviously these others don't work because we have link them up but that is a quick and easy fix because check it out I'll just rightclick this node say copy and then anywhere else I'll just say paste and you know what I'll do it one more time cuz we have free choices right and then I'll rename them so this one is going to be newsletter this one is products and then I'll change the messages all right so all I need is the correct links so here I'll take the newsletter sign up link and look I'll just keep this messages simple because as we talked about before we'll be adding a little more wisdom to this bot in a second here but for now this one is looking good and then we'll do the same for the shop I just need a link to the shop there we are and now all that is left is linking these various parts up so it becomes clear what the different stops along the journey you're taking the bot user on is so if they start their bot usage Journey they get the welcome message then they get the multiple choices if they pick the first one this route takes them to the videos perfect if they pick the second choice well we'll just connect this up to the newsletter like so and if they pick the products well you guessed it we go to the products node now next up we want to link up all these so as you can see we'll have to reconnect these here because along the way of us doing things somehow they disconnected so my recommendation would be once you're at a checkpoint you want to save always just publish this but there you go let's just link learn more to the welcome node exit to the ending node and then the same thing for the newsletter exit over here and for the products option and yeah exit over here perfect so now I'm at a good point so I'm just going to hit publish here which before even testing it it's going to allow me to share this with other people include it in my website whatever I want to do and now we have a published spot let's just test it in here quickly let's start the conversation with high all right let's say we want to learn about the newsletter yep there's the link we can learn more okay maybe let's go to the products now perfect so it all works as intended so I can simply say exit over here and it should end the conversation so that is huge we essentially built a functional bot that gives users of our websites the various links that they might be looking for and as you might imagine this is just the beginning and that's why I want to show you three more things here and the first one is just a little organizational thing that you need to grasp once you start doing more with this but it's a concept in here called workflows and if we go here to the left and we haven't even used these at all right there's multiple like settings and flows but if you go to this flows area you're going to see the various flows inside of your Bot and what we did is we spent all our time in this main flow this is what you see on the screen right now but there's actually more because one in here handles all the errors so if an error occurs it sends this message in here another one is for when the conversation times out and the last one and this one is important is the conversation ending okay so right now you can see when it arrives at this ending there's one note in between and then it actually ends the conversation so nothing happens in here that's why when we told the bot to exit the conversation it just did it didn't reply it didn't do anything but what we can do in here we can open up this card panel and just take one of these text messages now maybe you could put a video in here that says goodbye whatever you might want to do and let's just say goodbye in here so when we go back to this main workflow and now you might notice that this thing in the end is actually not an ending point it's actually a workflow we can see that up here when a user reaches this note the conversation is ended and the user is redirected to the conversation end workflow which we just edited so now if we're going to rerun the bot and just pick any choice and go to exit it should give us a goodbye message there you go goodbye so that's essentially how workflows work they allow you to have multiple layers inside of a bot to keep things nice and organized so you could do a whole lot inside of that workflow and build out an entire world and then here in your base view of the bot it's just going to be one note instead of like 10 right that's where it becomes really useful and then up here you can always add new workflows or folders just to keep things organized but now let's get to the most important part of this tutorial in my opinion because what's amazing about these Bots is they're AI powered right so what that concretely means is that you're talking to the cat GPT 3. 5 API here and what that also means is that you're not just limited to the simple Journey that you lay out you can always talk to it freely because you have chat GPD 3. 5 and the amazing thing here is you have the option to talk to more than just chat gp2 3. 5 actually building Bots like this is one of the best ways to add your custom data into the conversation so let me show you how that would work what we're going to need is a knowledge based that links to the bot okay so inside of the knowledge base you can have different websites PDFs text documents and then the bot is going to be aware of those and any time it answers it's going to consider them so let me show you how that works if you go into this flows tab where we just spent some time you're going to see there's a default knowledge base in there already you could also add a new one with this button here add knowledge base we're just going to use this default one and again this is why I love this so much in some other apps this can be a little confusing here it's super simple all you do is Click plus knowledge based source and then you can pick is it a web p page is it a text document let's just add a web page how about the homepage of the website that this bot is going to live on that sounds appropriate so I'm just going to set add pages from URLs I'm just going to insert the URL here yep it indexed it took about 3 seconds and now I'll just add the other part so I'll add the newsletter signup page we also want the about page and if you're more experienced you will know that you could export the sit map from your website and then there's a button here upload sitemap that's the easiest way to upload an entire website if that's what you want to do but I think for right now this is exactly what I need and then maybe lastly I'm just going to include the shop in my little knowledge base here there you go confirm and we're set so now it's aware of these four websites what you could additionally do is say add knowledge based Source text document and then in here you could just type whatever text so this is really the simplest way to add info in here and what you could also do is say documents right so this is where you can upload PDFs text files Word document you name it just simply upload it like so and that's it and I want to point out one more thing in here if you add a new knowledge based Source here you can add a web search and here you could add any website and specify that only check pages from the last 24 hours so if you included a News website or a Blog in here it will only consider the ones that were published within the last 24 hours and automatically gather the data from there which is a wonderful way of giving users a reason to come back to your Bot because it's going to have new information every day right I do have to note this doesn't work perfect every time so I would just recommend playing around with this a little bit and see what works for you but this is amazing feature and you could even add multiple websites or search the entire web right here I'll just delete these for now okay so now let's return back to our bot and let's include this knowledge base cuz now nothing changed we just have a knowledge base that we're not using and the way you're going to do this is the following you're going to click one of these nodes and then there's a single option okay on this right side right here it says enable knowledge answering and what this means is that when you arrive at this node it will consider the knowledge base now why wouldn't you want this turned on at all times Well if you add enough documents in there it's going to make it slower you'll just experience that over time so before you upload 200 podcast transcripts just consider the speed of the bot while testing it you'll see exactly how fast response my recommendation would be always keep these as lean as possible and if you have a lot of documents just create multiple knowledge bases and at different points in the conversation just include that particular knowledge base but here with the four website links it should be just fine and right now this node is enabled so what I actually want to do is I'm going to enable this for all different nodes here so for the videos for the newsletters and the products and now my chatbot just got so much smarter right and there you go that's it let's start a new conversation and test our brand new bot that now has the knowledge of the links that we included so let's start with hi all right and now instead of taking one of these predefined ones we have the chat box here so let's just ask it something it could know without the website knowledge right let's ask who is Igor because that's what the about page on the website is all about so let's see if it can tell us and there it is eager is the founder of the AI Advantage he works tirelessly to improve interactions with tools like chat GPT and shares his knowledge through videos events and writeups great a knowledge based powered answer let's go to the newsletter and test it in there too yep and there you go now that the knowledge base is enabled so it gives us some info from the site so just beware of this if you enable the knowledge face it's going to start living a bit of its own life whereas if you disable it it's just going to follow exactly what you told it to do so let's ask it something tricky like why should I subscribe to the newsletter and there you go an explanation that is based on a website you can click these little numbers which will show you exactly where the info comes from so if I just click that I'm going to see that this content right here is the data source where it comes from and there you go now we have a AI power chatbot that has different options but now that it's a little more free form we might want to guide it so I think showing you this one last thing is important here when you go to the cards and flow log these two are really convenient once you learn how to use them one is intent and the other one is expression so when would you use these well you would use these if you want to affect the route of the journey that the user is taking so for example if they want to sign up to the newsletter always send them to the newsletter page well you could do that here independently of the buttons so let's just take this intent one and drag it in here and then up here you can say intent is join the newsletter and then I'll just link it to the newsletter node like so and this other always one we can just delete so now when the bot picks up that in this message the user wrote a message where the intention was to join the newsletter but he didn't press the button well it's going to still direct him to the newsletter let's just try it so now let's write something unexpected like I want to sub to the newsletter right and there you go it transitioned to the main newsletter because it picked up on the intent with the power of AI so that is your intent condition and the other one here would be the expression where you're looking for something very specific so a specific number range and the amazing thing in this one is they just built AI into this to write the Expressions so you can just tell it in natural language like so what you're looking for and it's going to write the expression then you can test it but we're going to delete that for now because it's time to finish up this bot now what we want to do is we want to publish it right we want to get it out into the world up on the website and this couldn't be any simpler so just give me a few seconds here I'll hit publish there you go bot has been published and if I hit share now this is what I'm looking at you have a link here that you could send to anybody to test the bot this is public so that could be any simpler there you go works as intended so I'll close this up and what we can do now is here on the top left we can go back to the dashboard and I'll just rename this from Colm pigeon to bot tutorial number one and look even with all the explaining this just took me 45 minutes to build and now we're ready to integrate this into the website so if you go over here to Integrations there's two things to consider one is you can turn off this created with botpress badge save the configuration so that's going to make it cleaner and then the second one is if you go over here to preconfigured well this is the link that you can share with the world I go into anonymous browser this just works no more icon at the bottom super clean and the second one is you can embed it into the website and look at the beginning I promise you that you don't need any coding knowledge do this and that's true because all you need to do is you need to hit this little copy to clipboard button now we copied it you will head on over to your website and this part is just going to differ every single time mine is on WordPress and I use this plugin called simplist to edit my pages so I'll just go to the front page and in your case this will obviously look different but you're always looking for the same thing you're looking to add some code to the body of your page now in this particular editor the way that looks is I just go to modules and I pick this code module and I can just place this anywhere on the site it's not going to be visible and once it's in here I just click it say edit code and I'll paste what I copied from the botpress website and that is literally it so now it's in the body section of my site so again this might differ from platform to platform but I'll guarantee you that every website has this possibility and usually it's quite easy to find when doubt you can just ask cat GPT I'm using Wordpress how do I place some code in the body of my page and it will tell you and if you can't find it just share a screenshot with chat GPT and here it'll give you a guide for word it doesn't know this particular plugin that I'm using that's why it's not giving me that tutorial so yeah in WordPress you would just add a custom HTML block and what that does is if I publish my site and I view it voila we have a little widget at the bottom right where I can talk to the bot that we just built and there you go the answer from the knowledge base and you're up and running and my favorite thing here is that you can integrate this anywhere else so if you just go over here you can put this into WhatsApp into slack you could hook it up to Instagram whatever you want and another great feature is that you have the logs in here so you can see what the people are saying to the bot and then adjust it accordingly so if they're asking a specific question all the time you might want to consider changing the bot and this is what I always tell people it's so great to start early because these logs are going to help you make the bot better so by just putting up something as simple as this on your website you're going to be able to gather the information it's going to allow you to build better Bots over time and just like that you added another tool to your AI toolbox now you're able to build custom chat Bots that are educated upon the knowledge that you place in the knowledge base search the web and so much more if you dive into a documentation here you have step-by-step tutor tutal how to use all the features inside of the studio Builder so again thank you so much to bot press for sponsoring this video as I mentioned I would have used it anyway for this tutorial and if you want to go a step further and learn how to build Bots with code which you don't have to be a coder to explore the first steps there well I created this playlist with tutorials just as simple as this one that teach you how to build Bots that you can speak to they speak back all inside of your phone as a complete newcomer to coding I hope this helped you out and have a great day