I Vibe-Coded My Entire Business Site in a Day (Full Demo)

Now, this has really surprised me and impressed me. I did not know Lovable could do this. This is awesome. I've just vibe coded and built this entire business website, complete with a landing page, a functioning interactive scorecard app that assesses someone's business AI readiness, and an application form that syncs straight into my mailing list provider and Notion workspace. The best bit? I built it in a single weekend by describing what I wanted to today's partner app, Lovable, and I can't write a single line of code. Now, a year ago, this would have meant hiring a developer and spending a small fortune. Today, I'm going to give you the full step-by-step demo of exactly how to do it over a weekend, including how Lovable can actually optimize your site for SEO and AI search better than anyone will have managed, so you can try it out today, too. All of this means that today, the technical barrier to creating, updating, or improving a great landing page for your business is completely gone. And what we're building here is a real part of my business. You can test out the results right now online, because in September, I'm launching an intensive cohort for non-technical founders who want to run on better systems and AI without getting in the weeds. And the site we're building today is the real entry point for that new offer. So, try it out, have a look around, and if it's for you, you could apply, too. Right, let's get started setting up Lovable. So, >> [music] >> before we build anything, the very first step is to go to lovable.dev and set [music] up an account and log in. And as you can see, whilst I have done similar processes directly in Claude, this is genuinely the first time I've ever done this on Lovable, which, by all accounts, is the most accessible way of getting started with vibe coding. So, let's set up an account. I'm going to click get started. I'm going to log in with my Google account. Simple authorization. There you go. And I'm [clears throat] going to upgrade to a pro account. So, I'm going to upgrade. All right. Sign up with a code. Subscribing. So, we're going to need a pro account to do this. I would think cuz it's going to get through a few more credits than free, but that's going to be worth it, I think. So, there we go. We are ready to rock. Let's see where we get to. So, we're going to go back and we should be able to start building from here. Once you're in, you're faced with this blank prompt box. And that is where the entire website is going to come from, in here. You can discuss the build before building and plan, and we can attach things here. So, I want to start with the design system and landing page. And the first input I want to start with then is actually not the simple create me this website. I'm going to hand over ball my Claude mockup and give it this prompt first. I use Whisper flow to dictate. Before building any pages, create design system from the attached design. Extract the colors, typography scale, and components. Confirm this design system before we build any pages. Before that element, we want to say what we're doing. I want to build a landing page for my business. This is to promote my Authentic Business Accelerator, and I've created a detailed plan for this within my Notion setup. Now, I recommend this. When you set out a plan, it's probably going to be worthwhile doing a little bit of work before you actually put something into here. And what you'll see in Notion, if I jump over to here, is I've gone through and built out with my AI in Notion a bit of a plan of what we're going to do. So, you can do this in whatever way you want, but what I have really is a set of like intentions. We're going to build the scorecard. Um we want to do some uh grounded copy direction ideas, and we want to think about like the wiring of what this is going to be. So, I've got a clear plan of what I want to do, and we're first of all going to do this first step, which is lock the design system in for Lovable. I want to give it a few things, these uh Claude design references. first thing we're going to do, I'm just going to go and find my prepped This is my prepped website that we're going to build with a similar vibe to, and I'm just going to take a couple of screenshots. A little clip of this. Maybe we'll show the menu. Show these. So, what you'll see is I've actually created myself a prompt, which is kind of planned into a structure. Cuz if you plan something else out, you can then work through it. Now, you could absolutely do all of this in Lovable, but I thought we'd do it like this to show you uh what we're doing. So, we're going to put this in here. And what I'm actually going to do is let it know about the Notion page. So, I'm going to say, "I have a Notion page here which outlines my plan for the website, so you have context while we build." And I will link the page from Notion, and then you'll see if we copy that, paste it in, I can now use connectors to get Notion connected, I believe. So, let's just find Notion, and make sure that we have it via the MCP connected. Use your Notion pages as context while building. That's what we need. Connect. There it is. Continue. It's literally this simple, and you'll see why this comes up later on as well. So, we now have a connector connected, which is great. As you look in connectors, you can see There you go. Chat connectors MCP. And while we're there, you can add Notion pages and databases to your app. We'll worry about that maybe a little bit later on. Next, we need to add the context of my design plan. I'm going to use this brand deck that I used elsewhere. Of course, you could do this anywhere at all. This is it, and we're going to share this. Export. Let's try it as an HTML. Now, it's worth saying that when you plan with Lovable, you could absolutely do this, and they have a bunch of templates and brand design systems that you could work with to do it all, but I want to get this more aligned with my current brand. I love this, though. They make it so accessible and easy. Pick something that sits in your right area, and you can absolutely work with it. I mean, look, this is even like This has got a kind of Notion-esque vibe going on. Very cool. Let's download it. Great. I attach my brand design system as an HTML file, and my images of my website, which would be worth using to influence the design so that this feels like a natural extension of that website. Let's attach. You can actually add design systems in, which is really cool on enterprise. But, let's add an attachment, though. Add a file. Downloads. There's my website HTML, and we're going to add those screenshots. So, we've got these four screenshots of the site that will inform the look. Let's open those as well. So, there's a little bit of setup, right? But, what we've got is some reference images of style, my brand design pack as an HTML file I'm bringing over from another system, but you could do this here using templates and I've explained what I want to do. Build a landing page, set up the single source of truth for the visual storytelling and here is the plan for the site. Let's do a plan and see what happens. Now, while that locks in, this is actually the step that most people would likely skip and it's the reason the whole site looks like one site, not five different ones stitched together. We're building a reusable design system. The colors, the fonts, the buttons, the cards. You know, if you set that once, every page after it will just inherit that look. It's a great way to properly make sure that what you build has a consistent design language. Okay, so it's got its color tokens. This is great. It's got typography, spacing, components, where it lives, what it will do next. Excellent. Did you take a look at the plan for the actual build on the Notion page I linked? Please do if not. So, you can approve a plan or you can add that in as well. All right, there you go. Look, so we've planned in the first phase, which is the design system. Then we're going to move on to the waiting list landing page and it's got a clear plan from my Notion page that we've linked through the MCP of what we want that to be. At the voice, all of this stuff I did previously. We're just so we're absolutely clear, that's all come from this Notion page that I worked on and I did that in advance with my Notion agent in a conversation with it and the great thing about doing it with your Notion agent, you can reference all of your existing work on the project that we're building it with. So, it's got all of this context. Totally amazing. It's then going to build the interactive scorecard, the sales page. So, it knows where we're going. This is great. So, I'm going to approve the plan. So, there we go. Step one, design system and using plan mode to make sure Lovable has a clear roadmap for what we're intending to do in the project. Okay, it did it. That took about 3 minutes. Details, it's gone through everything, built everything out. Interestingly, when I click preview, it can't show me that. I can't seem to preview the design system. Excellent. Look at that. So, that's always worth remembering. You can just tell it there's a problem and it fixes it. And there you go, the brand kit. Not too bad. I'm not sure about the spacing on the logo, but it's not too bad. Okay, this is looking great. I'm going to provide the logo as a file though, as I don't like the look of what you've created. Also, make sure you're using Google Instrument Sans as the font and lean towards more grays, beige, border, and off-white colors rather than using so much of the cream for the menu. Okay, so I'm just going to upload a copy of the logo. There it is. Okay, so there's a bit of feedback. Let's send that. Great, that's looking good. Okay, this looks great. I just think there should be a note for you, which is we tend not to use too much of the creams and browns and keep it in the cooler grays and border colors. I'd like to use a bit less of the cream page background. Next, let's move on to building the first part of the site together. I will prompt you from here. Okay, so we're going to send that off. Let's see what it says. So, next we want to build the front door. Now, I'm going to describe the Agentic Business Accelerator in a couple of sentences and we can watch Lovable build the first draft right in front of us with this prompt. Now, you could keep it really simple, but I've obviously developed mine and we're going to be a little bit more specific. So, I want you to build the waitlist landing page using the design system. Include a hero with a primary take the scorecard button and a secondary join the waitlist link. Add a problem section and Casa Method visual, social proof, and FAQ. You can do all of this based on the following details and ask any qualifying questions you need to in order to have the right information to seed this. So, here I'm now going to jump to my Notion prompt where I created something. So, we'll copy that. We'll jump back and we'll drop this in. Here we go. So, I've put that in. I'm going to share all of the copy that we want to put and let's click go. So, it's working through the copy and the prompt. We can see up here in level what these views are. So, we've got generated files. We've got the code. So, what's really cool is you can see all of the elements within this and then we've got analytics and information about the site, which is going to be really fun. So, all of this stuff can be used later on. It's done it. Okay. Um let's see it. Doesn't look like it. What are we looking at here? We've got a homepage. So, if we move this out of the way slightly. So, this is pretty cool. Like you can see it's kind of built all these things. We can put our testimonials in here. What's coming, join the waitlist. Honest answers to fair questions. They all open up and close. This is super cool. I love this. All right. So, let's tweak the hero a bit. Um the copy and the layout. This is looking great. I think the hero section could be center aligned and I think we want to make the founding cohort waitlist open. Maybe this should be about welcome to your agentic business, something like that. I'd also love for the menu page to be something that just takes us back to the main better creating home page, which will join up later on, but it should essentially direct to better creating.com. I think already in just join the waitlist. This should be a button next to take the two-minute scorecard questionnaire or get your agentic business scorecard two minutes. And I'd like everything to be far more dynamic in how it appears on the screen. So let's have some fades or animations for each section as they appear. Cool. Great. This is me chatting to it, really nice. So we've got the scorecard and that's going to take us to the page, which we haven't built yet, which is excellent. So we can go back to the preview. This is nice, it's a little bit animated. Now obviously all the copy we can tweak and we will do it, you'll see it on the final version, but this gives you a good idea of what's happening and how quickly you can build something really meaningful. Okay, last little tweaks I'm making. I'm just looking at the site and giving it feedback. I'm giving it some social proof to replace the actual testimonials, which are down here. So those will get adapted, which is good. I also like how this is adaptive, which is very nice, very cool. I'm also telling it that well, I kind of think that the current page isn't emphasizing at the top what the actual accelerator is and that should be more clearly put. And I'd also like to take some inspiration from an image to do a a visual graph to illustrate the arc of going agentic with your business. And I'm going to attach those. There's two good examples of these, so I'm just going to add them. One is this, the Notion AI Transformation Model, which I don't mind. So, I'm going to open that, and I'm also going to open, which is here, which is another example of a process you could take. Consider the text and look of these two and use them as the basis to create our own original version, which maps a similar process. Send it off. All right, so that's enough editing. I am pretty happy with the look of this. Let's just open this up and take a look. Here we go. So, this is the homepage. I think it looks pretty slick. Pretty cool. We can scroll up and discover the problem, the shift, the journey. I could probably squeeze that down a little bit so it fits on the page, the scorecard, and you take the scorecard, and then you've got the method, testimonials. These look okay, although I would have highlighted those slightly differently, and what's coming and the wait list. Questions at the bottom. So, that's looking really solid as a homepage. We just need to wire these up now. Next, [music] I want to wire up the links to collect emails. Check the plan, but I believe the approach for this should be to send the emails to my mailing list with a tag for a Gentic Business Accelerator Wait List, and I want to connect this via N8N. Please guide me through the process. So, this is the next connection that we're going to make. We can use N8N via the MCP. So, while we wait for it, let's just go back out to connectors and search for N8N. This is my preferred connector for automating into loads of other opportunities and apps. So, if it's not got a direct connector, we have which there are tons in Lovable, you can use something like N8N. So, I'm going to connect this up. Let me just find my NAN server. So, we'll go to NAN. Now, I just want to go to instance level MCP connection details. There is my connection detail. I can now go back to this. I'm just going to ask these questions while we do it. We should direct the user to the scorecard page first, and then once completed, they sign up with their email to get the full report. So, this should just direct to the scorecard page. Great. So, let's just go back into connectors, NAN, MCP. Connect server URL, add and authorize. Done. It's that simple. All right. So, we've got our waitlist. Please confirm the name of the fields that I should be listing for each field in the NA10 workflow. So, what we're doing here is it's given me a kind of breakdown of how to connect this up to the NA10 system. I have taken what Lovable has told me. I've gone to Claude, who I've connected to NA10. There's a a training scheme that you can give it as a plugin. I'll link that in the description below if you're interested and you're a Claude code user, and it's taking me through the process. Or if you're an NAN user and you want to try this, you just need to build something like this, a waitlist webhook. It checks the secret and then it adds to your Kit waitlist. Simple as that. So, we now need to configure this and set it all up. So, I'm going to do that work now. Then, this video isn't really about building NAN workflows, so I won't go into detail about that right now. But, whatever automation system you're using, it is very self-explanatory with the help of AI. You know, Claude and Lovable could talk you through this. And I'm going to do that now. All you really need to know then is that I have built a webhook system in a n8n which checks the webhook from Lovable, make sure it has the correct secret, and then updates my kit tags and subscriber, and they will turn up as you need them to do. Which is fantastic. So, let me ask Lovable to help me get this connected up. I'm ready to connect up the n8n workflow. First, take me through adding the secrets you need, and here's what I've been told to share with you from Claude who created the workflow. So, we're going to go back to Claude. We're going to take this. Okay, so we need the waitlist webhook URL. I will block this out so you can't see it. I love that. Submit it. So, what it's doing is building in an email capture system directly in Lovable. Right, these are the next steps. So, that we can test it. Let's do it. So, join the waitlist. Put my email in. My name. Tester. Joining. You're in. This is cool. Okay, I really love that. So, now let's go and see in Kit. Yeah. There it is. The test has worked. Custom field. It's in there. My name's in there. It's not updated business type or last name. Excellent. So, okay, the test worked. It took my first name and email, but business type and last name did not complete and or fill out. Also, I noticed there was no GDPR second sign-up process. How would this be managed? >> So, let's ask lovable that. Great. Okay, so the GDPR section, I need to make sure that that's explicitly in there. Sure, add the explicit consent copy, and also you can link to for the policy link. Excellent. We'll let that sort out the GDPR. Send all of that through. That's great. And the culprit was the lowercase issues. Great. So, we just need to make sure that they are working and they're fixing them back to lowercase and re-pushing. Fantastic. So, there you go. Once you set up your automation, lovable just you take the secrets and it does the job, which is excellent. So, I think we can say that that is set up on the Kit N A N and lovable side. And we should now, if we join the wait list, see this privacy policy. It'll link through to it. That's on my old website. That's working nicely. Uh lovely stuff. Great. So, the front door is up and collecting names. But a wait list on its own is passive. It just sits there, right? So, I want something that pulls people in and makes them think [music] about their own business. So, let's go and build this scorecard. Now, this is the part I assumed I'd have to hire a developer for back in the day, [music] but now you can do it here. Build interactive apps with lovable, and that's what we're going to do here. I want a proper interactive tool where people answer a dozen questions and get a score that actually means something. And I'm going to base it around this idea down here, this like where they are on this kind of level of agentic business transformation, essentially. The strategy here comes from Daniel Priestley's work on scorecard marketing. The argument is simple. The best leads are warm leads. What I want to give you guys is an actually useful instant personalized result that you actually want. And I also then, bonus, get a genuine read on the person's business before we actually speak and to see if they're actually a qualified person that I could actually help. Now, I'm not building a quiz here. I'm building a warm lead magnet. Um whatever your business is, think about what an interactive app experience would be for your customers cuz you might not want to do this kind of thing. You might have a different business, but I think it can enable you to have these interactive tools offer value in some way. And you can just talk about it and let it help you build it. So, let's have a go. So, I kind of went through in Notion, let's just take a little look, and planned this out. And this is the idea. The scorecard runs on my own framework, the CASA framework. That's about consolidating the context of your business, architecting if it is structured for AI, um systematizing your processes so they're documented, and then activating the agents to do the real work. And you can see that is listed here. So, the idea is the people I help will go through these stages on different parts of their business. And then I what I want to do is map the result onto something like Notion's official AI transformation model, or rather this thing here that we have about where you are in the process. Now, the next part is deliberate. The second you finish, you get the overall level and your four category scores on screen. I want that to be free, no email needed, and that's the value up front. So, to build the whole engine, what this essentially breaks down in this prompt is build an interactive multi-step scorecard component embedded on the landing page that we've just created, and it should go through these questions. I want the instant overview at the end, and I want to be able to have the form for them to, you know, ask for the full report. Cool. So, here is the information. So, that's the arc and you can start to take it. So, I think we should use the arc section with the artwork slightly tweaked. So, the top section, the headline should just be get your AI readiness scorecard and then the subheading can be where is your business on the AI transformation journey. Then I think we can simplify the text around the actual artwork. And then some sort of subtitle for the actual questionnaire saying let's get started. And overall, I think the whole page needs to be better aligned on the left and right margins. It's all a bit messy. And it would be amazing if somehow, as we move through the questionnaires, the section on the graph is highlighted and that we could see in a single page both the questions and the graph. That would be cool. I don't know if it can do this. This is really interesting. Okay, let's look at what we built because I'm really excited about this. So, we've got our homepage here. You can see the buttons. We've got this information and then what I'm really pleased is we've got this lovely animation on on the process, which I think works really, really well. It's really nice. Although, I might get rid of the thing popping up below it. Uh you can then click through to get your scorecard, which is nice. We have the view again here and we could answer. Let's just go through. You can see it follows it up, which is really nice. Sort of. Are your projects in one place? A few, most aren't. Is your information? No, I've no idea what's going on. I'm just going to play this a bit. Do you use templates to for one or two things? One or two things. None. Let's say none of it's automated. Only with a lot of hand-holding. I sometimes use it. I'm experimenting. How confident are you in leading and delegating AI curious but unsure? I had let's say I make this. Let's say too much busy work. Brackets >> [laughter] >> I need to change that. Let's say Claude Notion automation software. This one needs changing cuz it didn't listen to me properly. Please help me get a system that works in one place. See my results. So there you go. You get these results. You are kind of doing a bit of each. Fine. You're not getting very far. Your position on the arc. This is nice. And then you can get the full report. Shows where you are. I really like it. So I'm going to give it a couple of little tweaks to say this. Great. Make sure that the get the full PDF report form also has last name and business type within it so that people can input that. It should be identical to the other form that we've created. Make sure that the home page doesn't reset until someone either refreshes it or clicks on the email form to receive the results. And then I would like to connect Lovable to a Notion database where it can deliver the results of this test only when the user requests the PDF by inputting their data on that form. So that form should launch two webhooks. One, the existing system we've set up to send it into Kit. And then two, it should share data into Notion directly. Walk me through the process. Here we go. And really it's this part I didn't expect to show on camera. The automation lives inside Level itself. So I can connect straight into Notion through the MCP, which basically lets you plug into tools that you already have. So, the second you hit submit, two things happen at once. Your answers write straight into Notion through Lovable's own Notion connection, and they fire off that NAN workflow that we made earlier that not only sends stuff to Kit, but could build that personalized PDF and pass it on to the user. There's no duct taping three separate tools together after the fact. It just works within Lovable. I'm going to show you a small part of that now, and then after that, I want you to stick around because I'm going to show you perhaps the most impressive bit. Lovable can actually optimize your website for SEO search and AI search within LLMs, meaning you've got a baked-in SEO expert at your fingertips, not just a website builder. So, we need to set up the new Notion connection. No longer resets when the cursor leaves. Great. And the server schema updates to update it to accept the new fields. Fantastic. We've got the Kit one wired. Notion, append a row to a database with the submitted lead and their score. The two solid ways to do this. Let NAN handle both. Okay, interesting. Call Notion directly with the Lovable server route. The server route fans out the two websites and connects. Now, if we did set this up, it would connect us to manage agent permissions, and it could literally connect into the system, which I kind of showed you a little bit earlier. Now, as cool as that is, it's actually suggesting, you know, you could easily you can see you give it the database ID, you give it the places it needs to sit it in, and it can just do it. But, actually, since there's less code, it's suggesting that we just do it all through option A. Okay? Sure, let's just do it through option A. Let me know what I need to create in Notion for a location to receive this information. Now, what I'm going to do is create this here, create the database in Notion. I can just copy what Lovable has told me to do. I can go to Notion, open that creating here, and maybe we'll go to customer services hub where we have our other feedback databases. And I'm going to ask it to build it for me. Please create me a database that will be used to receive submissions from my new Lovable coded landing page. Here are the instructions. You can add this underneath the other customer feedback databases on this page and give it the same icon as the others. So, we'll drop that in. Notion AI can go off and do that. Yeah, it's that easy. It's working through. There it is. It's created it. So, we're going to add the connection and connect it. Select the pages, and we're going to find that page. Selected. Notion is connected. Okay. So, we should now go to Notion and make the connection. Lovable prod, there it is. Okay, so here's what's happened. Lovable has given me the instructions of what I need to actually go and do actively in n8n. Some of this stuff has to be set up by hand, uh but it it built the basis of this, and then I could go in and set up the connections. But, what I personally done is I actually thought, well, I don't even want to do that. So, since I've got Claude set up to use n8n with a full uh breakdown of how to build in it, I thought I would ask it to help me. So, what I did, so this is just another example of how you can integrate with Lovable, I asked it to give me a handoff to a different LLM which has those connectors for me, rather than set them up here. And it's really simple, it's given me the handoff. I've shared this with Lovable, and it said paste this into Claude. I've done that. Claude has set everything up, built it, and then it's come back with this to give back to lovable. So, it's really flexible how you work. So, then I've shared this here. So, I've said the automation back end in the scorecard is built and live and is ready to receive submissions. So, we did all of that back end work, add the two secrets, uh and then confirm it. That's the That's the prompt that it gave me. But, essentially I'm saying we've set it up, you just need to add the secrets. You can see we added the secrets in here. It tested it and it's got us back to this, which is it's all saved, but we now need to test it. So, let me demo how we're going to test it. So, what the user would do is go into here. They would when we close this up here. There we go. They would find their scorecard and they would work through. We're just going to hit a load of these answers. Key contacts is organized. One or two things. A little Let's say we earn that. Let's say that our biggest thing is that we can't delegate. And that we're using these. I need to clean this up cuz some of these are a bit confused, but we get the idea. And thanks so much. This was really interesting and I'm keen to take the accelerator. Okay. [snorts] Let's send it. We get our report. It's explaining where I'm at. Keep consolidating. You're on consolidating. This is where we currently are on my level. Fine. And you can get the report. So, I can now go, put my name in. Let's change this to a test. Test two. Consulting and creator. Agree to receive the stuff and we send me my report. Great. Check your inbox. The report and guide are on the way. Excellent. So, that is what is happening, but we can see it for ourselves if we go to Notion. There you go. The tests are in there. We've got a score, percentage. all of that information is listed into the system. It's working. And I would think, great to hear, it's all work and up and live. This is excellent. So, we're we're there. Now, it's worth saying, the connective tissue, Lovable to Notion, Lovable to NAN, is all native NCP right here. It's done the whole build for us. I went out to Claude, but you could do it directly in Lovable if you wanted to do that. It's totally brilliant. And I think it's worth noticing what this actually is now. It's not a quiz, it's a real working app. It scores you, stores your data, shares it to you and to me. And as you can see here, it creates a full personalized report. But maybe building a PDF is a step too far in this demonstration. All hosted and running live. Now, I described it out loud, and Lovable is just shipping the whole stack. I'm still not quite over how easy that was. Just so you know, up to this point, I probably spent 5 hours. Most of that was letting it do things and having a tea break. So, now, with this, we Someone knows exactly where they stand, and they want the fix. And I think that's the perfect moment for us to introduce [music] the final page I want to build in here, which is the kind of actual sales page >> [music] >> for the accelerator. Here's the prompt I'm going to use to build it. I've planned this out, and you can see it is back over in here in Notion. And what we're asking it to do is build this build a third page, actually. There we go. So, I'm just going to copy this in and then explain it to you. But essentially, I'm giving it the kind of the details of what I think the cohort will be, and then the sections in order, the hero, transformation promise, life after the cohort, and then most importantly, what I want it to do is create a payment step inside of the form. And what's amazing about this is Lovable can handle payments also, completely integrated into how it builds this. So, let's take a little look. Let's Let's this over. We're going to use the same design system. So, this is where it's going to go. I've got all of that information in there, and let's send it off. So, essentially, just so you're clear on what I'm sending here, we are saying build me the page, the context of what is going to be included, the dates, and then we're going to have a hero, outcome, framing, and then applying. So, what people want to get out of it, and the payment step. Now, we're going to use Lovable's built-in payments on test mode only, because at this stage I don't need this. This is purely going to be a waiting list. But, I wanted to show you how possible it was to set up payments with Lovable. And we're framing it as a selection, cuz this does need to be carefully curated so the right people who I can really help come and join the accelerator, but they're also people that can work together and build a community. That's what we're going to want to do. Let's send this off. >> [snorts] >> Now, building something like this, this is where Lovable stops being just a website builder and becomes a proper engine for your business. Because of those connections to Notion, your other tools through the MCP, and for these kind of integrated payment system. So, instead of bolting different tools together after the fact, every application lands directly where I want it to be. And to be honest, we can do this live on camera. Now, the second thing I'm doing differently with this page is changing the tone. I'm writing it as an application, not a hard sell. The cohort is capped because I onboard people one-to-one, so applying is a selection process, not so much a sale. I want the right people to turn up and work together and it be genuinely beneficial for everyone in that group. So, we can link this to Notion. Great. All right. So, it's live. Let's take a look at it. Okay, cool. All right, so that's looking really cool. So, let's just click on apply now and see what happens. It takes us down to apply. Let's just test it out. We can add my details in. We can put this in. It's working well. Let's say that. Nice, this all looks great. I'm looking to learn the basics of how to set up a connected system ready for AI collaboration and see one part of my business improve. I'm sure I'll learn loads from the cohort members. Great. This is cool. Submit application. Application received. All right, so the the payment isn't baked in, but it's working, which is cool. We've got the first part of the page built. Love it. Okay, it's the next day. I had to go and do some life admin, so I'm carrying on. So, if it's of interest to you, I think I've probably worked on this for 4 and 1/2 hours in total, and that's kind of remarkable given how much we have got here. So, I've just checked in for it to show me what we've built. So, it's built our design system, which we started with. So, we've got the brand kit of how it should look. We've then got our main home page, which is now looking super clean. Uh I think this is much better and I've improved the menu to link back to the original Better Creating site, which is now live, which is exciting. And this is all just reading nicely. I also just asked it to add a YouTube video. I gave it the link to the video. It added it. Then I said I'd rather give it a a thumbnail, and it gave it a thumbnail. I mean, it's so simple. Really great. Uh that links to the first video on Systems Made Better, which is nice. This is now working beautifully, a little animated view of the arc of building your business. Fits into the window. You can take the AI Readiness scorecard, the CASA method is listed, we've got our reviews, and then the sign-up form is here. And this is now working beautifully as a hover sign-up form, which is great. We then created the scorecard, which is working really beautifully now, and you can click through all the answers. Uh it will obviously change its look as you move it. It's adaptive, and that's all looking fantastic. People can drop their email, we receive stuff in Notion, and that's all working beautifully. So, we then built the apply section, and this is where I'm currently at. So, I've cleaned this up. We've got apply for cohort one of the Agentechic Business Accelerator. You can apply for the cohort. We've got kind of breakdown of what you're getting. So, the idea of this is that I send people to it once they've um expressed interest or when the thing is open. So, it probably won't quite be there yet. And I'm just going to adjust that a second. That looks nicer. I'll just send that off while we do it. Uh this is looking really clear. We've got a lovely kind of route to what the program will look like. So, the first two So, onboarding, first 2 weeks on consolidation, guest speakers, and then the remaining sections of the CASA framework. And everything that comes with it. I think this is looking really nice. And testimonials again, the deal, and apply for the place. Now, we also just have a little bit of extra stuff, questions, and so on and so forth. But, what we currently have down the bottom is the actual application form, which is working. But, I don't think this is the right place to put it, personally, cuz the last thing I want to do is show you how to add a checkout with Lovable's built-in payment system, which uses Stripe, and we can do that really simply. So, what I'm going to ask Lovable to do is this. Okay. I want to now work on the apply section. The homepage for apply is looking great, but I think we need a secondary page for the actual form to be filled out with where it's clean and simple. And this should really take the final section where we can fill out the form and put it on its own page called application form. So, let's create a new page, remove the actual application form from the bottom of the page, and just replace it with apply now, and move it to its own page, and then I would like to from that point test the application system, and then add a payment interface using your built-in section that we can test in test mode. I believe you have a payment system. Explain how that works, too. So, let's ask it to do that. So, currently, as you can see, once you've filled in the apply section, it just has this section about the refundable deposit, and this is what we now need to build into it. So, currently, it just doesn't do anything, doesn't go anywhere, it's not useful. So, this is how payments work on Lovable. You have a built-in payment. Two options, both fully managed, no Stripe Paddle accounts. So, you've got Stripe, global card payments, take live deposits once you claim, or Paddle, they act as a merchant of record, good if you want zero tax in in admin. Yeah, okay. I think it's going to be global, though, so I want to use Paddle, which is great cuz it will handle all the VAT for you. Okay, I'd like zero tax admin, so let's use Paddle since the cohort may be global. And yes, let's please set up Lovable Cloud. It's going to do this, and it's going to wire in a pay deposit button that opens Stripe's checkout in test mode. So, that's great. So, this is something really exciting about Lovable. If you don't want to get into the weeds of connecting existing or multiple accounts up, it's all built in, so you can just do it in one place. So, it really is a one-stop shop to building an application form like this. Amazing. Now, interestingly, for this kind of project, it can also detect compliance issues. So, it's saying this is a higher compliance risk given that essentially I'm selling training rather than a digital product. So, if you wanted this to be a digital product sales, you could absolutely do it with Paddle and build your own store. Amazing. But, right now it's suggesting that I use Stripe. So, it's saying Stripe with full compliance handling gets you the same zero admin outcome you're after. So, it handles tax compliance, fraud, disputes, refunds, and everything else. You don't register for VAT yourself. You don't file returns. You don't chase chargebacks. There's Stripe fees. You can toggle it off per transaction or entirely later if you want to. Test mode is available. Fantastic. This is so cool. Let's just view the security issues. Interesting. It's found some security issues. Great. Yeah, let's go ahead with the Stripe in test mode with full compliance handling as default. Also, I've just spotted a high severity vulnerability in application dependencies come up. Take a look at that, too. Look at this. So, it will accept global payments, handles card data, pay-as-you-go pricing, flexible tax and compliance handling, go live when you're ready. Continue. Great. Select my country. There we go. Let's enable it. Look at this. Sell digital products. Test before you go live. It's all built in. This is totally awesome. Now, you can learn how payments work, test in live environment, which is great. How to test, start a purchase in your project within the editor preview. Great. We get reports back, payment logic, customer management. You can do manage this in your Stripe dashboard, taxes and compliance. You can see what it will cover and how it will look after you, which is very cool. Payouts and reviews, all managed through Stripe. and let's just ask Lovable to add it. >> Now, this has really surprised me and impressed me. I did not know Lovable could do this. This is awesome. For context, up until now when I've been selling, I spent a lot of time researching merchants of records and where to set things up. I have a separate payment platform that we just use a link and a button to from my current website, but this is all built-in. So, you're getting built-in payments in your Vibe coded landing page. Amazing. So, I can now try filling out the application form end-to-end and see how it checks out. So, this is the card number we need to use. So, let's give it a go. Okay, so here we are. Refundable deposit, it's a nominal amount at the moment of £250. Secure your place. We review your application. I'm happy to do it. Continue to deposit. This is test mode. Interesting. Failure. Okay, I tried it, but when it tried to load the test interface, it said something went wrong. Please try again or contact the merchant. That's interesting. But, we do kind of have a checkout, look. This is cool. Step five of five, refundable deposit. It's clearly some sort of tax code. So, trying again. Let's continue to deposit. Yes, we have a payment view. One link. We can see we're in test mode, so it's safe. Future date. 1 2 3 Simon Pitman GB 1 2 3 4 5 6 7 8 9 All right, so fake information in, £250 in test mode, click pay. Look at that. And there's the reference. And how about this? In test mode, I can go into the payment section of the back end, see the dashboard, net revenue has come in. it's taken the fees off it. We literally are ready to take money for this when we want to do it. Okay, so the payment seems to have gone through smoothly. Where do I see the resulting information that's come through? And what do we do next to make sure this connects up to receiving the information in an interface such as Notion? So look at that. How about it? You've got a application process using Lovable and their payment platform. So where do you want them to go? Oh, it can create a new database for me. Lovely. When should the applicants appear in Notion? As soon as they submit the form. And now what we're doing is creating a Notion database integrated with the platform so that Lovable can send the applications to us in Lovable. We can see them come in live and connect it into the rest of our system. Totally amazing. Oh, and look, there is our founding cohort applications system built in Notion ready to take all of the submissions connected to the Stripe session, everything. The only step here would now be to publish it. You can add a custom domain and you can work through that process as you would be used to in most platforms when you're connecting something to an existing domain. It's really simple and you're good to go, basically. I won't go into that detail because I think that's the kind of thing that isn't that much of interest right now. You can solve it. So there it is, we've got our beautifully designed landing page, all of the interactive elements. We've got our readiness scorecard that we can interact with and bring people into the waiting list. And then when we want to send them the option or make it live, you've got the apply page where people can go and go, "Right, yeah, I'm applying for the right thing, apply for the cohort" and end up going through a checkout and paying all on this live coded platform, all built into Lovable. So that's the full thing built out, front end, back end, just talking to my Mac, and Lovable. But, there is just one last job to do before we celebrate. A great website is completely useless if nobody can find it. And these days, being found doesn't just mean Google and SEO. People are asking ChatGPT and Perplexity for recommendations, and you need to be the answer. So, the final step, let's give Lovable this single prompt. Please audit and optimize the page for SEO, titles, meta descriptions, semantic headings, and alt text. Add structured data so AI search tools can also read and summarize what the pages offer. Do this for the full site. Okay, let's send that off. And while it's working on that, what it's actually doing is optimizing the entire site for both traditional SEO and AI search. We call this generative engine optimization, GEO. It handles the meta descriptions, semantic headings, structured data, and load speeds instantly. No plugins, no separate SEO tools, just that one prompt. You can check out my recent video on a wider view of this subject if you want to see it, where I do it with some other tools and look at this from other websites that I've coded elsewhere. So, you can see it's started auditing SEO foundations across pages, and really this is all kind of back end stuff, so it's not particularly interesting for you to look at. So, let's skip to the results. All right, look at this. SEO passes complete. It's added structured data. It's done site-wide defaults. We can see the details of what it's done. Look, here you go, it's smashed for it. If you ever want to understand, you just look at this, and there's all the metadata that it has created. It's created an index for the page, Twitter descriptions, questions, the Agentic scorecard page. I mean, look at all this work. This would take someone hours, days to get this done, and the system has just worked through it. Look, robots giving you an overview of all of this. Once this is uploaded and added to a specific site as it will be and you'll be able to check it out right now, we'll update it further. Really cool. Once I've connected this as a subdomain to bettercreating.com, probably agenticbusiness.bettercreating.com, would you be able to then clean all of this up and assess it online and improve it? So, don't forget once you've done the initial work, once you've set up your subdomain, you would be a it would go and do all of the additional work to make sure this was all SEO and AIO prepped, which is great. So, that's a whole website payment platform built in a weekend talking to my Mac. No dev team, no budget, no expertise to be honest. That's what Lovable really does. It turns a creator into a founder. So, go and have a play. The page is live. Take the scorecard and see where your business actually lands and if you fancy building your own, today's partner Lovable is linked in the description with the best deal we can get for you. Now, one last thing. If you want to let Lovable get on with building your websites, you could go and supercharge how you use Claude with the rest of us and that can be found on my other website and co-work OS. This is my Claude co-work OS that helps you onboard to Claude better than 99% of people and there's a full video guide on how to do just that right here to watch next. Get subscribed here and I'll see you on the next one.