**Step-by-Step Guide to Publishing Custom Chatbots on Websites**

In this tutorial, we will walk through the process of publishing custom chatbots on websites using our free software, Gen. This guide is designed to help you understand how to get your chatbot up and running on a website in just a few minutes.

**Publishing the Widget and Deploying it to a Website**

First, we need to publish our widget and deploy it to a website. To do this, click "Publish" and ensure that everything is correct. Next, go to "Deploy Website" and customize your widget by giving it a name, choosing a color scheme, uploading a logo, and selecting conversation starters.

**Customizing the Widget**

The widget can be customized to reflect the company's brand and style. You can choose a main color scheme, upload a logo, and add starting messages and conversation starters. These conversation starters will appear at the bottom of the chat window and can nudge users to interact with your chatbot in certain ways.

**Previewing and Deploying the Widget**

Once you're happy with the look and feel of your widget, you can preview it and deploy it to a website. To do this, go to "Create Deployment" and copy the code snippet that is provided. You can then paste this code into the script section of any webpage where you want the chatbot to appear.

**Deploying the Widget on a Live Website**

To see your chatbot in action on a live website, simply paste the code snippet into the script section of any webpage and save it. This will load the widget onto the page, and users can interact with it in real-time.

**Conclusion**

In this tutorial, we have walked through the process of publishing custom chatbots on websites using our free software, Gen. By following these steps, you can get your chatbot up and running on a website in just a few minutes and start interacting with users in real-time.

