Send User Data from WhatsApp to Your CRM Video Tutorial

The webhook block  allows you to send data collected in a bot to external apps or servers, or bring data from outside sources to the bot.

In this video we will help you understand what the Webhook block is capable of doing in Landbot. Keep in mind that it’s a feature for more advanced users.  

The Webhook block is fully compatible for channels like WhatsApp, Messenger, API chatbot and Web Chatbots.

—---

So, let’s understand how to use it with an example. We will build a very simple WhatsApp chatbot from scratch that asks for the Name and email. It then sends that information to Hubspot, a quite popular CRM, to create a contact there. After that, on the same flow, we will ask for the company name and using another Webhook block, update the contact information of that same user.

Consider that, with this example, we are focusing on the Webhook block and not so much on the overall bot’s conversation.

For that, there are a set of steps we will follow:
- First we will create the bot with it’s basic questions.
- Then, in the hubspot API documentation, we will copy the code we need in order to create a contact.
- Thirdly we will use Postman, an application used for API testing, that will dissect that code and simplify the next process.
‍

That will be setting up and testing the webhook block in Landbot.

Keep in mind every API is different, but this workflow using Postman is usually a great approach when starting out with the webhook block in Landbot.

So, let’s get started.

—----

Let’s go and click on build a Chatbot, select WhatsApp, and start from scratch.

We will keep the flow simple since we are focusing here on the webhook block. I’ll just change a couple of things to the Welcome message. Great.

Now, I’ll add a question name block, with its respective variable associated with it.

And after that a question email block. Same here with the variable. We need to capture it.

Great. So now we are capturing these two questions in their respective variables.

Now we want to send This information to hubspot and create a contact there.

For that we will follow the flow with a Webhook block. Great! Now what? [GIF: You tell me]

Well, we can’t just start writing and filling up all of these parameters. We have to know exactly what we want and what we need. As I mentioned before, we want to create a contact in Hubspot.


So, let’s go to Hubspot's developer documentation. Searching in developers documentaation is where you probably spend most of your time. I’ve done my research before recording this video so I already know where to find it.

So, Here as you can see, is the section to create a contact.

Here you can find it’s information and parameters. We are interested here in the Request, specifically in the cURL. The cURL actually stands for Client URL, it’s used to transfer data to and from a server, which is exactly what we are doing. [GIF]

So we will copy this code and head to Postman. Postman is a very useful tool since it simplifies even more each step. We recommend using it.

Just like with Hubspot, creating an account in Postman is free.

Once inside head to Workspaces, and My workspace, And Here i’ll click on import. We want to import the code we just copied in Hubspot. Click on Raw text and paste it there. Continue and Import.

Now, you might have noticed, maybe not,  but we are starting to see some similarities here to Landbot. Things like the URL,  words like Params, Headers, Body. And that’s what is great with Postman, it separates all the important information for you to copy and paste in Landbot. [Funny GIF]

First of all let’s start with the URL, Copy it and paste it here. Make sure it’s set to “Post”.

Now, let’s move on to Params. Params are information that will be added to the URL. As you can see when I type here something, it’s added up in the URL in green. In This case, we would have to add the “hapikey”, but if you look closely, it’s already added in the URL we copied, so we don’t need to do that. What we need to do is find our unique API key in hubspot.

So let’s head back to Hubspot. Not to the developers Documentation but to our actual account, wich is free to create one. Go to Settings, Integrations, API Key. If it’s your first time it will tell you to create one. I already have this one. Make sure to copy it. And paste it back in Landbot. Replacing the text.

Great, but we are not done yet with the block. Let’s head back to Postman.

On headers we need to copy and paste the key, wich is “content type” and it’s value, wich is “aplication/json.

For the body, copy this code and paste it in Landbot, where it says Customize Body.

Now, we need to change the body since this one doesn’t make much sense to our usecase. We are sending Name and email, nothing more. So let’s delete the things we don’t need.

Now, delete the values and type down the corresponding variables from the Landbot. Make sure they are between quotation marks.

Okeey, so the webhook is set! [GIF]

We just need to test it to make sure it works. To test it add some random test variables.


And click on Test the request [GIF → Cross fingers]

Great! So if the status code is a number around the two hundrest’s we are good to go! As you can see, if we now go to contacts in Hubspot, and refresh the site, the contact has been created.

Nice!
—
Now, let’s move on to how to update this contact created.

In order to update a contact, we need an ID that verifies that we are actually updating the correct contact. Usually the ID is a number. As you can see, In the test response body, the first thing we see is the ID and a number that Hubspot sent us. We need to store that number.

To do so, go to save responses as variables. Here I'll type the name Hubspot_id in the string format. And up here choose from the response body, the id. This way It’s saved inside the variable called hubspot_id inside landbot.

Okey, we now have that. Let’s put the bot on Fullscreen. We’ll later use Postman

So, let’s add a text question block asking for the company name, with its respective variable to store the answer by the user. And after, an other webhook block.

Same approach as before, in order to set up the webhook that will update the contact, we need to go to the Developers documentation in Hubspot and look for the correct endpoint. In this case Update. Copy the Curl code.

And do the same as before, go to Postman and import the code there.

Click on Import, Raw text, paste it there and import. Let’s put Postman and landbot side by side like before. It’s easier to copy.

So, let’s start copying the URL in Postman and paste it in Landbot. Notice that now it’s Patch, and not Post like before. Let’s also put the API key, I’ll copy it from the previous Webhook block. Also, since we are updating a contact, it’s essential to add the huspots user ID in the URL, right before the question mark, like it says in the developers documentation.

I’ll speed up the copying process from Postman.


For the body, we just want to update the company name, so we delete all the others and add the variable.

Now, let’s test it.

Let’s add a random company name

And for the Hubspot id, if we want to update the previous created contact we need to know it’s number ID. I don’t remember the number so I’ll check in hubspot. If you click on the contact, up in the URL should be the ID value we are looking for. Copy it and paste it here

Great! Click on test and great! Trwohundred

If we head back to Hubspot and refresh,  we wil see that the contact has Nasa as company name. Cool!

And we are done! if you actually watched all the way here you are a champ! [GIF]

Let’s now have some fun and actually test it on our phone as if we were the end user. For that I will need to link this bot with a WhatsApp testing channel. Let me quickly do that…

Now to test it you could do it with WhatsApp Web but I prefer using my phone. I’ll scan the QR code.  

I’ll type my name

Email

Now if we head to Huspot and refresh the contacts site we will see it there without the company name.

Let’s now type the Company name. And refresh again the contacts page in Hubspot. And as you can see it now has the company name I just typed!

—

So we are Done!! Hope this video helped you understand how to actually use the Webhook block.

To recap. We built a WhatsApp bot from scratch, with some basic questions, so that With a webhook we could send all that information to Hubspot. For that we went to the hubspot documentation, copied some code there and pasted it in Postman. Postman then dissected the code to copy it easily back to Landbot.
‍

Once the Webhook, to create a contact, was done. We moved to updating the contact in hubspot of that same user.

As you may have seen, it’s not an easy process, but the possibilities you get to integrate with so many API’s is something worth trying.

Make sure to subscribe and hit the notification bell to keep up to date with all this type of content.  Thank you for watching! And I’ll see you around.