Build Customer-Facing AI ChatBots with this No Code Tool

Today we are going to be looking at this platform called BotPress that lets you create customer facing bots. Powered by ChatGPT. The bots that you can create in WordPress can not only talk to your customers, but can also take actions because of a large number of integrations that are available within WordPress. It's a very mature platform and that's why it's used by thousands of different organizations and they are the sponsor of today's video. In this video we are going to explore the platform and I'll also show you how to create a customer facing chatbot with custom knowledge. To get started for free, simply sign up. Okay, so here is how the basic flow of the chatbot is going to look like. And I'll show you how to recreate this in WordPress. First the bot will say hi to the user and then it would ask the user what would you like to know? Then it will get the user question and check a custom knowledge base. If the answer is present in the custom knowledge base, then it will ask the user, do you have any further question? If there's a user says yes, then it will go back and follow the same pattern. Now, if the answer is not present in the knowledge base, so we're going to follow this path. In that case, the bot is going to tell the user that it doesn't know the answer, but still will ask the user if they have any further questions. So if they have any further questions, it's going to follow this flow. But in case, if the user says they don't have any further questions, then it's going to end the conversation. Now, using this simple bot, I'm going to introduce you to different concepts within bot press. You can simply replace this knowledge base with your own knowledge base and you can reuse this chatbot. Okay, so once you sign up, you're going to see an interface like this. Click on this Create Chatbot. Okay, so you're going to see this message. Congratulations, you just created a new chatbot. So simply click on edit. Okay, so here you are presented with another page. So here you can use different templates. But what we are going to do is we are going to start from scratch. Simply click on this and then click on Use template. Okay, so this is the first page that you're going to see. Now since we are beginning from absolutely scratch, so I'm going to simply select this and delete it. Okay, And I'm going to also delete this node as well. Let's confirm it. All right, so in the beginning you going to have a start node and an end node. Let's start building our chatbot and I'm going to introduce you to different components as we move along. Now, there are three different concepts that you need to understand. The first one is the concept of a node, then that of a card. And the last one is expression. And we are going to cover all of these in this tutorial. Let's go back to our original flow. The first thing that we need is a mechanism to greet our user. Now, in order to do that, we need to add a node that is the atomic component in WordPress. In order to do that, simply right click anywhere and then select standard node. Now, it's a good practice to give name to your node. So I'm going to call it greeting. Now, we want to show a message to the user. So for that we are going to be using a card. And a card has different options. So for example, we can simply add a text card, or you can add an image video, or you can also execute code and so on and so forth. We are going to look at some of these options in this tutorial. Now, since we added a text card, if you click on this now, you have the ability to send a message. Okay, so let's say this is the message that we want to display at the start of the conversation. And the message is, hi, my name is Sam and I'm a helpful bot. Okay, so what we need to do is we need to simply connect the start node to this greeting node. Now we need to add another card, and that is going to be an expression card in here. Now, the expression is basically a place where you can add mathematical expression if you want. So in this case, if you see it says always and you can change this label to whatever you want. And the condition is basically true. So whenever somebody comes into this card or this node actually, then this expression is going to be always true. Basically, that means that at the start of the conversation you're going to be always showing this message. Next, we actually want to get a question from the user and check whether the answer is present in our knowledge base. Now, in order to do that, we are going to be using yet another standard node. So I'm going to click again and then select a standard node. So I'm going to call this user query. Okay, so we simply need to connect the output of this always card on the greeting node to the input of the user query node. So that means we are going to be transitioning from the greeting node to the user query node. Okay, next we need a mechanism to get the user question or query. Right? So we need to get user question. So for that we are going to add another card. So simply click on the card. Now if you come to this section on capture information, you have a number of different options. So for example, you have a single choice, boolean, multiple choice. Right? But what we want to do is we want to get raw input text from the user. So I'm going to simply add that in here. And now you can ask question to the user in this section. Okay, so whenever we transition in here, we are going to show a message to the user and that's going to say what would you like to know today? Now here again, the type of value to extract is simply raw input text. Now you can also create a variable for it if you want. So let's call it question. Okay, and now instead of raw input, you're going to see this label called question. Okay, so we got the user question, but how do we actually all set it? If you go back to our flow diagram. So here we need custom knowledge base. Now in order to add custom knowledge base in WordPress, all you need to do is come click on this close. Now here you have multiple different options. So you can either add a table or add different folders or add knowledge base. So I'm going to click on add knowledge Base. Now if you click on this, you can add different formats of documents, web pages, or it can also do automatic web search for you, or you can add text documents. So in this case, what we're going to do is we are going to add web page. So we're going to be creating a knowledge base based on some web pages. So there are two options. Either you can add URLs and they're supposed to be separated by new lines. So I'm going to show you how to do that. Or if you actually want to go ahead and let's say create a knowledge base based on a whole website, then you will need to add a sitemap. So for example, if you are working with the WordPress website at the end, you can simply type sitemap xml and that will capture all the web pages that are connected to that URL. Okay, but we are going to be going with the first option. So let's add some URLs in here. Okay, so just to keep things very simple, what I did was I went ahead and grabbed some blog posts on WordPress.com and just added a few URLs in here. Next we need to Simply confirm this. So let's hit confirm. Now it will start indexing all the URLs. Okay, so it created an index for all the text that is present on the URLs that we provided. So let's close this. Okay, now here's the best part. You can see with each URL. For example, it says 15 vectors, 6 vectors, 1 vector, 1 vector, right? So if you click on this, you see a chunk that was created from the URL. So here's this specific web page had only one chunk. If you go here, you're gonna see this chunk, right? So that's a separate chunk. Here is another chunk that was created. So it seems like it's creating vector embedding and everything. Now on the right hand side you can see your storage quota. So for example, in this specific case you have access to 5,000 vector source, which is around thousand PDF pages. So for a free tier, I think it's a very generous. Okay, so we are done with creating our knowledge base. Now the question is how do you connect it to this node? Now for that you simply need to click on this node and you will see this option. Change agent configuration for node and there is this Enable knowledge answering. You might not be able to see this button, but when I switch it so it turned blue. And also you will see this book icon. Right? So basically whatever knowledge bases are present in this project, it will now have access to that. Right? So let's say if we turn it off, we don't have. We're not using any knowledge base at all. And now we're using a knowledge base again. Now going back to our flowchart. So there are two possibilities. When somebody asks a question, the answer is either present in the knowledge base or not present. Right? So we need to take care of these two possibilities in this specific node. Now first we'll look at the case where there is no answer present in the knowledge base. So for that we'll need to add another card in here. And that is going to be an expression because we are performing an operation. I'm going to say turn.knowledge agent. Responded. Right? So I want to see whether the knowledge agent has responded or not. In this case I want to specifically say that it hasn't responded. So that is the first condition. And the second condition or expression is going to be when we do get a response. So we'll simply set this to true. Okay, so again we have two different outcomes when we have an answer from the bot or the knowledge base. And the second scenario is that we don't have an answer. Now, what further step we need to take based on the outcome. Now, if we go back, if we don't find the answer in the knowledge base, we need to tell the user that we don't have the answer. So let's create another node and let's call this an error node. And we are going to add a text box in here. Basically, this is the text that the user is going to see. Okay, so we're going to simply show this message, sorry, I'm not able to answer based on my knowledge base. And what we need to do is we need to connect this node to the error node when we don't have the answer from the knowledge base. Now, when we show this message to the user, we also want to check whether the user wants to ask another question or not. Right? So what we need to do is we need to add another expression. And that's basically an operation that we will always perform after showing this. That's why the value is true. Right? And that is going to be to check with the user whether they want to ask another question. Okay, so we need to have another node that will check with the user whether they want to ask another question or not. So let's call it further questions. This node is going to have two outcomes, yes or no. Right. So we want to show the user a boolean options. So basically either they can select yes or no. Okay, so we're going to add text in here and we'll simply say, do you have any further questions? Right. And the options that you have is yes and no. Right. And you can actually see them in here. So there is one option yes, and the other end is no. So what we need to do right now is we need to simply connect this one in here. So irrespective of whether we find an answer in the knowledge base or not, it will still ask this question whether the user want to ask another question or not. Similarly, if we show an answer to the user, we again want to check with them whether they want to ask further questions. Now, there are two possible outcomes. If this user says no, just finish the conversation. And if they say yes, then let the user ask a question and follow this path. Now, in order to do that, but now we are going to connect this to the end that will basically end the conversation. But if the answer is yes, we actually need to go back and connect this in here to the user query. Okay, so that basically completes the flow of what we want in here. So let's see if this Bot works or not. So for that we're going to be using the provided emulator. What I'm going to do is I'm going to just drag it up here and let's say hi. Okay, so we get a response from the bot. It says, hi, my name is Sam, I'm a helpful bot. So this is basically, and there are some debugging responses as well. So which is pretty good to see, right? So basically when I clicked on it, it highlighted that the answer is coming from this specific node. Then after that it automatically transitions to this user query node and simply shows me what would you like to know? So as you can see, it's amazing for debugging as well. So let's ask SFC question. So I'm going to say what is bot Press? Okay, so here's the response that I get. Bot press is a cutting edge chatbot builder powered by GPT 3.5. So this is basically coming from the knowledge base and you can actually see where we are in terms of the conversation now. And that is basically checking with us whether we have any further questions or not, right? So you see these two options, yes or no. If I say yes, right, then it shows me again this message. What would you like to know? And if I click on this, here is the point or node in which it's simply checking with the user again. Okay, so let's ask something that the bot doesn't have any information about. So I'm going to ask it, what is LangChain? And let's see what it comes up with. It says, sorry, I'm not able to answer based on my knowledge base. And then again it asks me whether I want to continue the conversation or not. So I'm going to say no and that should end the conversation. And that's why you see variable captured, right? The knowledge base disabled, no content match. And then conversation ended. Now let's say you created this chatbot and now you want to expose this to people over the Internet, right? So you can integrate this as a part of your website or it has other integrations. For example, you can add this to Facebook Messenger, WhatsApp, and so on and so forth. But I'm going to show you a very simple way of doing it. So for that, simply click on this Publish chatbot. Okay? So once the process is complete, you can click on this share button and that will basically open another window where your chatbot is ready. So let's say if you are working with a client and you are creating a chatbot for them, you can simply copy this link and provide them with the link and they will be able to test out the chatbot. Now, just like the emulator, you can actually have a very similar conversation with the bot in here as well. So I was asking some questions, but let's say I'm going to say yes and let's ask it what is bert? Now I was looking at one of the blog posts. So here they have information regarding BERT and that's why it's able to actually extract that information. Now this was a very simple chatbot. This can be improved a lot by adding some more advanced functionality. And WordPress provides a lot of different integrations so you can actually collect data, write those and do a lot of automations within the platform itself. Again, thanks to WordPress for sponsoring this video and let me know if you'll be interested in more videos on this platform. Do check out WordPress. It's a very powerful platform where you can create customer facing chatbots. I hope you found this video useful. Thanks for watching and as always, see you in the next one.