WEBVTTKind: captionsLanguage: enhey everyone Lee Motley here and today I wanted to shoot a super quick tutorial for you showing you how to put your custom gpts onto a website as a web chat widget in just a few minutes and without writing a single line of code we all know that you can build powerful gpts on the chat GPT site but at the end of the day they are stuck there and you can't be putting them in places that are actually more valuable for your clients so what I'm going to show you today will open up a new set of solutions that you can sell such as website customer support agents and website lead generation or even appointment heads that you can put on your customers websites I'm trying to keep this video a short as possible so let's get stuck into it so to start off you need to H to agentive hub.com which is my own SAS I've built this for you all to make it easier to do this exact thing which is take your custom gpts and put them on WhatsApp and websites Etc and we don't charge you a dime the only thing you need to pay is the open AI usage cost when you are building your custom gpts on a genive we are using the assistance API from open aai to allow us to interact with them programmatically so that you can actually put them different places without being stuck in the chat GPT site so that's how gent Works in order to get signed up you can go to the register button here I already have an account so I'm going to log in when you are signing up to agentive you will need to provide your own open AI API key so that we can programmatically create these agents for you and build them on top of the assistant's API for you so that's how gent of Works once you're all signed up you'll see the screen that looks a bit like this and we can get stuck into building your agents so we can come down and click create a new agent I'm going to call this um solar support then I'm going to select an API key just the main one that I set up for my account I want to use GPT 40 mini for this agent and now we are on our studio page which should feel familiar to when you're building your own custom gpts we have a prompt that you need to provide a knowledge base that you can turn on we're going to switch this on now and we have a section for tools as well we're not going to use tools in this video I'm just going to show you how to create a custom knowledge base and connect that to your agent and put it on a website so basically a a basic customer support chat B for a website so to start that off we can go to the knowledge base here I'm going to create a new knowledge base I'm going to call this the Smith's solar KB create that then I'm going to upload my file in this case I'm just going to upload one but you can upload multiple files each time upload that to the knowledge base now we've selected us solar KB we're not going to use any tools for this for Simplicity sake then we just need to write a good prompt for our website customer support agent and so to do this as fast as possible what I like to use is my AI agent prompt Rider tool here which I'm going to make available to you all for free if you want to get access to this which I use and it uses all of the best practices from my agency morning site AI whenever we build AI agents this is what we use um this is going going to be available on my free school community so you can sign up to that down below there will be a post for this particular video and it will include all the resources to copy this exact same build that I'm doing but on it most importantly will be this AI agent perfect prompt writer which you can take and use yourself for anything that you do so I'm just going to fill this out quickly get a prompt generated and pop it back into the editor there so I've quickly filled out all the fields on this now I can click run tool down the bottom I can click this formatted button here so I can get the raw text copy this over to agentive and paste it in now we have a perfectly written prompt with a roll a task specifics tools um examples and everything's good to go so we can jump in here and give it a test um what does your warranty cover and there you go you can see we're getting answers from our knowledge base correctly so now we can go onto the next stage which is publishing it and putting it on our website so click publish yes I'm sure now we can go to deploy website and now we get to customize our widget so the little bubble down the corner we want to customize that so it properly reflects the company's brand and also looks in line with the website as well so let's give it a widget name Smith's solar assistant um helping you with your solar questions let's choose a main hix color of like a dark gray I'm going to upload a logo here everything you need to replicate this build including the logo the knowledge based file the prompt and also the AI agent perfect prompt generator tool will be available on my school Community if you want to follow along now we can add a starting message so in this case I'll just keep it as how can I help you today you'll see what that looks like in a second and I think I'll put in some conversation starters like uh warrant information location so these are what we call conversation starters and they'll be appearing at the bottom which can nudge people to interact with your chatbot in certain ways and basically guide the user Behavior which is really handy then we have the widget size in this case you know what a regular size one looks like in the bottom right I'm going to go for large just to show you what that looks like we can turn off the agent of Watermark which we don't want to do um and we can autoload the widget on page load to increase the engagement so as soon as that person lands on the page it opens up and this creates more value for your clients that you sell these to because more people are going to be seeing it and interacting with the bot so once we've got everything lined up there we can preview our widget and here we have Smith solar assistant I'd like to click on this conversation start out of warranty information and there we go we have our answers coming back from the knowledge basee on our custom designed widget which we can minimize and like this now that we're happy with the look and feel and the functionality of it on the preview we can then go create deployment and then we have the code snipp it we need to go and put it on a website and once we have this code snippet we can copy this and put it on any of your client's websites you can scroll down to the bottom say in this example this is just a dummy website I'm going to use to show you if you scroll down to the bottom of any page that you want this to appear on we can just paste it into the script section paste it in there see where it says script script and there's a whole bunch of other scripts you want to put it down in this bottom area so it loads last you want to save that and I can boot it up we can see it action on a live website and there we have it we have our Smith solar assistant if I ask for the location we're going to be getting our responses back live on the website and we've got our handy little widget here or set up within just a few minutes so that's been a quick tutorial on how to get your custom gpts onto a website widget in a couple minutes using my free software gen this is completely free to use aside from your open AI API cost so we give you the lowest cost possible if you're' better to come on here and build these and learn how to sell AI solutions to businesses which is really everything that me and my team are trying to do for you all so please take advantage of this use it as much as you can this is really really just scratching the surface of what's possible but this is the key function of putting it onto the website I will let you explore with the prompting and the tools and the knowledge bases yourself if you want to watch another video that's more advanced showing you how you can make this a lead generation agent that can capture lead information for businesses and save it to a CRM I'll put that up here which I've done recently but aside from that guys that's all for the video thank you so much for watching and I will see you in the next onehey everyone Lee Motley here and today I wanted to shoot a super quick tutorial for you showing you how to put your custom gpts onto a website as a web chat widget in just a few minutes and without writing a single line of code we all know that you can build powerful gpts on the chat GPT site but at the end of the day they are stuck there and you can't be putting them in places that are actually more valuable for your clients so what I'm going to show you today will open up a new set of solutions that you can sell such as website customer support agents and website lead generation or even appointment heads that you can put on your customers websites I'm trying to keep this video a short as possible so let's get stuck into it so to start off you need to H to agentive hub.com which is my own SAS I've built this for you all to make it easier to do this exact thing which is take your custom gpts and put them on WhatsApp and websites Etc and we don't charge you a dime the only thing you need to pay is the open AI usage cost when you are building your custom gpts on a genive we are using the assistance API from open aai to allow us to interact with them programmatically so that you can actually put them different places without being stuck in the chat GPT site so that's how gent Works in order to get signed up you can go to the register button here I already have an account so I'm going to log in when you are signing up to agentive you will need to provide your own open AI API key so that we can programmatically create these agents for you and build them on top of the assistant's API for you so that's how gent of Works once you're all signed up you'll see the screen that looks a bit like this and we can get stuck into building your agents so we can come down and click create a new agent I'm going to call this um solar support then I'm going to select an API key just the main one that I set up for my account I want to use GPT 40 mini for this agent and now we are on our studio page which should feel familiar to when you're building your own custom gpts we have a prompt that you need to provide a knowledge base that you can turn on we're going to switch this on now and we have a section for tools as well we're not going to use tools in this video I'm just going to show you how to create a custom knowledge base and connect that to your agent and put it on a website so basically a a basic customer support chat B for a website so to start that off we can go to the knowledge base here I'm going to create a new knowledge base I'm going to call this the Smith's solar KB create that then I'm going to upload my file in this case I'm just going to upload one but you can upload multiple files each time upload that to the knowledge base now we've selected us solar KB we're not going to use any tools for this for Simplicity sake then we just need to write a good prompt for our website customer support agent and so to do this as fast as possible what I like to use is my AI agent prompt Rider tool here which I'm going to make available to you all for free if you want to get access to this which I use and it uses all of the best practices from my agency morning site AI whenever we build AI agents this is what we use um this is going going to be available on my free school community so you can sign up to that down below there will be a post for this particular video and it will include all the resources to copy this exact same build that I'm doing but on it most importantly will be this AI agent perfect prompt writer which you can take and use yourself for anything that you do so I'm just going to fill this out quickly get a prompt generated and pop it back into the editor there so I've quickly filled out all the fields on this now I can click run tool down the bottom I can click this formatted button here so I can get the raw text copy this over to agentive and paste it in now we have a perfectly written prompt with a roll a task specifics tools um examples and everything's good to go so we can jump in here and give it a test um what does your warranty cover and there you go you can see we're getting answers from our knowledge base correctly so now we can go onto the next stage which is publishing it and putting it on our website so click publish yes I'm sure now we can go to deploy website and now we get to customize our widget so the little bubble down the corner we want to customize that so it properly reflects the company's brand and also looks in line with the website as well so let's give it a widget name Smith's solar assistant um helping you with your solar questions let's choose a main hix color of like a dark gray I'm going to upload a logo here everything you need to replicate this build including the logo the knowledge based file the prompt and also the AI agent perfect prompt generator tool will be available on my school Community if you want to follow along now we can add a starting message so in this case I'll just keep it as how can I help you today you'll see what that looks like in a second and I think I'll put in some conversation starters like uh warrant information location so these are what we call conversation starters and they'll be appearing at the bottom which can nudge people to interact with your chatbot in certain ways and basically guide the user Behavior which is really handy then we have the widget size in this case you know what a regular size one looks like in the bottom right I'm going to go for large just to show you what that looks like we can turn off the agent of Watermark which we don't want to do um and we can autoload the widget on page load to increase the engagement so as soon as that person lands on the page it opens up and this creates more value for your clients that you sell these to because more people are going to be seeing it and interacting with the bot so once we've got everything lined up there we can preview our widget and here we have Smith solar assistant I'd like to click on this conversation start out of warranty information and there we go we have our answers coming back from the knowledge basee on our custom designed widget which we can minimize and like this now that we're happy with the look and feel and the functionality of it on the preview we can then go create deployment and then we have the code snipp it we need to go and put it on a website and once we have this code snippet we can copy this and put it on any of your client's websites you can scroll down to the bottom say in this example this is just a dummy website I'm going to use to show you if you scroll down to the bottom of any page that you want this to appear on we can just paste it into the script section paste it in there see where it says script script and there's a whole bunch of other scripts you want to put it down in this bottom area so it loads last you want to save that and I can boot it up we can see it action on a live website and there we have it we have our Smith solar assistant if I ask for the location we're going to be getting our responses back live on the website and we've got our handy little widget here or set up within just a few minutes so that's been a quick tutorial on how to get your custom gpts onto a website widget in a couple minutes using my free software gen this is completely free to use aside from your open AI API cost so we give you the lowest cost possible if you're' better to come on here and build these and learn how to sell AI solutions to businesses which is really everything that me and my team are trying to do for you all so please take advantage of this use it as much as you can this is really really just scratching the surface of what's possible but this is the key function of putting it onto the website I will let you explore with the prompting and the tools and the knowledge bases yourself if you want to watch another video that's more advanced showing you how you can make this a lead generation agent that can capture lead information for businesses and save it to a CRM I'll put that up here which I've done recently but aside from that guys that's all for the video thank you so much for watching and I will see you in the next one