Build a No-Code AI Chatbot (Step-by-Step Tutorial)

Today I'm going to be walking through step by step how to build an AI chatbot with absolutely no code. By the end of this video, you'll be able to have this thing up and running on your website for free. And the one I'm going to build today is actually going to be deployed onto my website. So I'll show you guys how to do that and walk you through that process as well. So let's not waste any time here. Let's just get straight into the next step of this video, which is the benefits of AI chatbots. Real quick, just want to highlight two things. It's going to increase conversion rate on your landing page, on your sales page, whatever it may be. And also it's gonna save you a lot of time doing customer support and handling questions. So for all of that for free, it's kind of a no-brainer. Why would you not, you know, watch this video and set one up for yourself? And ChatGPT is going to be where I'm building this AI chatbot today. I chose ChatGPT because super simple interface. Their chatbots are super, you know, highly customizable. They're very, very easy to deploy. They'll walk you through exactly how to do that and also very affordable. So let's get into the build. Okay, so now we're actually inside of ChatGPT. As you can see on the left-hand side, we've got a lot of information to look at. Help and resources. They've got great documentation. You can look up your project and you can set up different members. You've got your account information, but obviously we're going to come in here and we're going to create a chatbot. So one of the really cool things about Chatling is that you can either start from scratch or you can start from one of the templates that they have. So they've got an AI chatbot, basic lead generation, or lead generation plus AI. So for the purpose of today's video where we're just trying to walk through how you actually set up an AI chatbot, we're going to choose AI chatbot. Name our chatbot, and it's going to open up the interface for this chatbot. It may look a little overwhelming, like there's a lot of information, but trust me, it's not. Let's break it down real quick. So we've got a dashboard. This will be great to look at conversations your chatbot is having, different lead information, and just sort of when are people chatting with this bot. But let's go in here into knowledge base because this is what we want to set up first. So a knowledge base, just think of this as sort of the memory of a chatbot. This is the information that you want to put in here in order for the chatbot to be able to answer questions about the products or the services that you offer. So Chatling makes this really easy. We can click on Add New and we'll see the available data sources that we can put into this knowledge base. So we've got website, sitemap, URL list, document, text, FAQs. And what I found works really well is sort of like an FAQ section because a lot of the times that's what the chatbot will be doing is answering, you know, frequently asked questions. So this is my website, and as you can see, there is no chatbot in here. So what I want to do is build a chatbot in today's video that I'll be able to embed onto my website. So the first thing I'm gonna do is I'm gonna grab this URL of my website, and I'm gonna put it right in here and hit next. Now Chatling is gonna crawl this website. It's gonna gather all the information we need. My website only has one page, so we're only gonna get one page result. But if you had, you know, thousands of pages on a website, it would be able to crawl that no problem and get all that information back. So we're going to hit submit and we will see that this document has been added to our knowledge base. So next I want to add some frequently asked questions into the knowledge base. So I've got a document here that has a bunch of different, you know, frequently asked questions about my products and services that I offer, as well as just sort of AI automations in general. So I want to add this to the knowledge base as well. Now you could go in here and enter in each question and answer individually, but that's a little tedious. So what I'm going to do is I'm just going to upload this as a document. All right, so I dragged that PDF in here. I'm gonna hit submit, and then we will see that we've also got this information added to our chatbot's knowledge base to recall information from. So real quick, looking back at our knowledge base, we can see that we've got one link, which is my website, and then we've got one document, which is the PDF with FAQs. Now let's hop into the actual builder of the chatbot. Now we're in the builder. This is what it's going to look like. Remember, I have not done anything yet here. This is all based on the template that we were given when we clicked on create a chatbot. AI chatbot. So before we get into what's actually going on right here, let's take a look over here on the left and see how we can configure different stuff. So these are the blocks. We can send a message, and that can be a text, image, video, audio, or carousel. We also need to capture a response from the user that is on our website talking to this bot. So we can capture response in the form of button, text, number, email, URL, date and time, phone, and form. And then we've also got AI response, which is sort of how the AI actually answers questions based on the knowledge base. And we've got some other stuff here, but to keep it simple, we're just going to stick with these 3 main types of blocks here. Then we also have variables. This basically is just how information will be stored that could change based on the way that the person is talking to the chatbot. So these are sort of the basic ones here. And if you don't understand variables, don't worry, it'll make sense once we get into some of these blocks. But you have the option to use system variables that are already in here, or you can add new ones if you're sort of getting a more complicated chatbot. Then we've got AI configuration where you can come in here and sort of set up how you want the AI to act. So you've got instructions. You could type in a prompt if you want, or you could look at some examples like this one says your name is Joanne and you're a customer support assistant, or you could tell it to be professional. You could tell it to be friendly. You could even tell it to make some jokes. So that's how you can give instructions to your agent. Next, we've got knowledge base. We already set that up, but you could click on this link to go back to the knowledge base section to make sure that it's feeding in the correct information. And then finally, we've got different settings for your AI. You can give it a business product or brand name. You can choose what type of model of AI you want to be using, the language, and of course, temperature. If you don't know what temperature is, it basically just means sort of the randomness or predictability of the AI responses. So this would be the most consistent, most predictable responses. And this one would be— they can vary a lot based on, you know, the prompts, based on what they're being asked. So I usually just keep this around zero. And then finally, for the settings, you can just choose how, how long you want the delay to be between each message for the chatbot. At this point, these 3 big blocks right here may not make sense, so let's preview the bot and see how information is moving through. So we'll click preview. As you can see, it's going to start the process, follow this line, and go to this text block that says, I'm an AI chatbot that can answer all your questions. Before we get started, please provide your details below. So then we have a form that's going to capture our response, and it wants us to give our name and our email. So let's do that real quick. So I put in my name and email. Let's hit submit and see what happens. It's going to follow this line right here and go to this next group where there's a text that says, hi, contact name, how can I assist you? As you can see, it said, hi Nate, how can I assist you? So this contact name is blue because it's a variable, and all that's doing is when we answer this, this name section in the form, it's storing our name as a variable called contact name. In order to call that later right here. How neat. How can I assist you? So now we want to ask a question to make sure that it's pulling information from our knowledge base. So switching back to my website, you can see I have a section with key benefits of AI agents. Let's ask the bot, what are some benefits of AI agents? And see what it says. Okay, great. So it says some benefits of AI agents include perfect memory, 24/7 availability, cost effective. So all that information is correct and it's pulling from both sources of the knowledge base, which were the FAQs as well as my website. The way that this is working is, as you can see, once it says, how can I assist you? It's going to follow the arrow down to this next block where we're going to generate an AI answer. The first section is a capture text. So this just means whatever we ask the chatbot, it's going to store it as text in a variable called user question. And in here you can see that it's going to access this variable called user question in order for the AI to respond to exactly what we said, which was, what are some benefits of AI agents? And as you can see, that's sort of where the process ends. So now let's get into how we can build off of this and exactly how you store information as variables. So like I said, the first thing that we're prompted to do is to fill out this form. So let's click on this form button. As you can see in here, the first thing that's asking for is a name. It's a required field, it's storing as a text, and it's storing it in a variable called contact name. So that is how it was able to call it over here later on. And now we have email, It's also a text and it's storing it in a variable called contact email. So then we follow this arrow. It asks, how can we assist you? We follow this arrow again, and then we'll move into the next capture text, which is the question that we ask the bot. So we're storing this text as a variable called user question. And then in this next node, which is AI, we're able to respond based on the knowledge base. And the question that we're asking it is the user question. So all that's doing is calling the data that was pulled in from us in the previous response. So I don't know if you guys noticed, but last time we talked to this bot, once it answered our question, it didn't say anything else and we didn't say anything else. And I don't really want it to work like that. So what I'm going to do is I'm going to drag in a text block after the AI responds to that question. And I'm just going to put in the simple text where I'm going to say, anything else I can help you with? And we will save that there and hit save. So now if we preview the bot, and obviously we have to fill in, you know, this information, it's going to ask us how it can assist us. And as you can see, it did SDFHJK because that's what I typed in the name slot. I'm just going to say, you know, what is AI consulting? It's going to give us a nice response about what AI consulting is. And then after that, it's going to ask, is there anything else I can help you with? And it ended the chat because we haven't set anything else up. So at least we know that that step worked. So now what I want to do is I want to have the user respond to this question. Is there anything else I can help you with? And let's make it easy and let's try using a different type of CAPTCHA response. We're going to use buttons. So this basically just means that the user will be able to choose the button of either yes or no. And we'll set this up real quick. As you can see, after the bot says, anything else I can help you with, it has this little purple circle that we need to drag into the next area. So we're going to drag this into this group where we're going to have buttons, and I will just call this one user choice. Now we can configure this button. So we'll click into here and we have the first button which will just say yes, and then we'll click add button to add a second option which is going to say no. So now we've got these next two choices where it says, can— is there anything else I can help you with? We'll say yes or no. And now we need to set up what happens if someone says yes and what happens if someone says no. So pretty simple for the second option. If someone says no, let's have a text that says, all right, all righty, I guess that works. And then we want it to say goodbye to the person's name. So let's say, have a great day. And then here's how you can call a variable. So if you put a curly bracket, it's going to pull up the list of variables that we've used in, in this context. And remember that we stored the name from earlier as contact name. So we're just going to click on contact name and we'll put an exclamation mark and we will save that. So ideally this will say, you know, if I entered the form and I said my name was Nate, once we're done talking to the bot, it's going to say, alrighty, have a great day, Nate. So just make sure that you drag this circle into there so that we know that it's done. Now we need to configure what happens if they do actually want to ask another question. So again, let's grab a text and let's set this one up and say, um, ask away. So we've got that set up. Now we need to make sure that we connect this to here. We'll call this one yes just to keep ourselves organized, but it can't just end here. Once it asks away, we need to bring this back to over here where it's going to ask, where we can ask a question and then the AI will answer it. So all we got to do is drag the circle right back into this block and now it's going to come back through here and we'll be able to ask another question. It'll answer it and then it's going to be an endless loop until we say no. So let's hit save and let's test this out. So all we got to do is come up here, click preview bot. This time we'll say my name is Jerry. And let's put in a fake email here. And now it's going to ask us, how can it assist us? So this time I came in here and said, what services does UpIt AI offer? Let's fire that off and make sure that we get an accurate response from our bot. So UpIt AI offers custom-made agent and automation solutions for small businesses, including voice agents, text agents, chatbots, workflow automation, and AI consulting. And now we can see it worked because it came down here. And then after that, it said, anything else I can help you with? It gave us two choices. So let's click on yes so that we can ask another question. We'll hit yes. It should go here. It's going to ask, it's going to say, ask away. And now it looped all the way back and it's waiting to capture our response. This time I'm going to say, what is an AI agent? We'll fire that off. Okay, so it said an AI agent is an intelligent system capable of performing tasks autonomously, such as answering queries, managing leads, processing orders. They assist by improving and customer engagement, 24/7 support, all that kind of stuff. And that looks correct to me. So now it says, anything else I can help you with? Again, like I said, this is gonna be an endless loop until someone comes in here and clicks no. So let's click no and see what happens. It should follow this arrow right here and it should say, alrighty, have a great day. And then it said our name, which is Jerry, because that's what we entered in the form up here. So now it ended the chat because there was nowhere else for it to go. And all of this is working correctly. So make sure this is saved. So I think the next thing that we want to do is be able to customize the screen a little bit because I don't want it to be black. I don't want this to look like this. I want it to match the theme of my website. So we're gonna come back into Chatling and let's exit out of this builder. We can go right here to Appearance, and now we've got different things we can configure for appearance. Super easy. First thing I want to do is change the color, so I'm just gonna grab sort of a nice light blue color. I don't like that one yet. Let's go. Yeah, I like that color. We've got this. You can change the text color if you want. You can change the chat icon color if you want. You can change the width of how big this screen is going to be. You can change the placement, all this kind of stuff. But what I want to come and do is change the icon. So I'm going to add my logo in here instead of the Chatling logo. So all I had to do was go into my files, drag in the logo. And as you can see, now we've got these little arrows, which are the Uppit AI logo. So we're going to go on this one. You can also change, you know, the icon that's going to pop up down in the bottom right. And let's make sure that there's nothing else you want to change. Text, I don't want to call this support bot. I want to call this UpIt AI chatbot. So as you can see, it changed over here in the little preview. Let's see, what else can I configure? Down here it says powered by Chatling, and I'm going to turn that off so it just looks a little more clean. We can ask the user to rate the AI response, so it can ask if a response is helpful or not. That's going to really help us train and make sure that the chatbot is as effective as possible. And then you've got some other options here. You know, you can sort of enable it on mobile or desktop based on, you know, sometimes it's clunky on mobile. You've got other options, but we're good for now. So I'm just going to hit save. Now I'm back in the main menu and I'm actually going to go to conversations because now we can see all of the past times that someone has chatted with this bot. So let's go to the most recent one, which was Jerry. He asked, what services does UpIt.ai offer? And we can see the response. So it's really cool because it's going to show you how the AI responded to this question, the sources that it used. It used both of them, which was the FAQs, and it used the website. And then if we don't like this answer, we can go in here and fine-tune it. So the question was, what services does UpIt.ai offer? If we don't like the way that it answered, we can change this to exactly, you know, how we'd want it to answer that question. So in this case, I like it, so I'm not going to touch that. But if you're noticing that your, your bot is not answering things the way you want, it's super easy to come in here and fine-tune it. Okay, so finally, the part that I always thought was the most confusing is, cool, I've made this chatbot and it's able to answer questions, but how do I actually make it appear on my website? So that's where we're going to come over here to ChatLinx integrations. You have a website widget, which is what we're going to use, but you've also got other ways to share it, and you can connect it to a workflow automation tool like Zapier. But if we click into website widget you'll see the different options we've got. So we've got one of those floating ones where it'll be in the bottom right and you can have users click on it or pop up automatically. You've got inline if you want sort of a dedicated question and answer area in a website or, you know, sort of like a question and answer page, and then full screen. So you have different options here. I'm actually going to go with inline. I know a lot of people tend to do floating chat, but for my website I want users to be able to scroll down and get to the actual inline and just the way that my website is set up. And then all you have to do is copy the code. So it's no code because you don't have to write any of this, you don't have to change any of it. You just got to click this button that says copy code, and then it tells you to add the code to your website. You're gonna paste the code in the body section of the web page where it should be displayed. So all you got to do is navigate to your HTML on your website and paste this right in, into the body. And then you've also got different guides. Let's say you made your website on Squarespace or Wix or even Shopify, like any of these things are super easy to integrate, and you can click right here to get a guide. I actually made mine on GoDaddy, so let's hop into there real quick and throw the chatbot into there. Okay, so every website's a little different with how you integrate code into it, but what I'm going to do is go down here. Let's do it right here. I'm going to add a section right here, type in code, and I'll get a block that's going to let me put HTML code within it. So we'll call this questions and paste the code right in there. And as you can see, it's going to pull up that inline chatbot Oh, of course you have to make sure that you actually publish it first. So let's just go back and publish it real quick. So just hop back in the builder. All you got to do is up in the top right-hand corner, click publish. The status will change from draft to published, and then we should be good. If we come in here and just sort of refresh this page, now we can see that this came through. I'm just going to quickly change this color because I don't like the way that one looks. And now we can save this information. So we're just going to publish this real quick and let's pull up the actual website to make sure that everything's working correctly the way it should on the website. All right, so I just refreshed the website. Let's scroll down and we should see the questions section. Now we're going to get the chatbot widget to pop up. It's asking for our name and our email, so let's type this in real quick. All right, we're going to submit that. Now it's going to ask us how it can assist us, and it used our name, which is perfect. I'm going to say, um, what is an AI voice agent? An AI voice agent is a type of agent that offers high-value human-like interactions. It provides exceptional customer support, improves engagement, blah, blah, blah. That's all accurate. And as you can see, it gives us a thumbs up or thumbs down in order for us to rate this response. So if we like it, we can rate it. And ideally, a customer that's on your website is going to rate it and you'll get information about that. But once again, anything else I can help you with? Let's hit no, and it should address us by name and say, have a great day. So, alrighty, have a great day, Nate. And then it ends the chat. So Super easy to put on the website. That took no code, took me about, you know, 30 seconds actually after I remembered to publish the app. But now let's hop back into Chatling and just be able to make sure we can see this conversation come through. Okay, so we're back in Chatling. Just remember on the left-hand side you got to navigate down to conversations and you can see every time someone's talked to your bot. But this is the one that we just did because it says Nate and it doesn't say preview like these other ones that say user preview because this one was a published app on on our website. Now we can see the exact conversation that it had. Once again, you can see, you can fine-tune your answer. You can see that they rated the response helpful, and you can also see where the sources are coming from. So I know that this wasn't a lead generation chatbot, this was just an AI one, but the lead generation ones would be able to take, you know, name, email, phone number, whatever you ask the user to input, and it would be able to put it in a spreadsheet for you or, you know, collect all this information in a more effective way than if you were to be doing that. One last thing I wanted to show you guys. We talked about the different ways to send messages, but we only actually did text. So I just threw an image in here after the user's done talking to the bot, and I just put a picture of myself. But you can see that, you know, after it said, have a great day, it threw in this picture. So, you know, you can really get creative here with different ways that you're talking to your potential clients, and you can throw in different things, maybe a carousel of different products for them to swipe through as they're talking to you or the bot, that sort of thing. But yeah, this was a really simple chatbot, and I just wanted to show you guys how quickly and easy it is to get one set up. But if you're interested in maybe some more complicated builds, please let me know in the comments what type of stuff you want to see on Chatling, and I'll definitely be sure to make a video about it. So that's all for today. Thanks, guys.