Introduction to Make.com and Bubble Integration
Make.com is a fantastic tool for integrating and sending data between different web applications. In this Bubble tutorial video, I'm going to show you how we can link Bubble with Make.com. I'll begin by demonstrating how we can send data from your Bubble app into a Make scenario or a Make workflow. If you're learning Bubble and want to see more videos like this, click the link in the description because on our website we've got hundreds of Bubble tutorial videos just like this one.
Setting Up a Make Scenario
We're going to send data from our Bubble app through to Make. Let's start by going into my Make account and creating a new scenario. The technology we're going to use, and the term that's going to come up a lot, is webhooks. It's basically the ability to send a notification with data attached to it from one service or third-party app to another.
Creating a Webhook in Make
Click here and then go for webhooks, and I'm going to say custom webhook and then add a new one. I'll call this one "Bubble app test". Make gives me a unique address, and this is an address that is expecting to receive data. I'm going to copy the address and go into my Bubble app.
Setting Up the API Connector in Bubble
In Bubble, go down to the API connector and add a new API. I'll call it "make.com" and then "send data". Now, this is going to be very particular to what you're actually wanting to do. Let's not forget that Bubble is so capable of integrating directly with other apps, but sometimes it's appropriate to have a service like Make.com or Zapier sit in the middle because it can make the connection quicker to set up or less technical, especially if you're having to look up a record and make changes to a record.
Configuring the API Call in Bubble
For now, we're just going to cover the basics. We're going to send a POST request to Make.com. I'm setting it as an action so that it appears as a node within a workflow in Bubble, and I can then insert data into that. Let's add some parameters where we can insert dynamic data. It's going to be specific to what you're trying to do, but let's say we're doing something with CRM. We could have name, email, and country.
Testing the Integration
These parameters can't be private if I intend to fill this field in a workflow. So we can say name: mat, email: mat@example.com, and country: UK. I'm going to go back into Make and check that it's waiting. Let's copy that address and send some data through to see what happens.
Initializing the API Call in Bubble
From Bubble's perspective, we need to initialize the call. This is to check that there aren't going to be any errors and that I filled in the data successfully. Let's initialize the call. It looks like Make is now listening.
Setting Up the Make Scenario
In Make, I'm going to add another module to print the data. Let's set it up to send a success message. Now, if I go back into Bubble and say it's going to get JSON back, let's try that.
Testing the Data Flow
I'm going to test the run in Make. So I'm going to send data. We can see it's gone through. You can see that the data has come through, and then I would be able to access that data in further actions in Make. From here, you can launch into any of the other integrations that are available in Make.com.
Creating a Workflow in Bubble
Now let me demonstrate how we put that into a workflow in Bubble. I'm going to create a new page called "make". I'll add some input fields and a button. When this button is clicked, how do I send that data to Make?
Setting Up the Workflow in Bubble
In the workflow editor, I go into plugins and find the Make.com send data action. Here, I would link my input fields to the different values in my Make.com action. This would send data into the webhook, assuming that I've got other integrations set up in my Make.com scenario and I've published the scenario to live.
Conclusion
If you want to see me do anything else with Make.com or Bubble, please leave a comment below. Remember to like and subscribe to support this channel.