How to add Chat GPT to your website (easiest way)

Have you ever wanted to add ChatGPT directly into your website so it can answer some of your customer queries, book you in meetings, even sell some of your services? Well, if so, then this is a perfect video for you because I'm going to be going over a super simple way that you can add ChatGPT directly onto your website. If this is your first time seeing me, then my name is Rory Ridgess and I'm an AI enthusiast, and I'm passionate about helping business owners to integrate AI into their business to help them grow and automate in certain areas. So if that's something you might be interested in, do consider subscribing in. And also, if you're just an individual that's looking to learn more about AI and maybe use it in your day-to-day life, then this is also the channel for you. In this video, I'm going to be creating a virtual assistant for my website using ChatGPT. I'm going to be teaching you exactly how to prompt this chatbot, how to add the knowledge base, and also how to add some tools to give it a little bit more functionality. To do this, I'm going to be using a platform called Agentive, which is totally free right now, and it's a platform that allows you to build and deploy AI agents onto your website or onto Messenger or WhatsApp or things like that. So yeah, let's get into the video. So as you can see, I'm starting off in Agentive. This is how it all looks. First of all, I'm going to go to create new agent, and then you can just give it a name, a description. And when you sign up with Agentive, you're going to have to add in your API key. And if you don't know how to do that, it's really simple. You're just going to go to Assistants API, which is a platform by OpenAI, set up a free account, and then you do have to deposit some money in, but I think the minimum you can do is $5. So if you just put $5 in there, it'll give you an API key, and then you just put it into here. It's super simple. We ask you to do it when you sign up for your account, and it will take you through the steps on how to do it. So don't worry about that. So you're going to put your OpenAI key in there, and then you're going to select a model. I'd recommend ChatGPT 4o Mini as it's the best and the cheapest at the moment. So this is the one I made earlier. As you can see, I've given it a name and a short description. And this is how it looks inside. We've got a prompt, a knowledge base, and our tools. So I'm going to show you how all three of these things work. It's super simple, so don't worry. We're just going to start over in knowledge base because it's the most simple one out of all. As you can see, I've already got my one in here, but if you want to add one, all you're going to do is create new, provide a knowledge base name. We're just going to put test, and then create, and then you can just upload your file. You can just do it on a Google Doc And if you haven't got a knowledge base for your business already, then they're really easy to make. Sometimes you can do it with ChatGPT. You can just put your URL into ChatGPT and say, write me a knowledge base. Or sometimes you might want to just sit down and write the knowledge base. It really shouldn't take you too long. So next we're going to come over to prompt, which is probably the most important part of this chatbot. And there is quite a lot to it, and it might look quite complicated, but all that this basically is, is it's just a framework and I've just filled it in. So As you can see, we have our main headers. We have role, task, specifics, context, examples, and notes. So really simple. Some of them do speak for themselves, what you put in there. I'm just going to run you through all of them anyway. So for role, we've just said you're a helpful customer support agent for Autonomously. You are here to answer customer queries and schedule consultations, and if you can't help, then use a human handover tool. We'll get into what that is a bit later. So role is really simple, just they're a chatbot for my website and they're going to answer users' queries and booking free consultations. And so for task, all we're going to do is pretty much what the chatbot is going to be doing and how it's going to do it. So in this case, answer all of the customer queries based on your knowledge base and booking free consultations about people interested in integrating AI into their business. Um, and then we've got a little description how they should answer. So I've said 'Your answers to customer queries should be short and concise but friendly and helpful.' And then I've said, 'If a user shows intentional fondness to book a free consultation, send them this link.' And then it's just a link to my Calendly. And then a technique that I've used here is called role prompting, which is shown to be really, really helpful when using ChatGPT for chatbots. It seems to respond really well to this. And what this is, it's just kind of a guideline for how the conversation should play out with the user. So I've said Use this as a guideline for your conversations. Answer user's initial query in a friendly, helpful way, but keep it concise. And then ask if they would like any further assistance. If they do, then help them with those queries. And if they don't, ask if they would like to book in a free consultation to talk about a potential product. If you can't answer a user's query for whatever reason, then use a human handover tool. So quite simple, but it just gives the chatbot sort of a guideline on how their conversation should play out. It makes it much easier for the structure of the conversations, and so it doesn't get too confuse and kind of go off the rails a bit. So then we have the specifics part, and this is where we're just going to go into a little bit more detail on what it's going to do. In this case, I've gone into a bit more detail on the Human Handover tool, which is something we're going to get into later, so don't worry about that. But pretty much what I've said is just use this Human Handover tool when you can't answer the user's query based on the knowledge base, and ask for their email and save it as the variable user email, and save their last query as user query. That's going to make more sense in a bit when we go into how the tool actually works. And then there's another technique I've used here called emotional prompting. And what that is, is kind of what you'd expect. It seems to be really effective with ChatGPT to get to do more of what you want. So I've said, it is imperative for my career that you save these variables correctly, otherwise the tool won't work and my users will be left without any answer. So it's just really going to solidify that needs to do as I've said, otherwise the tool's not going to work. And yeah, it's called an emotional prompt. It works really well with ChatGPT, so definitely add this into your prompt where you can. It's just context about my business, Autonomously, who we are, what we do, just to help the chatbot out a little bit. Very self-explanatory, that one. And then we have examples. And now this is one of the most important parts of the chatbot. This is really what's going to give it the right structure and know what to say and how to reply to the questions. So all it is is literally just questions and answers, example questions, and how we would want the chatbot to answer. It's really important for it so I can get the tone of voice, how it should speak to the users, of what it should say, how long or short the reply should be, that sort of thing. It's really important. I've just gone ahead and put in 4 different ones and quite broad examples. So we're answering just a simple query, booking in another call here but in a slightly different way. And then using the Human Handover Tool. And then at the end I've just done notes, and these are the things that you really want to solidify with the chatbot. So I've just gone over the Human Handover Tool again, and also never mention that you're using a tool because sometimes the chatbot will say that it's running the Human Handover Tool. We don't want it to do that because there's just really no need. It just looks unprofessional and scrappy, and we don't need that. Now, something to add with these prompts is that there's research to show that for whatever reason, the chatbot likes to prioritize the information at the start the end of the prompt. So it just means that sometimes these things in the middle can kind of get lost. So that's why it's really good to solidify them in the notes and also solidify them in the role and the task step. That's where you want most of your information to be because that's where the chatbot seems to take most of its information on and prioritize that prompt. I'm not sure why it does that, but it does do that. So bear that in mind when you're writing out your prompt. So now we have the tool section, and for this tool, it's a really, really simple tool, and I've made it on Relevance AI. So if we come over to Relevance AI, go over to our tools section, you can see this one, Human Handover. I'm going to edit that, and then it's really simple. All it is is just email saved as the user email variable, user query as the user query variable, and then it's just going to send an email to me So what that's gonna do, if the chatbot doesn't know something and it can't access it in the knowledge base, or it just wants to hand something over to me, what it's gonna do is ask the user for their email and it's gonna save that as the variable user_email. And then their last query that it didn't know how to respond to, it's gonna automatically save that as user_query. And then it's gonna input these results and it's gonna make the tool run and it's just gonna send me the results. So I should get an email just saying the email address of the user and the query that they had so I can get straight back to them. So to add these tools to your chatbot on Agenteve, you're going to go to New, Custom Actions for GPTs. You're going to scroll down, select Human Handover in our case because that's the tool that we want to use, and then it's going to give us an API key, but we don't need that just yet, so don't worry about it. We want to scroll down to OpenAI Schema, generate a schema, then copy that Come back over to Agenteve, select new tool provider. Then we're going to paste in our schema like that. As you can see, it's recognized it— Human Handover Tool. Perfect. And then all we need to do is add authentication, API key. And we're going to go up to API key, we're going to click custom authentication, generate the key, copy it, come back over, paste in our key here. And then we're going to change this from basic to custom and then just add in authorization, then update authentication. So now the tool should be all working. We're just going to test it out and see what it says. We're going to say, I would like an AI agent for my business. That's great to hear. An AI agent can help streamline your business operations. Would you like to discuss your specific requirements and how we can assist you in creating one? If so, booking a free consultation with us with this link. And then it's given us the link, said let me know if you need any further assistance. So we're going to ask it one more question, just see what it does. We're going to say, where are you based? We are the base— we are based in the UK. However, we work with businesses globally to provide AI solutions. Would you like any further assistance? Perfect, that's exactly what we wanted to do. It's doing everything we want. So now all that's left to do is to add it to our website. So we're going to click publish. Yes, publish our agent. And then we're going to go over to Deploy Website, and then here we can customize our chatbot widget. So how it's going to look, so it's going to ask for a widget name. We can just say Autonomous— Autonomously Virtual Assistant. Widget description, we're just going to keep it simple and say— we're just going to say Virtual Assistant for Autonomously. Let's pick a color, um, I'm gonna make it a nice blue like that. Then we can upload a logo. Okay, so I've uploaded a logo. And then just a starting message, 'How can I help you today?' I think that's fine as it is. You can add some conversation starters if you'd like to, but I'm not going to. And then, yeah, that's all that's left to do. We can preview it if we like. So it's down here, 'How can I help you today?' So that's how it's going to look on our website. Looks perfect to me. So let's come out of that. And we're going to go create deployment. Okay, so we're going to get this block of code, and I'm going to show you what to do with that code. Okay, so as you can see, I'm inside Wix, which is the CMS I chose to make my website. But if you're watching this video and you might be using WordPress or Squarespace or something similar, then don't worry because it's a really simple process and it's pretty much the same on every CMS. So you can still follow along and you'll still be able to figure out how to do it on WordPress and Squarespace and any other CMS. So all I've done is I've come down to Settings, I'm going to go to Custom Code, I'm going to go Add Custom Code, and then we're going to paste in that snippet of code into there. Name it, we can just name it whatever, it doesn't really matter. Chatbot. And then all pages, yes. And then for the place, we're going to go body to end, and then apply. And now as you can see, it's in there. And this might take a couple minutes for it to show up on your website, but it will show up. And now if your website's on WordPress, which majority of your websites probably are, then what you can do is you can go into the header of your website and you can add in a custom code block. It should either be called custom code or custom HTML, something like that. You can add that into your header, paste in the code, so the code will be invisible, so no one's going to see it in your header. And by putting it in your header, it just means it's going to be on every single page. Yeah, if you're using WordPress, that's how you do it. So it's also really simple. Okay guys, so as you can see, I'm on my website now and Our chat widget has appeared in the corner. It's only— I've only left it for about 30 seconds, so it did actually appear quite quick. And we're just going to test it out and see how it works. How can I help you today? What services do you offer? At Autonomously, we specialize in autonomous agent creation, AI tool development, and chatbot development. Would you like to know more about these services? I'm going to say I like the Sound of chatbot development. I like the sound of chatbot development. Let's see what it says. That's great to hear. We can certainly help you with chatbot development. Would you like to book in a free consultation, discuss your project in detail? If so, you can do here. So it's given us the link. That's perfect. That's what we wanted it to do. So yeah, that's how to add ChatGPT to your website. It's super simple, and I hope that you found some value in this video. And now if you do want to go ahead over to my website www.autonomously-ai.com. It should be in the description of this video and in my profile description on YouTube. So if you do want to go over to that and test out this bot and just see how it works, and if you do want to book in a free call on that, we can go over how to integrate AI into your business somehow. It could be with a chatbot like this or something more complex or something completely different. But if you go in and book a call, we can just talk about it and see what we can do. So not a very long video today, but I hope you found some value in it. And if you haven't signed up for Agentive yet, or even heard of the platform, then I highly suggest that you go and sign up and use it now because it's free at the moment. And I don't think it's going to be free for long because it's a very powerful platform. And yeah, you can do some great stuff with it. You can also integrate, as I said at the start of the video, into WhatsApp, Instagram Messenger, things like that. So it's a really, really useful software and it's free at the moment, so I'd definitely try it out. So if you made it to the end of the video, then do consider subscribing. And if you've got any video recommendations that you'd like to see in the future, then just put them in the comments of this video and I'll try my best to get around to them.