How To Connect ChatGPT To Webflow Website 2024! (Full Tutorial)

yo hello everyone and welcome back to a brand new video take your webflow website to a new heights in 2023 by connecting it to chat GPT this comprehensive tutorial will show you how to seamlessly integrate chat GPT for more engaging interactive web experiences so guys let's get started before we start with this video make sure to watch it from now till the end so you have the full information so guys here it is webflow and here it is shot GPT so basically this is my webflow dashboard here you can find the marketplace as you can see right in front of you there is here apps if you want to go to apps and maybe in here you will be able to find chat GPT so in case you are very interested in searing you can simply click here and search for all the apps here uh if you can't app that you like you can can request if you would like to add chart GPT but in general wlo at the moment doesn't have chart GPT as an app so how can we add chat GPT into wlow without having it in the marketplace of PL itself and we all know that jpt doesn't have an app integration system in it we only have an API key that will help us to connect it to other apps so what can we do well in this video I will explain all of that to you simply the first thing that I will need you to do is to go to zapier.com then as you can see this is the website zapier.com and after that make sure to go to the left side menu you will find here apps make sure in the app section to search for webflow and as you can see here it is make a connection simply by clicking on connect and another small window will be open so simply here just choose your workflow or workspace authorize app and there you have it so now the connection has been made successfully but we don't know if the connection is actually good so let's test it by clicking on these three points and test connection as you might see the test is successful now let's get out and what we need to do is the same thing but with chat GPT this time it could be a little bit different so what we need to do is search for chat GPT and in here click on connect after that make sure to go in this window you will find API key required to create an API key what you will need to do is to head up to Open ai.com click on the login button as you can see and here guys click on API so in this page you can simply click on your personal account and then click on view API keys and here you'll be able to find all the different API keys that you have or create new ones if you don't want so for example webflow and and then create secret key the next thing to do is to Simply copy it and then go ahead to your zap your account that small window that has been opened paste it there and added a name so it can be easier for you to find yes continue and there you have it so it's very easy to connect guys it's not that difficult well after that do the same thing go to your connection and here guys make sure to verify it so let me just test not that one I mean that one okay and here it is it has been done successfully so my account is working so now what do we need to do we need to create a zap so a zap is basically the integration of the two apps together so now what's our we're going to do is when someone orders in my webflow store make a table with informations using charge GPT and send it to me per email and there we have it so now click on generate and when wait a couple seconds and the AI will give you the informations and basically this text box is a prompt which is basically a text that to describe what do you want exactly from this integration to do and now as you can see here the web flow there is web flow there is chat GPT and there is your email so this is what it's going to be New Order conversation with ch GPT and send the outbound email so will happen when an order has been sent to webflow a conversation shall be created with ch GPT to make this order as a table so we can know all the details organized and then the step three it will be sent to our email so we will get notified but here I we change that by Gmail so I can uh send it per my Gmail account not per uh another platform so let's wait a little bit and there we have it that is very good and even now since we have used Gmail now they give us the opportunity to even use the Google sheet so they are actually going to create a Google sheet for us which is pretty insane so now let's click here to try it out so now what you need to do is to connect every one of these accounts that you own for example we flow click on here to choose and choose your account it's very easy guys and there we go continue here just choose whatever site you have and for me for example I don't really have any sites at the moment let me just try another one continue here at at the same time here it is one of my sides continue and then it should be a test there but I don't really have any um order so it might not fine but in general um I can skip the test since I don't really have have any orders in my website so skip test skip test and it will turn this to a green light which is good for us now continue and do the same thing with chat GPT continue here continue the action will be using misses is the um comments order comments and then just like that continue this step wait a little bit here you exceeded your current codes up please check your plan and building details so in general here what they have told us is I have reached the maximum amount of API keys that I can connect and use so basically uh I have to upgrade my plan on open AI to the CH GPT 4 by clicking on upgrade plan and getting this one from here well this is uh kind of like worth it to have jpt plus but at the moment I'm not going to get it but you got you got the idea so we has to keep this as well and the same thing goes for cheat and for the Gmail you just have to connect your account and everything will be good to go and yeah guys this is how you can connect webflow to chat GPT I hope you guys enjoy this video and see you guys in the next tutorial

Channel: Easy Solution

Views: 1,281

Keywords: connect chatgpt to webflow website, how to connect chatgpt to webflow website, chat gpt webflow integration, webflow tutorial, webflow

Id: os5YabzSNc4

Length: 8min 17sec (497 seconds)

Published: Wed Nov 08 2023