How To Solve ANY Webflow Problem With ChatGPT!

hey there Julian for memb saac here and in this video I am going to show you how you can solve virtually any problem that you run into in webflow using chat GPT so what we have here is just a div that is red and it's called block we have a button and we have heading one and what we want to happen here is that when you click this add block button it's going to add another new block to the page and then this number here is always going to be updated with the correct block count so that sounds like something that if you don't know how to code can get a little bit complicated and maybe you've tried using chat GPT before to help you with this but it got a little bit confusing and the reason for that is because Well Chad gvg doesn't really know what's going on in your web flow environment it doesn't have the context in order to help you solve the problem so what we're going to do here is take this problem make sure that we can put it into little pieces that we can tell chat gbt then we're going to get the solution from it and if we need to we're going to troubleshoot it along the way so anyways without further Ado let's get into it here so in web flow first things first I need to look and think how is it that anyone let alone Chad jpt is going to know what it is that we're trying to do I can't just go to Ai and say hey I have a button and I want you to click it and then it it adds a new Block it's not going to know that so what do we have here first let's break it down into variables so we have the number we have the button and we have the block so the block is something that we're going to want multiple of them to be created let's just keep this class here that's called block then we have this button here and this is a unique element so let's give it an ID and just call it button and then same thing with this number let's just go ahead and call it number so now what we can do is take a look here and say okay when button is clicked I want you to create a new instance of block and I want you to update the number of number so let's go ahead now into chat GPT and start a new conversation and make that happen so here we are and we've written our prompt to chat GPT and what I decided to do here was to break it down into the first step and then we'll get to the other ones after I find if you throw a lot of things in either due to the fault of AI or due to the fault of yourself it just gets a little bit confused now what we've done here is first of all greeted Chad GPT said hello there my friend and then we said I would like to write a script which will do the following and this is a phrase that I use all the time because if we don't say that then it doesn't know what our page is where we're building our page and it might provide a couple of different solutions this way we're being very clear write me JavaScript which is going to do what I want so I almost always started out with that and then I say on my page I have the following dot block which means an item with the class of block hasht number which means an item with the ID of number # button which means item with the ID of button so now we've broken down and told Chad jpt this is everything that exists this is what you have to work with don't worry about anything else then we're saying the context which is that to begin at the start when the page loads there's only one block now what I want you to do is count the amount of blocks on the page and then update the number so we've given it all of the context and we've told it what we need to do now this isn't the whole thing we need to do but we're going to start with that so let's go ahead and just send that off right now and see what's get what gets sent back so as you can see here we are getting sent this and this looks absolutely perfect now one thing that I find quite a bit especially if you're somebody who isn't so used to working with code is that Chach PT will assume that you know how to work with code and if it does that it might just send you a little section of the script and explain to you how you can make that happen so the sentence please send me the full complete working script always helps with that in this case we're good to go the only thing that's missing is the script tags and you could ask chat GPT to add those in but you know they're pretty easy so let's just go ahead and click copy on that and then let's head back over into web flow open our page settings and we're going to get that code in there so first things first let's put in the script tags there we go now let's hit enter and paste in our code from chat gbt now let's hit save and let's go ahead and publish the site all right our site is now published let's see what we've got so now as you can see awesome it says one and that was updated from the script because there's one block so now let's go back into chat GPT and just expand on that a little bit the next thing that we want to do is make it so that when the button is clicked a new block is added so let's go ahead and write that prompt right now all right so now we have thanked Chad gbt for its beautiful work and we're saying I'd like to expand the functionality and the reason why I added that part is because if you don't say that it may give you a separate script which is sometimes good but in this case we want it to be one script Al together so I said I'd like to expand the functionality if I wanted it to give me a new separate script I would say now please give me a new script that does not affect the first one so anyways when button and I'm saying button and seems grammatically incorrect but I'm referring to it as button because you know I described it as #t button up here uh when button is clicked I would like to create a new block and add it to the page so let's go ahead and hit send and see what we get back so this one should be pretty simple shouldn't have any issues whatsoever let's see what we get back there we go so chat GPT has updated our script let's just go ahead and hit copy on that go back into web flow and paste it in hit save and publish of course and hopefully now what's going to happen is that when you click add block it is going to add a new block to the page and the previous thing is not going to be broken so as we can see the previous bit is working just fine and when we click add block it is updating the count interestingly enough but it is adding these right down here so let's go ahead and just try to do some troubleshooting to see why it is doing that so I think I have a suspicion about what it's doing right so it is adding a block as a child element of the body and again even if you don't know code this inspect element is your best friend because it can point out what is actually going on behind the scenes so we can see here that it is doing this we don't want that we want it to be going next to block so that means we want it to go into section main so let's actually go ahead and copy that class and then let's go back into chat jpt and tell it what is going wrong and what we actually want to happen all right so now we've explained that it is making block a child of the body and we want it to be a child of section main so let's go ahead and hit send on that there we go so now let's go ahead and copy this and paste it in our project and see what we've got this time all right so here we are let's see if it is working as we want it to so let's click add block there we go now as we can see it is doing exactly what we want it to completely correctly and it just took a couple rounds of talking with chat GPT so there you go now again just to reiterate what we're trying to do here is solve some sort of problem and we're trying to use chat GPT to help us with that but chat GPT does not have the same context that we have so what we're doing is making sure that we label everything in a way that web flow understands so IDs classes whatever it may be attributes even I use quite often and then we go to chat GPT lay out the environment tell it everything that it needs to know and then tell what our desired outcome is if it's something very simple like I just want the amount of elements to be displayed then that's it but if you have a multi-functional function feature that you're trying to make then if you do it in part Chad gbt is going to have a much much easier time so that is it I hope this helped let me know and I will talk to you soon

Channel: Memberstack Team

Views: 423

Keywords:

Id: m-qSPeCIzlA

Length: 8min 55sec (535 seconds)

Published: Tue Apr 02 2024