How to Integrate a Custom GPT Into Your Website (Step-by-step Guide)

in this video I'll show you how to integrate a custom GPT into your website in my previous video we built a custom GPT using a GPT Builder if you haven't watched it yet I recommend watching that first but by the end of this video you'll have a clear understanding of how to add a custom GPT to any website I'm going to show you two methods for this integration the first one requires no code at all the second one is a bit more advanced but you don't need any technical background I will provide you with a stepbystep to tutorial all you need to do is copy and paste exactly what I show you on the screen and all the necessary templates will be provided in the video description before diving into the tutorial itself it is important to understand the difference between gpts and assistant API while they are fundamentally the same their intendent applications are different gpts are designed as b2c or business to Consumer products suitable for Consumer facing applications they allow you to create a GPT with custom instructions custom knowledge base using usually for personal use within CH GPT on the other hand the assistance API is B2B business to business aimed at business facing applications it also has the same custom instructions and knowledge base but it can operate programmatically meaning you can build a code to call this assistance via API this enables its integration into various applications websites or whatever it is that you build and this is what we are going to do we will use a code which will create the assistant then we'll connect it to a chatbot Builder and then will put it onto a website of course there are many startups that have already built all that integration and for a subscription fee they offer a userfriendly interface where you can add your custom instructions and knowledge base and add your GPT to a website with a few clicks as an example I'll show you chatbase doco which you can access using the link in the description below for this tutorial I'll use this sample website and my goal is to add a customer support chatbot which would be trained on my knowledge base and connected to a GPT model so once you've signed up you can click the new chatbot button and the first thing to do is to add your knowledge based files just drag and drop and click create chatbot and that's it the chatbot is created it is trained on the file I just attached and it is connected to a GPT model now I can customize it and then add it to my website so I go to settings model and here just as you add custom instructions in a GPT Builder this is a window where you can add your custom instructions as well there is a default one which you can leave but I'm going to replace it I have it prepared so I'll just paste it okay here you can see the GPT model that is being used on a paid plan you can select GPT 4 Turbo but with the free trial there is only GPT 3. 5 turbo available so I just click save when you go to sources tab an interesting feature here is that apart from adding files with knowledge you can also just add your web website URL and it will craw all the links to gather the knowledge from your website directly so it might be very convenient in some cases but in my example I will just use the knowledge document that I uploaded in the beginning and we have now customized our knowledge base and instructions if you go to settings and then chat interface you can modify the appearance of the chatbot on your website so you can edit the initial messages you can change the theme and you can upload the chatbot profile picture at the this display name and so on once you're happy with your chatbot design let's click um embed on site and then make public all we need to do now is copy this script and paste it into our website code so I'm just scrolling down to this section with script paste that piece of code and save now when I go back to that sample website the chatbot icon has appeared uh let's ask it a question to see how it works what are your membership options and it provides us with a piece of information contained in that knowledge file that I added at the beginning that's it our goal is achieved right chatbot is there it is working it is connected to a GPT model obviously there are some disadvantages to using third party services like this one first there is the cost Factor you have to pay their fees because they need to generate Revenue second there is a lack of flexibility comparing to using your own code they decide which GPT model is available to you and also you cannot perform any advanced interesting actions with that assistant API because you simply don't have direct access to it so now let's go through the second method creating an assistant API directly on the open AI platform connecting it to a chatbot and then integrating it into a website our goal remains exactly the same we are going to build a custom knowledge based chatbot that serves as a customer support assistant on our sample website this process involves two main components the back end and the front end for the back end we'll use RIT which will host the code that implements our chatbot functionality for the front end we'll use voice flow to design and build the chatbot interface we will then link ret our back end with voice flow our front end allowing them to communicate with each other through API calls I understand that terms like front end backend and API calls sound a bit technical but there is absolutely nothing to worry about you'll simply have to copy and paste what I demonstrate and there is no need for you to write a single line of code to get started you need to sign up for rate and copy the code provided in the video description I also want to give credit to Liam otley the guy who actually build the code and shared it with the community it is very much appreciated so in order to duplicate that code you need to click Fork right here give it a name and click Fork rapple here's the codee it will create a new system or low an existing one it will start conversation threads generate response and so on and so forth if you are interested in understanding how this code is constructed here's an idea copy the whole code and paste it into chat GPT and just ask for an explanation this is an excellent way to learn if if that's your goal but if you just want to use it to add a custom GPT to your website the only thing you actually need to change as always is custom instructions plus knowledge so custom instructions are this part you can delete it and type your own instructions and the knowledge document is here on the left hand side the same thing you can delete this sample and paste your own text one more thing you need to do here is add your open AI secret key to do so go to platform. open.

com if you think of chpt as a customer facing openai product this platform is business facing it is specifically designed for developers first go to settings then billing and add some credits to your balance otherwise you won't be able to use gp4 turbo model you still have to pay for using open AI assistant API but doing that directly would be much cheaper than using sord party Solutions as we did in the first method after adding some credit balance go to API keys and click create new secret key give it a name and click create now copy your secret API key go back to ret paste it here as a value and click add secret that's it our back end is set up now each time you run this code it will first check if an assistant Json file exists if not it will create one so the first time you run the code the assistant will be created and for all subsequent runs the code will use the existing assistant so if you go back to the open AI platform you'll notice that you have a new assistant created using those custom instructions from our code and that knowledge document that we have in our ret okay the second part is setting up voice flow this is our front end our chatbot builder in the video description you'll find a template file which you can upload directly to voice flow once done the only thing you need to change here is adding your replit url to enable the communication between the code in replit and voice flow so just click on this create thread box and paste your url to find your url go back to replit click new tab and copy this URL from the new tab paste it in voice flow and make sure in the end it has slash start then click on this generate response box paste the same URL but this time instead of SL start make sure it is ending with Slash chat all right that's it you can run a test to see how it works let's ask it when are your opening hours and while it is working you can track what's going on here in the repit console so if anything is broken you'll be able to see it here our chatot replied correctly Neo James opening hours are Monday to Friday from 5:00 a. m. to 10: p.

m.