Transcript Text
the intent is to showcase how users can create a whatsapp ai bot for any WhatsApp phone number into a fully functional AI bot just by scanning a QR code - no Meta business approval and long complex setup, no Facebook verification, literally no hassles.
I also want people to try out the too template for their own usecases. also link to the templat to clone the exact flow: https://app.buildship.com/template/Jaw4p6h1JlMF
Trying to build your own WhatsApp bot, but feel completely overwhelmed by all the steps on the Meta developer platform. You're not alone, and this video is about to make your life way easier. Imagine this, no need to buy a new phone number, no complicated setup. Just take a spear or existing WhatsApp number and turn it into a powerful 24 7 support bot for your business in minutes.
With this WhatsApp Center platform as a service, you can link any phone number as a bot. No endless setup. Just scan a QR code and you're good to go. Behind the scenes, it's powered by a simple buildship automation that delivers AI generated replies. And in just a few steps, you've got a fully functional WhatsApp bot ready to receive messages from around the world and respond with stunning AI generated images. So Buildship recently released a great tutorial that shows you how you can build your very own WhatsApp bot using the official meta platform. , This is an in-depth tutorial that shows you how to set up an automation that uses multiple AI integrations.
. It's very interesting and I highly encourage you to check it out, and since releasing this video, I've been getting a lot of questions and feedback people saying that it's easy to get this bot set up, configured, and going on the buildship side, what's challenging?
Is getting the prerequisites completed on the meta side. If you head over to the documentation for setting up a WhatsApp bot in Buildship, there's a number of prerequisites that you'll need to complete before you can start creating your own WhatsApp bot. So you'll need to have a meta developer account. You'll need to have a business app created, and then you'll need to verify that business on Facebook. And you can click here to see the steps that we actually need to take here.
, , This brings us, to this webpage where we can see how we can verify a WhatsApp business. And you can see that there's a lot of steps involved here
And after you've verified your business on Facebook. You'll need a purchased and registered and verified WhatsApp business phone number. Now, the meta platform does provide test numbers that you can use, but they're very limited, you want to create a WhatsApp bot that anyone from across the world can send messages to.
If you're using a test phone number, this won't be possible. Only verified and whitelisted phone numbers can send messages to your test WhatsApp numbers. So we want to create live production ready WhatsApp bots. But as you can see, there's a lot of steps that we need to complete even before we can start building
so I was thinking to myself, there's gotta be an easier way to do this. ? And it turns out that there is, so there's this WhatsApp sender, API service. And what this does is essentially eliminates most of the manual steps that we would need to complete on the meta platform. If you have a spare phone number lying around doing nothing, then you can take advantage of that.
What this platform will allow you to do is take that spare phone number or any WhatsApp linked phone number that you have. And connect it to this platform pretty easily too. And once you connect it to this platform, you'll be able to send messages to that phone number the same way that you would be able to send messages to a meta business phone number.
And then the interesting part is, of course, that you can forward those messages to an automation tool like Buildship and do whatever you want. For example, integrate ai, generate responses, and then reply back to the sender.
If we scroll down here, we're gonna see that all we need to do is connect our WhatsApp. We do that by just linking device, by scanning a QR code, and then we can start sending our messages
so I already have an account set up here with this WhatsApp sender, API service. ,
We'll drop the link to this website in the description of this video.
Before I start, I just wanna mention that we're going to be building. Most of this from scratch. And so if you don't have time to sit around and watch this entire video from start to end, uh, what we're also going to do is publish the flow that we build in Buildship as a template so that you can just clone that into your project and quickly get started building your own WhatsApp bot.
With that said, I do encourage you to watch this video to the end because you're going to be learning a lot as we build a lot of these integrations from scratch, and you'll see how you can create nodes that don't already exist in Buildship pretty easily using ai.
So with that, I'm gonna go to the dashboard here, and I believe the first thing that I'll need to do is create a WhatsApp session. So I'm gonna do that. And I need to give my session a name. So I'll just say my bot. Next, you'll need to enter the phone number that you want to use for your WhatsApp bot. So I have a spare phone number just lying around doing nothing.
I'm going to use this here as , the phone number to use for my bot. So I'm just gonna enter that phone number here. Uh, I'm going to select my country first. And now let me just look and enter this phone number. Okay. Enable account protection, enable message logging and enable webhook notification.
So this is important because when we send a message to our bot, we want that message to be forwarded to a Buildship workflow so that we can generate responses with AI and send those responses back. So I'm gonna click on this and it looks like we need to enter a webhook URL. So I don't have this at the moment.
Let's just, , skip that for now because I think we can enable it after we created a session. I'm going to click create and connect session, and now I need to scan this QR code. So let me do that. I'm going to open WhatsApp. On my device,
and I'm going to scan this.
Perfect. I've now linked my phone number. You can see it's connected. And, uh, this is looking good, so we didn't have to go through an entire verification process for this. So with that out of the way, what we can do is, let's see if we can test this. So the first thing that I wanna do is try and see if I can send a message to a phone number.
. I'll enter my phone number here
and the message. Hello. Let's send this test message.
And I did receive the message, but let me just share it with you so that you know I'm telling the truth. Here you can see the message. Hello. Let's try to send a different message.
Then in WhatsApp, I should get that new message and you can see hello world. And if I look at the profile information, you can see that this is the phone number that I linked to the platform for my WhatsApp bot. So this is great. We confirmed that we are sending messages, but what will happen if I send a reply back to this bot and at the moment, nothing will happen, and that's totally expected, because we're not doing anything magical yet in bill ship.
So what we're going to do is create our Buildship flow and hook that up to this platform and see if we can start forwarding messages to our buildship flow, so I'm going to go to Buildship.
And I am just gonna create a new flow and I'll start from scratch and let's say my bot,
and I think we'll need to add a rest, API trigger here, but let me just confirm. So here I want to be able to specify a Buildship workflow endpoint, URL, to send the messages to. So I think I need to edit this session, enable webhook notifications, and then I'll need to paste that Buildship endpoint, URL here.
To do that, I will go back to bill ship and I'll just add a new connection. Rest API call. And I, it doesn't say here if it needs to be a get or post, so I'm just going to assume it's a post and I am just going to connect this.
Okay, so that is done. , What we're gonna do here now is , copy this endpoint, URL and we're gonna go back to the WhatsApp sender, API paste that webhook, URL here. And then we need to specify for message events. So I am not sure which one to use here. , Let me just quickly look to the documentation.
And we have a list of events here.
And Okay, keep scrolling. Here's the web hook section. We have a message. Absurd. What is that about? , This event will be triggered when a new message is received in your session. So yeah, I think this is the event that we want to listen for. And then here we're gonna have the, the message.
Okay, so let me go back and then I'll just select that event here. Messages absurd. Let's save those changes. Great. So this should now be connected with Bill Ship. So let me go back to my bot and send a new message and then hopefully we see this event forwarded to our bill ship flow.
Let me just go back to the workflow and then I'll check if there's any data coming in. And, , it looks like there is so let's expand this body. We get the event and, and we have a data field. And hopefully in here we'll see that message that I, , that I just sent. So, message edge in conversation.
Hello, world. Perfect. Great. So we've now connected the WhatsApp sender, API bot that we created to our buildship flow,
now we need to figure out how to access the message from all of this, and it's great that they provided an example for us to use. I think what we can also do here is have buildship generate a node for extracting the conversation from this payload.
. I am going to switch back to my flow, and on the left hand side you'll see this build with AI feature, can simply enter a prompt to build out your workflows. What we actually want to do though is generate a node.
And the way that I like to do this is to provide as much documentation as possible or code sample to try and get the best results.
So here, I'm going to enter a prompt.
I want you to help me generate a node that will take in a message event, and then I want you to help me extract the conversation message.
And then what I'm going to do is go back to the documentation. And copy it is sample event object, and I'm just going to paste that here. Sample event, object and paste that.
Okay, so now it's going to go and generate the node for us. . And you can see here now it's generating the script for us.
So the idea, what we wanna do here is we just want a utility node that we can use to extract the message.
, So it looks like it's finished and we have a sample test case here, but let me grab that example and then come back here and let's test to see if this node actually works.
Perfect. This is returning just the message text, and this is exactly what we wanted. So what I am going to do is because it added the node below , the flow output, I'm just going to drag that above it and then I'll need to add a new input to my workflow. So I'll go back to this trigger. And let's add a new input here.
I'm going to call this event body. This is of course an object and uh, let's default value, empty object. Let's save this and we will grab this. We don't need that. We just want the, , yeah. Body. Okay. This is looking good. . Then what I wanna do is go back to the flow and we can ship this, but I have an error.
. I actually forgot to supply the input here that we want to extract the message from. So this is just the event body. So this will extract the conversation message, but what do we actually want to do with that so we can do anything here? There's a bunch of integration nodes available that you can find in the bill ships nodes library for various use cases, ?
But let's say that we just want to generate AI responses. That's pretty straightforward to do. What we'll do is add and tropic claw text generator node, and I'm just going to use the use credits option here. For system prompt, let's say be, uh, sarcastic. and then for the prompt, so this will be the message that we extract.
So we'll just use the output of this node and, uh, yeah, this is looking good. So let's ship this flow and we'll send a message and let's see the magic in action, right? So go back to the bot, send a new message. How are you?
So come back to my flow and we will inspect the logs here.
So here's our log and it looks like something is failing. Let's see. , What's the issue or event body does have the message event that we expect, so that's good. But it looks like the extract conversation from message event is failing and it says, cannot read properties of undefined reading conversation.
Okay. Let's see. So let's debug this. What we're gonna do is, is copy the value stored in the event body input. So let's grab this and let's test the node with this as the input. , Let's see. Test. Okay, so it's not working. , What we're gonna do here is try to fix this with ai. So just click fix with ai and this should bring up the Compass builder.
Um, okay, let's, let's do that again. Let's, , test fix with ai. Uh, can you help me solve this error? I am passing using an event. Object like this, but it is failing.
Okay? So this object looks, , more complex than the one that they give in the documentation here. So that might be the issue. So let's, let's try and fix this.
By the way, we are building a lot of these, , integration nodes ourself, and, , if you're too lazy and you don't want , , to do this part of the tool on your end, then , don't worry
, As I mentioned in the beginning of the video. We'll. Have this flow save as a template so that you can clone it with all of these nodes already built for you.
So it looks like our AI has finished generating the fix for us. So let's apply changes. I don't see anything happening. Let me try and see if it, if it did actually fix it. So I'm gonna enter the input and let's test it. Okay, so this is still not working.
What I'm gonna do is just quickly fix this, uh, off camera and then I'll resume back.
I'm back and I just, , fixed the node with, , a little bit of help from chat GBT. And now when I test it with the input you'll see here that we get back the message. , So we've now applied the fix to our flow and we've shipped it. So now all we need to do is go back and send a new message to our WhatsApp bot. And of course, we're not gonna get any reply back as yet because we haven't handled that part of our workflow. But if we go back to Buildship, we should get a auto generated.
Reply from Claude in a sarcastic tone. We can verify that by inspecting the logs.
And we're getting back a response here. So let's, , expand this. Let's look at the output here for the cloud text generator, and here's our output. This is too long actually. , I don't like this. What we're gonna do here is, , maybe change model. Let's go to GBT three point, , five sonnet, and we're going to say, give sarcastic replies.
, We're gonna update the flow again. , Actually I should say and be concise. Yeah. 'cause I don't want a long explanation. Okay. So this is shipped and, , let's try. Hello world. Yeah, let's go back to our Buildship workflow and, , refresh and we should get the new log streamed in.
, Great. Now this is what I'm looking for. , We get our response back from Claude and here it is. Oh great. Another hello world. How original? This is good, ? So we fixed our flow. And the next thing that we can do is add a node so that we can start replying back to messages. We're going to add a new node here, and this node is not part of the buildship nodes library. So what we're going to do is generate that with ai.
We're gonna go back through the documentation and let's find, , messages. And it's interesting because you can see that you can send different types of messages. So we're gonna do text message, maybe we do image message if we have time. But you can see like, you can send video, document, audio, even location based, uh, messages.
So let's find out how we can send a text message and, uh, this is the API documentation. And we have some code examples here. So this is good because we're gonna give this to Compass to improve the results that it generates for us.
I'm gonna go to the TypeScript example, and I'm just going to copy this snippet of code. And it looks here, like the data we need to supply is input is the phone number we want to send a message to, as well as the message that we want to send.
And then an API key. So let's go back to Buildship and I am going to bring up Compass. And then here, I'm just going to enter a new prompt.
I need you to help me generate a node to send WhatsApp messages. This node will need three inputs, first for the API key second for the two number. That is the number we want to send the message to. And then lastly, the message that we want to send. I'm going to attach some sample code that you can use for reference.
And now I'm just gonna paste the sample code here and let Compass do its thing.
So while that's generating, I'm going to go back to the WhatsApp send platform and I'm going to need my API key. So I'm just going to. Copy is API key. I know I'm exposing this in the video. That's okay. I am going to reset this afterwards. So let's just grab this and let's see how we're doing. Looking good.
So we have the three inputs that we ask for. The API key, the recipient phone number and the message text. And obviously this is going to fail because in this, uh, test try, it's entering an invalid API key. So. We expect that not to work, but let's just move this above the output node.
So I first want to take a look at the code that it generated. I know from just looking at the code that it didn't get this entirely correct because we need to pass as headers at the bearer API key that we just copied.
So I'm just gonna grab this and come back here and, oh, we already have the header. So actually I just need this portion, so I'm going to add that here. And, , for the, your API key, I'm just going to inject the API key here and let me just fix this up. Okay. So I don't need the API key here. , And then what about the body?
So it didn't get that right either, so I provided sample code, but it looks like , it's still struggled generating the, the right code for us here. , That's okay. We're going to fix this. So the data here needs to change. The text, , it's not message, but text. Whoops. Let's change that to text.
And then phone numbers is for some reason an array, but you can see here it's just a string. So we're just gonna change that. , instead of the field being named number, we'll change it out to two two. And then phone numbers, , doesn't make sense. So let's just, , from plural, let's change it to singular.
, We don't need to do any of this.
So we're getting an error here because our input is called, , recipients. , Let's just change that to, , phone number. , We're getting an error still because we need to go to the inputs and, , change this, change the key from recipients to phone number. And, , this is not an array, this is just extreme.
And, uh, looking good. So let's, uh, go back to know logic. Besides that, everything else looks good. Okay. We just need to fix this as well. So this will be the phone number and we're good to go. Okay. .
If you know how to code, then that's good. You can just, review the documentation and then you can quickly, , spot check where the issue is. If you don't know how to code, you could easily just, , copy that into chat GBT and say, , hey, can you please fix this for me using this sample code?
. , I'm gonna come here and now we can paste that API key. And let me just minimize this. Okay, so now we need to enter the recipient phone number and I think I need to enter it with the country code. Okay, so I'm just gonna enter my phone number here.
And, , what message do we wanna send back? For now, let's just say hello and I wanna see if I will receive this message.
Nice.. So we get back a success message here, and you can see I've gotten a new message from the bot. So it's telling me, hello. This is a test message sent via the. What WhatsApp sender, API, and , that's the message here. So let's say hello there. Let's try it again.
And, , yeah, we're getting the messages, so that's great. , Up to this point, we've successfully collected our WhatsApp phone number to bill ship. We're able to. Now send messages as well, , but we don't wanna send back static responses here.
We wanna send back dynamic responses, and we already have our claw text generator node generating sarcastic replies for us. So what we can do here is just, , remove this, . Hardcoded message and then we can just use the output of the cloud text generator node. So I'm just gonna update my flow.
Now we can go back to the bot and, , let's test this out. How is it going?
That's amazing. All right, let's try a different one. Uh,
what's your name?
And would you look at that?
Now we have a basic version of robot working. As you can clearly see, we're able to send messages and now receive back AI generated responses.
It may not look like much, but what we've just accomplished is pretty amazing. We transferred a spare phone number that we had doing nothing into a fully functional WhatsApp bot. This means that you can take any phone number that you want using the WhatsApp sender, API convert that into a bot using bill ship's automation toolings,
and the result is a 24 7 agent that you have available ready to serve your customers.
Now before I end this video, there's one more thing that I want to do and that is explore how we can send back images as responses. So we go back to the documentation here you can see that there's code examples for sending an image as a message, and the only difference here is that we can set a image URL feel, which we can just point to an image URL that we want to send back.
I'm gonna go back to my, , buildship flow, and then this is my node. And then let's try to do it as ourself. So we're just gonna come here and add a new input. , We're gonna call this, uh, image URL, and for the label, let's just say image, URL, and, , the type is string. That's good. So now we can go back to our flow.
Let's add that input here. Image, URL. And then, , yeah, we just, , need to send back, uh, image like this. So in the data, just paste image, URL and let me fix this.
Yeah. And then instead of this, let's just use the image URL input. . That's good.
And let's see if we're gonna be able to send an image.
But what image do we want to send? , What I'm gonna do here is remove the claw text generator node and replace it with a GBT image generator node. And then from our bot, we're going to describe an image that we want to generate. And then our flow is gonna generate that image for us and then send it back as a reply.
So let's do that. I'm going to come here and just delete this, uh, node. And now let's add a new node and we're going to go down to open AI I, and then we're gonna drop in the GPT image generator node.
I'm just gonna switch this to use credits. So for the prompt, we're gonna use the message that we extract. So we'll just grab that there and, , let's use the latest image gen model from OpenAI. I, so this is going to return an instance of a bill ship file. What we're gonna do is upload that to. A buildship storage so that we get back a public URL.
So I'm gonna add this upload file node for the file. We're gonna use the output of this image generator node folder part. We're just gonna say AI images. And for the file name we can say, , test thing pg.
Okay, so you can see that this node will return a download URL, and that's what we're going to pass here as the image URL in the Send WhatsApp message node. So just grab that. And, since we removed the cloud text generator node, we just need to add a message text here. So let's just remove that and say image or GPT image.
, and I think that's all the updates we need to do to our flow to be able to start sending back.
Image messages. So let's just, uh, update our workflow
and now this time when we send the message, let's ask our bot to generate an image of a dog floating in space with a cut. So let's send this message
and would you look at that? We get back our AI generated image so now our bot is evolving into multimodal land because not only are we able to output text, but as you can see, sending back images is also possible.
And that's as far as our WhatsApp bot will go. And if you've made it to this far in the video,
then, now, you know. There's an easier alternative that you can take advantage of to blow your own WhatsApp bots.
Just sit back and think what we just did.
I had a spare phone number just lying around doing absolutely not a, and using the WhatsApp sender API platform, I was able to transform that number into an AI powered WhatsApp bot.
And as you just saw throughout this video, Buildship has no integrations with this particular platform,
but what really sets Buildship apart from the pack
is that just because an integration doesn't exist, that doesn't mean that you should give up.
And as you just saw, we generated a couple of nodes using ai, and even though the process wasn't perfect.
With the trivial trial and error, we were able to get those nodes working.
So what are you waiting for? If you have a spare phone number just lying around, or any phone number that's connected to WhatsApp and you want to transform that into a powerful WhatsApp bot for your business or for your own personal use, then get started today.
As promised, we're going to be sharing this flow as a template. So make sure you check for that link in the description of this video. Now, by the time you clone that template into your own Buildship project, you might notice some differences to this flow
because we may make some optimizations. But the core concept and idea that we just covered in this video is still going to be a part of this workflow.
And that's all for this one. Until the next video, happy Bill Shipping.
By BuildShip
By BuildShip
