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 chatbot will take them through a little journey. But hold up a second. While editing this video, I realized that I need to address an obvious question here, Igor. How does this chatbot that we're about to build this Differ from the GPTs released by OpenAI? 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 three 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 up to date results every single time. And all of that we'll 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 BotPress. And there's two reasons I picked BotPress 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 Bot Press. And I say this generally, we legit tried them all and this one is the most beginner friendly one. 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, 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 because 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 because 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 endpoint 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 entered BotPress 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 bot 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 end. 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 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 that'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 note in the middle that says add stuff here. And then the ending doesn't get any simpler 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 because 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, because 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 on 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 because 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 you can have a 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 three. 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 because 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 post 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 node. 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, 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 bot wouldn't work, and that's why we're getting this little orange field. 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, and we'll 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 expect 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 haven't linked them up. But that is a quick and easy fix because check it out, I'll just right click this node, say copy and then anywhere else I'll just say paste. And you know what, I'll do it one more time because we have three 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 message just 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 note and then the same thing for the newsletter, exit over here and the photo 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 bot. Let's just test it in here quickly. Let's start the conversation with. Hi. 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 website 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. It didn't reply, 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 redirected to the conversation and 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 node instead of like ten, 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 ChatGPT 3.5 API here. And what that also means is that you're not just limited to this simple journey that you lay out. You can always talk to it freely because you have ChatGPT 3.5. And the amazing thing here is you have the option to talk to more than just ChatGPT 3.5. Actually, building bots like this is, 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 base 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 anytime 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 base source and then you can pick. Is it a web 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. It took about three 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, and if you're more experienced, you will know that you could export the sitemap 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 base, 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, documents, 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 base 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 an 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, because 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 it responds. 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. Igor is the founder of the AI Advantage. He works tirelessly to improve interactions with tools like ChatGPT and shares his knowledge through videos, events and write ups. Great, A knowledge base 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 be wary of this. If you enable the knowledge base, 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 the 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 an AI powered chatbot that had 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 you go to the cards and you go to the flow logic. 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. 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, we want to get it up on the website. And this is 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 couldn't 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 column 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 bot press batch, save the configuration. So that's going to make it cleaner. And then the second one is if you go over here to pre configured, 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 to 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 Samples 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 in doubt, you can just ask ChatGPT, 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 ChatGPT. And here it'll give you a guide for WordPress. 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 PC 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, now you're able to build custom chatbots that are educated upon the knowledge that you place in the knowledge base, search the web, and so much more. If you dive into the documentation here, you have step by step tutorials how to use all the features inside of the Studio builder. So again, thank you so much to BotPress 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.