Complete Guide: Build a No-Code AI Chatbot for Your Website (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 chat Bots

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 going to 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 chat Ling is going to be where I'm building this AI chatbot today I chose chatl because super simple interface um their chat Bots 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 catling as you can see on the left hand side we've got a lot of information to look at helping resources they've got great documentation you can look up your project and you can set up different members um you 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

chatlink is that you can either start from scratch or you can start from one of the templates 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

You' 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 chat Ling 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 um and what I found works really well is sort of like an 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 going to do is I'm going to grab this URL of my website and I'm going to put it right here and hit next now chatlink is going to crawl this website it's going to gather all the information we need my website only has one page so we're only going to 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 going to hit submit and then we will see that we've also got this information added to our chatbots 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 you URL date and time phone and form and then we've also got AI response which is um 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 three 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 chat bot 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 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 um AI you want to be using the language and of course temperature um 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 um predictable responses and this one would be um 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 chat bot at this point these three 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 chat bot 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 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 and 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 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 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 on this form button as you can see in here um the first thing it'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 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 asked 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 response 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 pre 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 sdfh JK because that's what I typed in the name slot I'm just going to say you know what 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 capture 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 um 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 um user choice now we can configure this button so we'll click into here and we have the first button which will'll 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 um 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 going to pull up the list of variables that we've used in um 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 all righty 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 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 up it AI offer let's fire that off and make sure that we get an accurate response from our bot so up at AI offers custom made agent and automation solutions for small businesses including voice agents text agents chat Bots 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 going to 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 error right here and it should say all righty 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 this 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 on of my website so we're going to come back into chat Ling 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 going to 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 chat Ling logo so all I had to do is go into my files drag in the logo and as you can see now we've got these little arrows which are the up at AI logo so we're going to go on this one you can also change you know the 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 um up at AI chatbot so as you can see

it changed over here in the little preview um let's see what else can I configure um down here it says powered by chatlink 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 the chatbot is as you know effective as possible and then you 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 the Past Times that someone has chatted with this bot so let's go to the most recent one which was Jerry um he asked what services does a up at 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 used it used both of them which was the FAQs and it used the website um and then if we don't like this answer we can go in here and F tune it so the question was what services does up at 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 Bot is not answering

things the way you want it's super easy to come in here and finetune it okay so finally the part that I always thought was the most confusing is cool I've made this chat bot 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 chat links 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 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 going to 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 chat bot 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 question section now we're going to get the chap out 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 humanlike interaction actions 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 already 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 chatlink and just be able to make sure we can see this conversation come through okay so we're back in chatlink 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 our website now we can see the exact conversation that it had once again you can see you can find tune your answer you can see that they rated the the response helpful and you can also see where the sources are coming from 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 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 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 um your 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 chat bot 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 chatlink

and I'll definitely be sure to make a video about it so that's all for today um thanks guys