ChatGPT Answers Your Form - Webflow Automation using Make [2023]

so I've been playing around with AI and I wanted to bring it into the webflow universe for you as a webflow Creator to be able to use it on your website we are going to use AI to respond to our users sending feedback through a form directly on the page right and we're gonna use make formerly known as integromat to glue those together right so um user comes in sends his feedback into the workflow form I'm gonna send that feedback to make which is going to send it to open AIS API which is going to respond with an answer based on the feedback of the user considering all the details right the name the email address the the feedback and then we're going to send that information back to to the screen of the user using a web hook to be able to thank him for his feedback and give a very individual response right I think that's actually quite interesting and quite useful especially if you're into um leak nurturing right um anything that has to do with e-commerce anything where money and conversion rates are important so let's jump straight in so just to give you a quick demonstration right I've got this newsletter sign up from right where people can sign up then I'll usually send them to this thank you page thanking them for signing up right in some cases people have feedback questions um I just want to talk to me really right so I created this feedback form where you can put in your name your email address and some feedback and we're gonna just try to do this right now so my name is Tommy my email is going to be Tom tom.com my feedback is going to be um hey Marvin thanks a lot for your photos I just subscribed yeah YouTube channel I'd love to love where I can find your English attendance thanks I'm going to send that through we're going to see a little loading screen and then it says thank you Tommy hi Tommy Marvin here I truly appreciate appreciate your support and I'm glad you find my content helpful you can find my notion templates in the resources section on webtotheflo.com if you have any further questions feel free to reach out and I'll give you I'll get back to you as soon as possible isn't that awesome so the user had feedback and I was able to help him right on the spot and not only that I still collected his feedback right so I can now find the feedback right here hey Marvin thanks a lot for your content blah blah blah and I've got his name I've got his email address and I collected the date right so that's what we're going to to build today um that was just a quick overview let's let's get started hey guys I just wanted you to know that I um right now starting to offer these services to my clients as well so I am looking for two or three um testimonial use cases so if you are interested in one of those automations um let me know you can find the link to uh my contact details on on the website so feel free to reach out to me anytime for this tutorial we are going to use make make is actually one of my favorite tools when it comes to automating stuff I've been using it for I don't know two two and a half years or so um it's been great it's a it's the I would say the main competitor to zapier but in my humble opinion um it is actually zapier on stereo it's because you have so much more control over the flows you can go multi-path as well and I just prefer the UI right so you can see the flows and how the data is actually moving from one part to the next and they've got a free tier so you can start using it for free the link is in the description feel free to use it if you have an interest interesting use case for some fancy automations contact me right I'm open to hearing any any cool ideas and happy to help you create your automation so let's jump into it I am going to create a new scenario and how you could go about it is you just click on the plus sign and search for webflow right so um you have a lot of options using webflow you could for example just watch events um but I found it to be more difficult to go that route actually so instead what I recommend you to do is use a web hook right and I am going to use a custom web hook and you can just click on ADD and it's going to create a web hook and then you have that address right here and you can use it right so as soon as you send a request to that URL um it's going to receive that [Music] I didn't talk to Siri we're going to send a request to that URL so you're just going to copy it um but okay first maybe you need to understand how this actually works so when the user types in something into webflow we are not going to use webflow to send that information instead we are going to use code to send that response to the web hook right so we need to embed some code into webflow and for me honestly um the easiest way is to just go ahead and write the code right but since I know not everyone who uses webflow is a code as well we are going to use chat GPT for it I am pretty sure you're going to have access to it so let's inspect this form if you go into the inspector you can easily find the whole code for the form I'm going to click on edit as HTML and I'm going to Simply copy that code right now I'm gonna go to chatgpt and for this I'm going to use chat gpt4 I'm going to put it into English and let's type in action s here is the form I'm going to paste in that form and here is the web hook right and then you're just gonna go back take that webhook and paste it in boom let's see what we get chat GPT is actually writing the code right here on the spot very interesting stuff so it's taking the email form and adds an event listener to it as soon as it's submitted it prevents the default action which means that it's not going to send the data the usual way right so workflow usually just sends an email to your admin email address it's going to prevent that and then it's gonna take the form data and puts it into a variable it's going to send a post request to the hook we just defined with the form data then it's going to wait for a response and just gonna console log the data right if there's an error it's gonna console log the error but we're not going to stop here because I actually want the response to go into this area right so I'm gonna inspect it and I have been giving this uh div in ID of result right so you can just go into webflow right go on your element and give it a ID right whatever ID it is you can now go to chat GPT and write it um so again it's gonna write that script for me let's see if it actually understood my prompt sending the data then responds if okay document get element result right text contact jsons yeah okay so now as soon as we are fetching back the response it's going to take that response and puts it into our result placeholder right easy so now I could actually go ahead and take that script down here right um put it on my website into a embed element and save it so um but I'm not going to do that because I already prepared something for my individual use case I don't know what you are going to do with it but I am going to provide you exactly the code that I've been using down in the description right so um let's let's walk through this real quick um so it's getting the form it's getting the heading um actually what I did is I added a loading element right so that was the loading Circle you just saw the way I did it is you can see it right here it's just a Lottie so you can click here um go to Lottie animation put it in and then you could go to a place like lorifiles.com search for a loading animation and just grab one right I think this was the one I've been using I just changed the color a little bit then you can go ahead and download the Lottie Jason and the Lottie Jason you just paste into webflow into your plotty element and that's it right then you can go ahead and change it to Loop so check that box here so it's always plays and you can play around with the duration if you want the code actually actually takes that element and make sure it's not visible in the beginning right so it displays it to none and then it's starting with the Event Event listener for the form actually so prevent default um it's getting all the values then as soon as the submit button is pressed it's gonna hide the form it's gonna display the loading element right the little loading screen and it's going to change the heading to thank you name right that's the heading I've been I've been using for that so you can do that I think it's pretty cool actually and then I put all the data into one variable right so name name and that's a Json variable so now I'm gonna send that to my web hook using the data I've been defining and I'm gonna wait for the response as soon as I got the response I'm Gonna Cancel lock it just to make sure that I can see it I'm gonna look out for the result element and if I find the result element that's just a security thing so it the script doesn't break if I find it I'm gonna um display the body of my response and I'm gonna hide the loading animation right if it doesn't work just show me the error and a little catch in here right so that's pretty much it I prepared this script using chatgpt as well I just fine-tuned it so let's save that and publish it and then we're good to go right so this is how it should look then we don't see the loading element but if I go into the codes you can actually see the loading element is here just not displayed so if I change that to block you can see it easy right so now that we've got the code we've got the web hook we can send our actual data into the web hook right so what I would do is I would click on read data read data mine data structure so it's waiting for something to be sent through then I would go into my form and send some data and then webhook is the web hook and make is going to know how your data is going to look like in the future and you can use those variables from the data right so how this looks is um something like this so I'm gonna click here on redetermine data structure I'm gonna send something through term at tom.com hey this is a message not a robot sent this through and now you can see it got accepted which means that the web Hook is accepting the post request right so if you go back we can now see successfully determined and now we know if we go into the next one we can see the variables right so we can see okay um we've got feedback we've got email we've got name we've got a header right so that's now the stuff we can use so um I would go ahead and send this through to open AI right and if you do not have an open AI account yet I recommend you to create one this is needed for this to work right so you can click on ADD and you can find your open AI key when you copy that link and open that web page so um in order to sign up for openai just you just go to open AI and click on sign up and then you're gonna be asked a couple of questions you're gonna insert your credit card to be able to pay those um prompts and requests and completions right the way this looks is it's not that expensive right so it's really it's just a it's really cheap I've been using it a bit what's yeah this is from today so I don't know I've sent maybe 15 requests today and I am paying three dollar cents which is not a lot right down here you can find your API keys and um yeah that's pretty much it okay so you got your openai account you put in your API key you put in your organization ID which you can find down here and you're good to go now what we want to do is actually create a chat completion right why because we're going to be able to use gpt4 gpt4 um when it comes to answering user requests and feedback and stuff it's quite important to be able to make logic work right to understand the request properly I would recommend GPT 3.5 for like really easy and um how do you say like four requests and prompts that are going to be always the same basically but here with a feedback form I don't know what the user is going I'm going to type in so I want the AI to be able to understand what's been put in there correctly and I just made yeah I don't know gpt4 just made um gave me better responses all over all right so now you can add a message and I would say you start with a system prompt which means that you're gonna just tell the AI how to work here and how to understand the following conversation right so you can type something like um the users and you're going to type in all the information you basically have right so you can type in oh my user is gonna um sign up for a newsletter and land on that landing page on that thank you page then some users are interested in giving feedback or have questions right you as an AI are going to answer those questions to the best of your ability if and that's that's actually quite important if you don't have an answer to the question of the user just say that Marvin is going to get back to you as soon as possible that's the simple prompt and I can show you what I've built in here right you're a helpful assistant name which is the name of the user sending the feedback filled in a feedback form from webtotheflow.com a website for Freelancers blah blah blah um name in this case Tommy is writing from and I've put in the header value um this one right here so the country where is sending the feedback from might be helpful for the for the request right your goal is to write response on the feedback a response based on the feedback in the name of Marvin the website owner explain your gratitude for the feedback and try to help if possible if you do not know the answer to a question let them know that I will get back to them as soon as possible right no more than four sentences right because I want to have the answer real quick so the next item is going to be a user role and the message The Prompt is going to be here's the feedback message from Tom for example hey Marvin thanks for your content where can I find the notion templates and then write a short response thinking for the feedback right I'm going to put in a Max of 2 000 tokens which is going to be more than enough for for sentences right because our input is quite short as well and I put the temperature to 0.8 which means that it's um it's going to be limited in creativity right so but you can play around with it maybe try a 0.4 or 0.7 even on point nine um but yeah that's pretty much all that we need then what did we just say right um we sent that information to make we have that prompt ready then what needs to happen we basically need to send that information through make back to webflow how does that work we've got a web hook right here and we're going to use a webhook response right here right so you basically can click on web Hooks and then webhook response right so let's look into the prepared one status quo 200 which just means that it's accepted the body right so I'm just gonna take the go into the choices of openai open up the message and then I'm gonna click on content and that's what we're gonna send back to webflow the content type is going to be application Json click on OK and this right here is already going to send back the information to to workflow right so that we can see the response right here but I wanted to go another step just to show you that really anything is possible here right so after sending the response back to the user he's already happy I'm going to send that information through to Google Sheets right so what I did right here is I connected my Google Sheets account my my Google account um I have set up a spreadsheet right a GPT test I have to choose the sheet name which is feedback right so you can see it right here feedback and then I'm gonna um I've created headers as well so feedback name email date and in there I'm just gonna say Okay add a row right so the actual element as actual Google sheets you're going to open that and you're gonna add a row right and then you're gonna choose your spreadsheet and so forth so we got feedback in there we got the name we've got the email we've got a created date which I simply take from openai I think it's oh yeah it's right here right so just so that I know when the feedback was sent and that's pretty much it so um immediately as you can see here as soon as the user sends the feedback it's gonna come into this webhook it's going to send it over to open AI which is gonna respond with an answer based on our prompt right so the prompt here is the important part make sure to put some put some brain work into this prompt because um it can vary a lot right so that response is going to go back to the web hook response into webflow the user is going to see it be happy right hopefully he's been helped right on the spot and then we send everything over to Google Sheets what we could actually do as well is add something else to it the response right so I'm just going to rename that column to AI response so that we always know what the user already saw might be important right so now we can actually um play this right so I just started the you don't have to do this by the way you just can turn it on and it works but I manually started started it to show you how the data comes through right so if I open this side by side I'm simply going to type in okay who's in today it's Ben Ben and ben.com right um hey MAV it's been a pleasure subscribing to your YouTube channel where can I find your notion templates also I'd be interested [Music] then to finding out more about your service office thanks that sent us through now you can see the data came in open AI responded the web hook sent the information back we got the message here thank you Ben hi Ben thank you for your kind words and for subscribing to my YouTube channel I appreciate your interest in my notion templates and service offerings I'll get back to you as soon as possible with more information on both topics cheers Marvin what a great answer and the user is going to be happy because he knows oh well he took the time to actually you know um no people are people are going to guess that this is automatically created because I'm not obviously able to respond to all messages immediately but also we sent that data through to Google Sheets and if you click on those little one signs over there which means this this is one operations by the way you can see all the data that came in and all the data that went out right so it updated a couple of sheets uh one sheet with a bit of data and now we have everything in here here's the feedback the name the date email and also the response which is awesome so just imagine how much you can do with those kinds of automations and I'm here to tell you this is a once in a lifetime opportunity um this thing right here is so powerful I have so many ideas on how to implement it into big businesses please hook me up let me know if you're interested in some of those Services because it's actually really fun building them for me and for clients as well so that's basically it I really hope you enjoyed this tutorial let me know in the comments if you learned something today and um if you're interested just go ahead and go to the website webtoflow.com fill up fill out the form and um let me know alright see you in the next one

Channel: Marvin Aziz

Views: 1,491

Keywords: webflow, chatgpt, automation, webhook, ai, openai, tutorial, webflow tutorial, ai automation

Id: iBYAbrUdDJM

Length: 30min 57sec (1857 seconds)

Published: Tue Jul 04 2023