Add ChatGPT Chatbot To Your Website Using Zapier Interfaces | Tutorial
Let's build with Zapier and AI (100+ videos)📅 2023-05-14
Transcript
[00:00] welcome back to web Cafe AI where we do daily chat gbt and AI videos for your personal and your business life in today's video I'm going to show you how to add a chat gbt block directly into your website and it requires no code now in order to do this we're going to be using zapier's new feature interface and just for your reference let's go ahead and talk to our current chat gbt block which is a landing page we use here at web Cafe if you want to build out this exact type of landing page go ahead and check out that video right there where I can show you step by step how to build out this landing page but for now what
[00:32] we can do with these chat Bots now is fine tune them to get the type of answers we want so for example what are web Cafe services and then as you see here web Cafe offers AI Automation Services for businesses we have three service tiers at different prices 250 500 a thousand USD even gives a link to the website as well as you see here this is going to be a fine-tuned chat bot that's going to be able to answer question inquiries directly on your website so for another example here
[01:02] we could be what would be the best service for my restaurant and you can already see this is taking chat Bots to the next level when it comes to customer uh you know retention getting cold calls cold clients coming onto your website now they're able to chat something that is fine-tuned for your business so as you see here thank you for your question we offer a range of a Automation Services that can be tailored to be specific in these two restaurants including chat Bots virtual assistants order tracking customer
[01:34] service Automation and more determine the best service for your restaurant you we would require more information about your business goals and needs for instance if you're looking to streamline your order processing or order tracking and so on you can see there's a lot of potential here you can get some deep conversations so let's go ahead and learn how to do it to do so we're going to use zapier's new feature interfaces so we're going to go ahead and click interfaces here and then from here we're going to go ahead and create a new interface now if you already like the content you're seeing so far make sure to subscribe as I plan on diving in a bunch of tutorials
[02:05] when it comes to Ai and this new feature in zapier as we're going to be able to do so much stuff for your business and optimizing it for now we're just going to say start from scratch as we don't need one of the preset templates we are just looking to make a chat bot which I'm then going to take and integrate it into our current web Cafe site all right perfect so this is what the interface looks like when you start from scratch what I'm going to want to do today is I'm just going to set up a simple chat bot so I'm going to hit chatbot here say yes and then essentially let's start fine-tuning this chatbot to how we want
[02:35] it I'm gonna go to the settings real quick though because I want to make sure that we are matching the theme of the site I'm about to integrate into so let's go ahead and use the AI theme generator to reset how we want this chatbot to look like all right for web Cafe our main primary color here is going to be green so we went ahead and put the Pantone in there and then modern and Sleek let's see what zapier can come up with all right so I really like how this one looks I'm gonna go with green primary and then one other thing I want to make sure we do is that the page background I'm going to want it to match the current page background of our main
[03:07] website here so I'm gonna grab the color of this real quick this will make more sense as we get throughout this tutorial but I'm gonna go ahead and up that to that and then perfect we have what we're looking for when it comes to the design look of our chatbot now let's go ahead and start editing our chatbot so we're going to just hit edit here and then I'm gonna change the chatbot name to web Cafe dot Ai and one thing I want to point out is in the future we're going to be able to connect data sources on here so maybe you want to Chuck in a PDF to send to potential people chatting with the chat
[03:37] bot and so on we're going to do more stuff on this later here at web Cafe so make sure you stay tuned and other stuff is that we can set up actions which we're not going to do in this specific context but we could set up in theory a zap that automates something when someone is discussing the chatbot but for now we're going to go ahead and change the chatbot name to webcafe.ai and then you can either have a generated or static I'm going to say static I'm going to say how can I help you today I'm going to say do you have any questions about web Cafe
[04:11] question mark and that webcage we're gonna do web Cafe and then from here we're going to go ahead and either change this placeholder to whatever we want I like how it says ask me anything that's good for me from there we're going to do the most important part of this tutorial which is going to be the directive but let's make sure we want anything else you can change the width here so maybe you want to narrow a little bit smaller maybe you want it really wide I think in the context of what I do what I plan on doing here which is I plan on putting it right here I'm going to choose narrow and then Center left or right
[04:45] I'm just going to stay with center for the alignment and then from here you can add a little disclosure saying this is an automated chatbot response so people maybe don't think that they're talking to a real person and what we can do here is set up the most important part of this tutorial which is going to be the directive let's identify let's fine tune and do this with no code all right so the first thing you're going to want to identify is what is this chatbot so for me it is a web Cafe AI customer support agent if you run a construction business a real
[05:15] estate business whatever you run put your branding name and put customer support agent if you're going to use it in that context whatever context you plan on using this chat bot identify who it is as an individual so now we need to do the next block here which is going to be context so go ahead and add a context block here for me the context is web Cafe is an AI automation agency answer any questions the person filling the form may have now it knows who it is as an individual it understands the context and parameters it's working within let's add one final block here which is going
[05:46] to be the business information identifying what is web Cafe now we have our business information block for me it is essentially setting up web Cafe Services which is essentially offering three tiers 250 500 a thousand USD and it caters to various business needs providing scalability and flexibility add as much information as you want here you want to give the bot enough to work with so it understands the context of the services of that the business provides for example you may run a you know digital marketing agency you want
[06:17] to say we do SEO web development PPC these are our prices this is what typically happens and so on and from here we're going to add one last important block here which is going to be your contact information well the reasoning we add a customer service block here is because of the fact that if an individual is already talking to a customer service agent there's a high probability that that person is going trying to basically ask hey can I get in contact with someone I'm interested let's do something now if you give the bot essentially hey this is our email this is our phone number it'll be able
[06:49] to provide that within the chat and you essentially don't hit a dead end at a potential lead that you could convert on lastly you want to make sure in your zapier account you are connected with an open AI uh connection simply adding the API key from openai to zapier if you're not familiar with that process you can check that out on all my videos here which we show a whole implementing process but from here we have set it up to the extent that we want I would suggest leaving the creativity level to 0.7 you don't want to have 0.1 it sounds uh too bland you don't want to add one
[07:20] because it might sound a little too crazy for now let's leave it at 0.7 everything has been set up how I want it to be set up we're going to go ahead and hit share here but we're not going to use the link we're going to use the embedded feature here and we're going to go ahead and embed this into our website due to the fact that this is a public video I am going to restrict the domains to essentially just only run this model on web Cafe Ai and from here we have basically you set the frame height frame width for now I'm going to keep those as default and then whether to include the
[07:52] page background or not now that we have all that we can go ahead and copy this we're going to say Den or done and let's go ahead and jump over to our main web development software which is webflow if you feel like you've learned something so far in this video make sure to like the video it helps us here at web Cafe Ai and is completely free let's do some a little bit of web development here so we can go ahead and Implement what we're looking for here now whether using Shopify WordPress there is typically always an option for you to add like a custom HTML block or custom color Block in the context of webflow it's just
[08:24] called embedded so I'm gonna go ahead and embed this here well actually let me back up a couple steps I want to kind of embed it a little below that so I'm going to double click here I'm going to and paste that code that we just got here and then at least for webflow it doesn't show it right away it only shows it if it's published so I'm going to go ahead and publish this publish selected domains and then let's go ahead and jump to the live site we may need to adjust how this looks but for now let's still go ahead and see if it works all right so we got
[08:54] our first version here obviously let's do some tweaks the first thing I'm going to do is going to go ahead and get rid of this build on zapier the second thing I'm going to do is make the height of the underlying HTML smaller and then the third thing I'm gonna do is make sure that it Blends better with the background so there isn't this differentiation in color tone before I do that though let's see if it works hello where are you hello I am a customer support agent for
[09:25] web Cafe a company that offers AI Automation Services for businesses how may I assist you I want to contact an agent and then there we go so as you saw with our customer service block it was able to give an accurate email and then you know obviously give some nice context and then you have these little whether it's helpful or not for your data and from here let's go ahead and make those changes so this looks a little bit better on my side of the site okay so the first change we want to do
[09:57] here is we want to come down to branding and we want to change display the built-on label this does require you for you to use the paid version of interface which is around 20 USD so I want to give that real quick um overview on that but we're gonna go ahead and take that off the next thing I want to do here is I'm going to go ahead and hit share again I'm going ahead and actually lower the frame height let's go ahead and do 300 and then from there we're going to say no on this let's go
[10:27] ahead and see what this would look like okay so it went ahead and upped the changes a little we don't have the built-in zap here we've changed the height what I'm gonna do in my end is I'm just going to keep tweaking this until I get something I like I'm starting to think I don't necessarily want this in this tight compartment as I kind of want to focus on my lead magnet here I'm gonna go ahead and drag this down here manipulate it a little bit more and get a better look and feel for launching onto this page okay so I went ahead and made those little touches and as you see here we have our chatbot it blends with the
[10:58] background so it looks good there and I can go ahead and proceed and ask it questions hello uh how can AI automation help my business and then as you see here it has a little nice scroll bar that it uses so it allows me to basically not have it so it just keeps extending the web page and it just condenses it here and as you see here comes up with these nice little responses and it's fine-tuned specifically to my website and the
[11:31] services we provide here at web Cafe now if you yourself as a business is interested in web Cafe ai go ahead and click the link down below and fill out that form and we'll get a free audit for your business but without further Ado make sure to subscribe as we're going to go over a bunch of different AI automations and how AI can be used in the new feature provided by zapier interfaces without further Ado I'll see you in the next video thanks for tuning in and yes surprise I'm an AI Avatar make sure to explore
[12:01] more here at web Cafe where we demystify AI for your personal and business life until next time