From the course: Vibe Code Your First AI App with Lovable and n8n (No Code Required)
Automating lead management with n8n
From the course: Vibe Code Your First AI App with Lovable and n8n (No Code Required)
Automating lead management with n8n
- We have the form ready on our landing page. But if I click on book a free discovery call button, it doesn't go anywhere. We need to make this form work. For the AI agency, we need an automated system that processes all the incoming leads, all the incoming requests for these MVP projects. So we need to connect this form to our N8N workflow. Now this workflow gets triggered whenever somebody fills up this entire form and clicks on this book a free discovery call button. We then quickly capture all of the details, the name, email, et cetera. All of those fields get captured in a Google sheet. We have created this Google sheet with these columns. Date when that request was raised, full name, email, budget, and requirements. Now we then filter out leads with a budget of 100 to 1,000 US dollars. That means the AI agency is not entrusted in picking up projects with that low of a budget. Then we have three options. One is 100 to $1,000, which we are discarding for now, but we still want to capture their details. So those will get captured in the Google sheets first, and then we are going to discard those requests for now. Then we have two other slabs, thousand to $3,000 and 3,000 to $5,000. So people with bigger budget for their projects, they're going to get prioritized. They'll get an email with a calendar link to set up a meeting with us. People with thousand to $3,000 budget will also get an email, but their email would say that we are currently swamped with a lot of projects. We are going to reach out to you in a week or two. So we are basically managing and processing all the incoming requests based on their budget, and this happens automatically. So to send all these personalized emails and everything, and to connect this form on our landing page with our N8N workflow, we need a webhook node. So within N8N, when you start building this workflow, you click on this nodes panel. Here, when you search for webhook, this is the trigger that we want to use, and that's what I've used here, the webhook trigger node. This starts the workflow when a webhook is called. For people who do not know, a webhook is a simple messaging system that sends data from one application to another application when an event happens. In this case, that event is clicking on this book a free discovery call with all of these fields in the form filled out. So the data filled in that form is then passed onto this webhook URL. So this is the predefined URL through which this communication happens. Double clicking on the webhook node opens up this configuration panel. This is the test URL that we see over here. This is the test URL, agentwise.app.n8n. So this is auto-generated. The method is basically the type of request. We are sending data from our landing page to our servers. That is why this is a post request. If I want to get something from the servers, then we send a get request. In this case, all the users filling out this form are sending us the data to get processed. So we will be getting a post request. The path, this is basically just the name of this URL. If you add something here, if I simply write XYZ, you see the URL also reflects that. Authentication none responds immediately. That's it. This is the setting for our webhook. Once the request comes in, then we append or update the row in our Google sheet. So we have used this node. Again, you can always get that from your nodes panel. If you search for Google sheets, within Google Sheets, there is an action here, append or update row in sheet. And this is the node that we have used. So we can delete it for now. We already have it here. Double clicking on this will show you the configuration panel. You can add new credentials by clicking on Create New Credential. Sign in with Google. I already have that. That's how simple this is to authenticate yourself in this Google sheet node. Once you do that, your Google Sheets account and all the sheets that you have there will be listed here. You'll be able to access all your Google Sheet documents from N8N. The resources sheet within document, we don't need to change that operation is append or update through. That means all the incoming requests are going to get appended or updated in these rows. Next step, we select the document. So if you click on this dropdown, you'll see all of these documents. If you look at the sheet, the sheet name is Sheet 1, so this is automatically loaded for us. Mapping column mode, map each column manually. So based on the incoming data, we are going to map all the values here. So full name, we'll just simply drag and drop. I'll show you how to do that in just a bit. The same thing happens all throughout this entire workflow. Let's quickly connect this webhook with our form on the landing page. All I need to do is simply copy this URL. Clicking on this will copy it to your clipboard, and now we need to write the prompt, clicking on book a free discovery call button in the form should send a post request at the webhook URL, and there, we are going to specify the webhook URL. The request body should contain the form details. That's it. This is our prompt. So this should send a request at this URL with all of the user details, name, email, project budget, and everything. Now we let Lovable do its job. It will connect our form with our N8N workflow. While it is doing that, the next node that we are using is a filter node. Now this filter node is simply a condition on the budget that is coming from the form. If the budget is 100 to 1,000, then we are not accepting it. So the condition is budget should not be equal to 100 to 1,000. That's it. That's the condition. So any request which will have 100 to 1,000, which they will not move forward, so they will get filtered out of the system. We'll still store them, but at this step of the workflow, they're going to get filtered out. Moving forward, if the budget is not 100 to 1,000, then we have a switch node. Again, you can look up switch node in the nodes panel. All of these nodes are available there. Mode rules, so the budget is equal to, this is the condition that we have picked, budget should be equal to, and here, we are using the string type, within string, we are using is equal to, should be thousand to 3,000, and same for 3,000 to 5,000. This will create two different routes for our project request. So email for thousand to $3,000 budget and then email for 3,000 to $5,000 budget. Let's look at the first one. We will get email from the webhook request. So that is the email that we are capturing here. You will have to add credentials to your Google Gmail node, so make sure that you add that first. Any node you need to pass your credentials, and then configure it to capture all of the details. Email type text, subject, thank you for your inquiry, and this is the email that we are sending to people who have selected a budget of thousand to $3,000. We have received your inquiry and we'll give you a call later this week. Similarly, we have an email for people who have selected a higher budget, we have received your inquiry and we are interested in learning more about the project. Please book a call using this link. These are the two different emails, and after that, once we've sent all of these emails to the potential leads, then we merge both of these parts, we append them, and we send a notification email to ourselves that somebody has filled up a form and we have responded with this email. So that if you want to take action, if you want to override the system, you are still notified and you can take that action yourself as well. Here we see we have this configured, the landing page, the form is configured with our N8N workflow. In order to test the system, I'm going to click on Execute Workflow. Once I click on execute Workflow, now this trigger is listening to the event, so let's fill up the form. I'll say Harshit Tyagi. Email address, let's say work.harshit@gmail.com. Project budget, thousand to $3,000. Project requirements, I want to build an image editing app using nano banana, and I'll click on book a free discovery call. As soon as I click on this, look at this, our workflow has executed successfully, and now I can show you the email that I have got. This is the email that I've just received. Hey, Harshit, we have received your inquiry and we'll give you a call later this week. This is how the entire lead processing is happening through N8N, and we have now connected the Lovable front end with our N8N backend that allows us to automate the lead management workflow for this AI agency. We'll take it to the next level in the upcoming videos where we are going to leverage an AI agent to help customers with their support queries.
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.