Building a Simple Lead Generation System with Chatfuel Flow Builder
I am super super excited to be chatting with you about Flow Builder! Yes, you heard that right. Flow Builder has been long awaited and much anticipated, but the breakthrough is finally here. Flow Builder is just gonna make your life a whole lot easier and save you a ton of time along the way.
What this tutorial is saying:
So in a nutshell, what is Flow Builder? Well, overall, it’s just an easier, more intuitive, better visual way to build your BOTs. The old way of building bots, (which worked), was in the “Automate” tab. You would build your bot step-by-step, piece-by-piece, block-by-block and that was OK. It worked. But with Flow Builder, you can see the entire customer journey in one view.
It’s visual, it’s still the no code drag-and-drop interface that you love, and you just can’t beat it, right? You can see how all the pieces fit together, and it just makes sense. It’s how about building should be. So all of that said, now let’s give you a demo of flow builder and show you how it works and where to find it.
So once you login to the Chatfuel dashboard, you’ll see this new tab on the left hand side here called “Flows” and of course, this is where Flow Builder lives. Within the Flows tab, you really have two sections here. On the left-hand side, you have “Flows” – this is a collapsible side panel, a drawer. And this where all your Flows live. Now you can think of a Flow just like an objective within your bot – a goal. For example, you could have a lead generation flow, and we’ll be building one of those here in just a second.
And then on the right-hand side over here, you have your Canvas. And once you create a Flow, this is where you actually build out that experience, that customer journey, that content. So, before we dive in, you’ll see that I’ve already created a Group here called “Coupon”. And I’ve created that Group just by clicking the “+ Group” button here. And within that Group, which is just used for my own organisational purposes, I’ve created a Flow by clicking the “+ Flow” button. And that’s what we’re looking at here on the canvas.
So now let’s dive in. I’m gonna collapse this side panel to give us some more working real estate and we’re good to go. So again, let’s say that I have a popcorn company that we’re building a lead gen flow for. Let’s say we wanna offer a discount code, a coupon to users who interact with us on Messenger after they provide us their email address. So that’s kinda like the lead gen component of it.
First thing let’s zoom in a little bit to get a better view and I’ll click “+ Add content”. Let’s add an image up top to let the user see our product, right. Because who doesn’t wanna see a delicious thing of popcorn when they’re interacting on Messenger, right? To me this looks like I just wanna reach through my screen and kinda take a mouthful of that buttery goodness. But anyway, now that we have this image, let’s continue building out the content here.
So I’m gonna click “+ Add content”. Let’s add a typing animation for let’s say 2 seconds just to give the user a chance to digest that image (no pun intended). And then let’s add some text to give the user some more information about how they can get that coupon. So let’s say something like “Welcome to Papa’s Popcorn Shop!” That’s the name of our company let’s say and let’s say share your email below to get 20% off your first order. Right? Simple enough! And finally, let’s close things out here. I’ll zoom out just a tad.
Let’s close out here by asking for the user’s email so I’m gonna click “+ Add content” again, choose “Save User Email”. We’ll toggle this checkbox for “Allow Facebook Email Suggest”, so with just one click, the user can provide their email. No need to type in anything, and then, let’s connect this, so if they provide their email. We’re gonna click on this connector here drag it over, then we’ll provide that follow-up message if they complete what we wanted them to. So we’ll click “Text + Buttons” and we’ll say “Thanks! You got it poppin’…” and then we can add another typing animation for example. To give them sometime to read that message. So let’s say 2 seconds, great.
And finally, we’ll actually provide that coupon code, since they completed what we wanted them to. So we’ll click “+ Add content” again “Text + Buttons”. You kinda get the idea here at this point. And let’s say something like “Your code is: GRANDPOP-20”. That’s what you call an elderly popcorn kernel. But more of the grandpop side of that, not so much the 20.
And then finally here, if we wanted to, you know, we could actually add a Call-To-Action where they can apply that coupon code, that discount to, you know, their order on the website let’s say. So if we wanted to, we could add a button here that says, you know, “Apply Coupon” to really bring this full circle. And we can send them to, you know, whatever the website is.
So already we built this super simple lead gen flow here in just what? 60 seconds? 90 seconds? One last feature I wanna show you here before we test this spot is the second button down here. It’s called “Organize”. And that will, you know, bring all of the conversation into one view and centre it. So it looks beautiful, and you could easily understand your bot flow. No need to zoom in or out.
So there we go! There’s our very simple lead gen flow that we’ve created here in Flow Builder. And finally, as promised, let’s test it out in Messenger. So I’ll click “Test This Flow” and we’ll get the message here in just a second. There we go, we got the image of the popcorn. I still wanna reach through my screen and grab it.
We got the greeting message here with some more information. I’ll click to provide my email in one click. There we go, we got the corny message with the joke and the coupon code. We can go through to the website to apply that if needed, and we’re good, right? So very very simple and intuitive to build your chat experience here in Flow Builder.
We’re super excited, we hope you are too. So head in to your dashboard today to try it out and happy botting!