Can AI Build Your Next Lead Magnet Quiz, ChatGPT vs Gemini Head to Head

This is the third video in the February series for the A-Speakers. Now, I want to mention that while I'm creating this content for professional speakers, you will find value in this if you aren't a professional speaker. You could be in any industry and this stuff is still relevant for you. So welcome, welcome to the video. So if you followed the second video, the one that was before this, we did use ChatGPT Projects and tested the quiz feature and it created great content for creating a quiz. And I thought to myself, you know what? I wanted to do the third video in the series about how can we actually code. Don't, don't worry. Don't get lost in here. Not forcing you to be a developer, but how can we use the coding feature within AI to build an online quiz? Maybe we don't want to buy another software and we have something like GoHighLevel. And that's the one that I use. It's the one that I use for a lot of different clients and it allows us to, to code it in something like ChatGPT or Gemini, and then just copy that over, especially if the, the tool or lead magnet is something that's going to be static, meaning you're not going to be changing it every single day. And you do all the heavy lifting here. So what I thought was how cool if we could put them head to head, what can Google create with the exact same prompt as ChatGPT? So the first thing we're going to do is we need to prep the information. So I'm going to make myself small, just like I did in all the other videos. Here. And just to recap, for those who haven't seen the video, either go back and watch it, or we're just going to summarize this. It came up with a lead magnet quiz for us. So what I'm going to do is copy that first part. It has all the questions in here. It's got all the scoring in here, right? So I'm going to copy that. I'm going to open up a Google Doc and I'm going to paste it in here, right? And this is just so we have this to be able to do one long prompt in the future. And then we're going to come down here and then say, here is the high converting landing page. Okay. So we're going to get this stuff, take the quiz section, section called action. There we go. So we're going to do that. Oh, not there. I'm going to put it in here. So this is the landing page. Okay. So what we're going to do is tell it to create. So it's easy here if we just do this in this document versus doing it on the screen, because there's a chance you're going to hit enter and it's going to go midway through the prompt. Right? So I want you to code a lead magnet quiz. Now I'm going to use GoHighLevel as the reference point here because the type of code and content it creates needs to be unique to that. So if you're like, hey, I'm just going to host it on my my web hosting, you can tell that it might use a different code for that. And if you're at the point where you're like, hey, I can get to this point and then I'm going to use my developer to help make it live. Perfect. They'll be able to work with it. But if you're just a DIY, let's say you're using GoHighLevel, this is how this is going to work. And I'll show you how you can actually put these on pages and landing pages within that system. So once you go to lead magnet quiz, that will be put on My GoHighLevel account as an HTML-coded landing page. So this is key because it needs to know it's formatted. Below you will find the questions, their answers. And the outcome logic. Now, transparency, I have not done this with this type of structure before. We're going to see if this works. This may completely bomb. And in that case, we just spent some time together on YouTube, right? This may not actually work, right? But I think, I think it will in here. So below we'll find the questions, answers, and logic. Below that, You will also find the instructions for content and design of the landing page. Create all the design and code needed to make this work. Okay. Good enough. So we're going to do is, so here's the stuff. Now you could go down here and say, you know, put a heading in here. This is quiz questions and logic. There's no reason why I did it all in caps. Just felt like shouting. This would be landing page. No, not page. Page design. Okay. So we're going to copy all that to the clipboard. Now let's go back to ChatGPT first. Right? So we're going to build this within that project, right? That we had there before. So to do that, we're going to go in here and we're going to go into canvas mode. I think that's what we're going to do. I think the canvas is going to allow it to code and everything that we need. If not, it's in the wrong spot. So we're going to just paste that in there. Now I'm not going to run that yet. I'm going to open up Gemini. Now if you've not used Gemini, very similar interface, left-hand column here and all this. I'm not going to create— they don't have a projects feature yet in here. Hopefully it'll come down the road. They have just something called gems, which are very similar to custom GPTs. But in this case, I'm going to go in here and I'm going to go to tools and I'm going to use canvas. Great that they're using both the same terms. Right. So let's go back, we're going to run them both at the exact same time and see what happens. We're gonna run that one. And we're gonna run this one. Okay, so let it do its thing here, it's thinking. And we had some, some music that we could go with. Now that went straight to putting in code. Now you may be looking at this be like, what the heck is it making here right now? So while it's doing that, I'm going to hop over to GoHighLevel and show you how we can actually take code like this and make it into a working website. So I'm going to go into our actual account, Blue Cow Marketing, and I'm going to go down to the funnels side and I'm going to create a new funnel. I'm just going to call this, um, sample quiz. And we're going to say create. Okay. So that's going to come up here and then we're going to go and add a step, right? So we're going to go quiz start and just create that funnel step. And because it's probably going to be building everything within one line of code, we don't necessarily need the separate steps unless you want to have a confirmation page. And then we can talk to the code to say, okay, when they complete the quiz, flip them over to this, right? But we're not going to get too complicated in that right now. So we're going to create from blank. That's what we want. We don't want to use a template. We don't do anything. We want a completely blank canvas. And what we're going to do is we're going to look for the block in here that says code. We're going to drag that over here. Now, by default, if we click on the outside ring and we look over here, let me move this out of the way. If we move over here and look at styles, we're going to notice there is some buffers in here. We want to get rid of every buffer that is in here, right? We don't— so there's the row and then you move it in and there's like a pink one and there's going to be a buffer on that. And what will happen if the buffer stayed in place is if there was any design elements like a background color, there'll be like a border and we don't want that. We want this to be as true as can be. Let me click on that and there's no buffers in there, right? So I think that's clean as can be. There's no buffers anywhere. All right. So leave that open. Let's hop back over and see how they're making out in the All right. Look at this long line of code. Holy moly. Look, it's still going crazy. Okay. So that's ChatGPT. It's still doing its thing. Let's look at Gemini. Oh my, look at this. So Gemini, this is what I like about Gemini. It shows you that visual builder that's here right now. So go in here. Is marketing still stealing 10 hours a week from you? Take the quiz, right? Click on that. And then it goes through and look at that. It's got the questions, right? Look at the little slider going, right? That is all done from this code right here. All right. So that being said, I could highlight all this, copy it, come back over in here, click on this custom code. Oh, one other thing I forgot in here. If I click on this, we want to want the general to be full width. We want it to go over full width. There we go. So we're going to say open code editor and paste it in there and click save. They would be like, hey, it didn't show up. Well, that's because it's only going to show this right here right now because the code has to load on the page. So we're going to click save. It's going to pop up and tell us to save it here, but we can go in here and just call this a sample quiz. We'll hit save. We'll hit save. And we'll hit publish. Now publish allows us to attach it to any domain that we have in here. Right. So I'm just going to pick one of my LP landing page domains. We'll save that to that and let it publish. There we go. So it's going to publish within the account. My phone just dinged and said ChatGPT has done its lead code quiz. All right. So from here, this should Load. Let's see. So there we are. So that is page is up and ready to go, right? So this is live, right on our domain right now. Take the quiz and go through all the steps. Well, this is fine, right? So we're going to do all this here. Let's just do all the stuff. Let's see if the logic does something right. You're duct taping together. Here's the next steps. All right. So all this stuff. Now let's look at the, the Gemini side of things. From this point, it just made the interface, right? The stuff's not being stored anywhere. We're not being notified that you can't run any actions or anything like that. Now what we can do is we can say, okay, let me just go back and refresh from the beginning here. We can go ahead and ask it to do things. This is called vibe coding. So now we can go ahead and say, okay, let's Let's change the heading or let's add our logo to the top. So if I go in here and I'm going to upload a file, I'm going to go find it in Google Drive. Find our logo. Where are we here? Logos. I do this all the time. You think I'd know where the logos are. So we're going to go and pick our main one here. We're going to say, I want you to add this logo above the heading. And then I could actually say what I want, what it is above the heading. Like that. Okay, so now I'm giving it that. It's going to put it in there. Now sometimes this doesn't show the image right away. It, it just puts a placeholder in there. What I've found sometimes is if we go ahead and take the logo, we'll see what happens here. And I'm about to show you a fix around this is because it's not knowing where to house that logo right now. It may just reference it from ChatGPT and what it sees that's in there. What you want to do is make sure that that version of the logo actually exists on the place that you are saving it. So I'm going to go back over here to our GoHighLevel. I'm going to go into our media library. And I got tons of files in here, but there should be a blue cow one somewhere. There's one right there. So we're going to drop this down. If not, you can always upload it. I'm going to say get link. Now it's saved a publicly available link, right? So that's what it did. That's a downside, right? That looks like crap. So we're going to say in here, um, replace that logo with this logo. I'm going to paste it in there. Let's see if this fixes it. It's not 100% all the time, uh, right? You got to play with this, right? So now we'd say the hosted URL logo. It should do a better job this time because now that image is actually readily available on the internet because it's being stored. Publicly in, in there. So it's going to do its thing now while it's doing that. The other things to consider, what do you want the outcomes to be? So with GoHighLevel, look at this. Here we go. There we go. Now the logo's on there. Now one other part is maybe the colors, the colors are off, right? So I'm going to say use the blue color that is in the logo for the blues throughout the site. And so now again, we don't need to know the knowledge of how to code or how to program. We could at least play with this and get a working mockup to provide to someone else to actually implement if you want to get to that point within that. So I'm just going to do this part of it and then we're going to hop over and see what ChatGPT did. But while we're waiting for that, I'm going to go back to that landing page that I created. I can't remember what I called it. I think it was sample. Uh, what did we call that landing page? Sample quiz. There it is right there. So we're going to make a second one. So we're going to call this, um, quiz GPT, just so we know what it is. And to save time from doing all the margins and stuff, I'm just going to clone the top one. So we're going to say use existing sample quiz, quiz start. Okay, so we're going to pull that in and we'll just overwrite the code. So we're going to come back to ChatGPT. Now this did not show us the visual representation of everything. So what we're going to do is we're going to copy that code. And we're going to come back over to here and we're going to edit this page. Click on the custom code, open the copy, and we're going to paste that in there just like that. And we're going to save it, update this, save again. Just a little nuance of using GoHighLevel and we're going to publish. So now again, I don't know what this looks like because it didn't give us the preview. So this may not even work. So we'll click on this and see what happens. Okay. So, um, we've got a lot of styling issues. The text is there, um, but the styling is off. All right. Here is, is something that I think we could do with this. We could ask it if we can make this in a visual way. Now it also said here, if you tell me which capture method, webhook, embedded GHL form, it can do the last step in here. So we say, is there a way to show this in a visual editor? Let's see if it knows how to do that. So there's a preview button here. Let's just see what that's going to do. Was there a preview at the top of this one? Maybe I missed it. No, just copy code. So I've done quite a bit in the Gemini side of things for, for coding.. So it allows me to, to be able to do more visual referencing and everything. So I did find it interesting, the layout of this. We're just going to see how we can make it better moving forward. So it's doing its thing here, still generating that preview. And then once it's done, then we'll be good to go. So let's go back over here while this is happening. So other parts is I can say in here, I want to use this on— in GoHighLevel, when someone completes the quiz, can you have it use a webhook to send all the questions and answers as well as the outcome and add in— here's where it's like, oh, I forgot— add in their name and email. Email. I forgot I needed it to be gated before they show, they see their results. Can you do this? So it's going to do all that. All right. So let's come back over here. We have so many to go. I think that, oh, is it still going? Look at that. It's taking its good old sweet time to do all this for us. So if you made it this far in the video, thanks for sticking with this. So this is comparing the two. You may be at this point be like, you know what, Gemini seems good, seems easier, seems faster. I'm going to stick with that. In that case, by all means, go that route. I haven't done anything with Claude Code. I hear that's a really good one. I'm going to dive into learning that and we'll maybe we'll do a video in the upcoming months on on what that can do for you, especially if you're in the writing side and you have Claude already, but the code side may be something helpful, right? If you find this, um, interesting and peaceful to watch all this code get written, imagine having to write this by hand. That's crazy. Okay. So over here, this is all the landing page include lead capture, gated results, da da da da, uh, finish, go to HighLevel workflow. It tells you even the steps. Of where to get the, all the webhooks and everything. So when you get those webhooks from GoHighLevel, right? So what that means is, hey, we might as well go a little deeper into this. We're just going to say, go back here. We're going to go into automation. What a webhook is, is just a URL that when things are sent to it, it captures information, right? So we'll go into the automation side and we'll create a new workflow. Create a new workflow from scratch. We'll call this one sample, sample quiz. And the trigger is going to be webhook. It's an inbound webhook and it's going to give you this long URL. This is what it is. So we're going to copy that. We're going to leave this open and key why we're going to leave this open. And we're going to go back here and we're going to say, here is the webhook to use, paste it in. So it's going to go and add that to the code. Once it updates that, we're going to copy that code again. And we're going to go back over to here and use it, right? So it won't let us save this at this point. So in that case, what I'm going to have to do is I'm going to have to open up another tab. And have another instance of GoHighLevelOpen so I can go to other sections within this. Because we want to leave that open. The reason we want to leave that open is we're going to test fire this and then get the, the, the, what they call the payload, which is the, the information that the webhook is receiving. So we're going to come back. We're going to go into. Remove this here. We were doing that. Okay, so that's where we're going. I forgot for a second what we were doing. So we're going to go back in here and we're going to look for that page, which is the sample quiz. And the first page, and we're going to edit it and we're going to update the code. So we're going to click on edit. We come back to Gemini. That is done. It's updated the code and everything. So we're going to highlight, select all, copy that and paste it in here. Paste. Now, something I did there that might catch you if you don't, sometimes you click on here, you don't get everything highlighted, is hit backspace to get a clean screen and then paste in and make sure that it's all good to go. Okay. So we're going to go here. We're going to update this. We're going to update that, publish it. Now we're going to go back to the quiz. All right. So here's the quiz that we just recreated with the logo and everything, all that fun stuff. We're going to say, take the quiz. All right. I am ready. Let's go through. We're going to answer some of these questions. Let's see if the gating thing worked as we wanted it to. All right, there we go. Your analysis is ready. Let's put in the name. So Shaun Whynacht. Put in my email. Let's see the results. Boom. There we go. There's the results. Now that action of filling out that form should have fired that webhook. So we're going to come back over here. We're going to say fetch sample results and nothing yet. Okay. So this has not fired in there. This is common sometimes, uh, where we say, okay, update the webhook. Now the lead form data response has been sent to the endpoint. So I can say I tested this and the webhook didn't get received. So now it's gonna go and it's gonna look at the code and make sure. Now it could have been that my browser has cached it and it didn't include that, but it will actually go and look at all the code thing. I'll update the webhook submission in Canva. Canva didn't show that that is set correctly. And this happened for me before, right? So I'm used to this. Don't ever copy the code until this is done spinning. Because it's not finished working with it. Same with over here. Now, while we're doing that, let's go back and see our old friend, the ChatGPT. What do we happen if we hit that preview button that was at the top? That was a long line of code. Must be here somewhere. Let's do this. Or at the very top. No, it doesn't have it there. It doesn't have that ability to preview. Oh wait. Oh no, there it is. We are in the wrong one. I'm going to preview this. Oh, now it's opening in Canvas. All right. So here is that, right? Maybe we were in the wrong view. So in this case, this looks like it. Right. So take the quiz and then the quiz comes up next. Right. So this is the function. You can play it all out and try it. Like I said, a lot of people are using AI to come up with, look at that, looking for the name, email, send me my breakdown. Right. So if you like this interface, perfect. Right. You can go ahead and use that one. So two completely different designs based off of the exact same prompt in there. So, you know, choose what you want in there. They will all do the same thing and whatever you are more comfortable with. So it's doing that. I'm going to copy that now. And I'm just going to finish off this loop here for us so that you can see the proper steps. Hopefully this webhook is going to take hold this time. Okay, we'll publish that and we'll go in here. What I'm going to do is I'm going to open it in incognito just so it doesn't have any cached stuff from before. I'm ready. Let's go and do this again. Now, one thing you'll notice in Gemini is some of the designs are always the same type of look and feel, very airy and stuff, right? So see, oh, put my name in first. It might work. Processing. Okay, now let's go. I'm just going to close that and we're going to come back over here. See, did it come through? There it is. Okay, there's the request. So what this payload is, again, it's pulling in a bunch of data, right? So we've got full name here, headline, outcome. We have, um, that's pretty much it. Okay, so this is quiz data. So it's pulling in like all that quiz data. It's all in one long field, so to speak. So knowing that we can say, okay, I want you to output the quiz data to be a value for every question and their, their corresponding answer. Now, if you wanted to store all that within your CRM record, you would need to have custom fields with those questions and those potential answers from the dropdown. And then you can store all that within the system. That's getting more advanced. We do that a lot for other clients, but this is essentially the idea. Idea is if you wanted people just to have that lead magnet and you had enough to work with, with, hey, I want their name and email because I'm going to follow up by email. I don't care what their results were. Then great, you can go ahead and do that. In this case, it's basically just telling, you know, your duct tape is growing together. Right. So that's the, the outcome of that quiz. And you could have potential follow-ups based off of that. You don't need to know what they answer every single question along the way. Right. So we would hit save. Now it's creating the contact. We can go in here and add the fields. So in here we want Full, full name. And when we merge in, there's always this inbound webhook and we're going to say full name. It's going to pull that in and we're going to go email somewhere here. It's not there. Email. There it is. And we're going to move in, uh, email, so forth. And then, you know, as it goes on and on and on, right, you would go ahead and do that. So now anytime that is submitted, that contact is going to be created. And then you can save and do other things down the road with it. Now, before we wrap up in here, there is something that I do want to show you in this type of editor is we can tell it to do things, but maybe we want to point out something in here, right? Let's say, let me find something here. Maybe we want to talk about this button, so to speak, and we wanted to add an icon to the button. On the right-hand side, there's an option to select and ask, right? This one here is the Add Gemini Features. This is Select and Ask, and it allows us to now highlight the item visually and say, can you add an icon? To this button that is a, um, click pointer, right? You can even use any term, right? It'll do a good job. So we'll see what it comes up with here. So it's focusing on the icon button. It's expanding the icon integration. Uh, and this says I will add a click pointer to the take a quiz buttons in the canvas to make it more visually engaging and clear call to action elements. So it's doing its thing. It's actually building the code in behind. And once it completes, this will refresh and you'll be able to see all that. So this becomes very fun, enjoyable to, to do this type of design work, especially for people who haven't considered themselves any type of development skills. It's just learning some of the terminology of what you need to to say, uh, to make things happen. So there we go. So there's that click point in here, and I think it probably added to the one in the bottom. All right, so, so have fun with this. If you have any questions about anything that I showed you in this video, please leave it in the comments. I'll be happy to answer those. Or if there's something new that wasn't even covered in here, or in the future, I'd love to do a video on that. And please show your love, hit subscribe to this channel, uh, like this video. And until we meet again next month in one of these videos. Have fun exploring and being creative.