Zapier is a fantastic service for helping you integrate different web applications, including sending data into your Bubble app. In this Bubble tutorial video, I'm going to show you how we can send data from Zapier to Bubble. And I'm going to use an example of sending data about a podcast. In this case, podcast is going to be a Diary of a CEO.

Bubble tutorials

But before I launch into that, if you're learning Bubble and you want access to exclusive Bubble tutorial content, you can only find that on our website at planetloadcode.com. But let's get started with Zapier.

Set up the Zapier RSS trigger

So I'm going to create a new Zapier and use the RSS by Zapier. And now I'm going to say when a new item is added to the feed. Now I'm using the RSS trigger here. You could use any of the thousands of services that Zapier supports. The point is I'm going to show you how to send the data into Bubble, whether it is RSS or something else. So we're going to retrigger this when the new item is added to the feed. And then I've just found this service here, which allows me to copy an RSS feed for a podcast. I'm going to paste it into here. And click continue. Then test the Zap and just see if it brings data in. And yes, this looks like Stephen Bartnett's content. Excellent. Continue with selected records. So then what do I want to do?

Connecting Zapier to Bubble

Well, is, well there was, okay there is Bubble as an application. But I found that a little bit limiting in the past, particularly if you're dealing with different versions of your Bubble app, like your dev version, your live version. So I'm gonna just do it in a more kind of traditional way, which is to send data to a webhook. And you'll notice that webhooks by Zapier, you have to have a paid Zapier account. So if that's a barrier, You could probably get this to work by using the Bubble here, but like I say, I found that a bit limiting. So we'll use webhooks for now. And it took me a long time actually to upgrade my Zapier account. I was really determined to try and cut costs down, but I've just found that the webhooks feature in Zapier unlocks tons of potential because it isn't just outbound webhooks like I'm sending from Zapier to Bubble. You can also do like Bubble to Zapier, and I'm going to cover that in part two of this video. So, webhooks, and we'll choose an event, and so we will post because we're going to send a chunk of data.

Receive data from Zapier with a Backend Workflow

Right, and now I need to go to my Bubble app, and I'm in backend workflows, and I'm going to create a backend workflow. I'll just call this one Zapier for now. It needs to be public, and I think all I'll demonstrate with this is if I add in a new data type, I'll call it podcast, and we'll just take a little bit of data. In fact, we'll take his title, keep it simple. We'll take the description as well, just so I can demonstrate that we can send more than one piece of data at a time. I mean, you could send all of the details of the podcast across text. So going back into my backend workflow, I'm now going to put this into a detect data mode. And so this gives me an endpoint.

Understanding Bubble endpoint URL structure

And there's two things to point out here. One is that this is the URL of my app without me having connected up my domain. Now my understanding is that that whether you've got your domain or not, basically the final part, everything after this slash here will be the same and it's interchangeable. But if you think you might change the domain in the future, it might be worth sticking with the BubbleApps.io subdomain, the temporary domain that Bubble gives you. Three points, actually, points. I hear that was number one.

The second one is that API endpoints, backend workflows in Bubble, or endpoints in particular are version specific. So this is my version test. That would mean that throughout this demo I'm going to be just sticking into my test, my development environment, but if you wanted to send data to your live app you would need to remove the version test section here. So it would be .io/api and then the rest of it.

Third point to point out is that we are in initialize mode. This is our way of instructing Bubble the structure of the data that it's receiving from Zapier.

And so I can copy this and I need to teach Bubble the data structure. However, I need to go back into Zapier and remove initialize for it to work in production in the long run because initialize is only active when I've got this window open here and Bubble is ready to learn the structure. So I'm going to paste in the URL. You might be able to do form but I'm just a bit more familiar using JSON. And then we'll start adding in the data. So we'll say title and then we'll take the title from the dynamic data provided by our step one and I'll add in a description. And I think the rest is now okay.

Testing the Zap

So we'll click continue and I'll click test step. And first of all check to see that there's no error coming through from Zapier and there isn't, and then I'll go back into my Bubble up and you can see that the two parameters I've set up have arrived. I have my description and my title. So that would then mean that I can go "data create a new thing" just to flesh this example out a bit more, and I can say "request data description" and "request data title. Then if I go back to Zapier, I'm going to edit this, remove initialize, and then retest the step. Ah, and it's not authenticated. That is because I have not ticked this box here.

This workflow can be run without authentication. Now you need to check out whether this is the appropriate privacy for your app, but I'm simply getting it running here, which is basically to say that if anyone sends data to this endpoint, whether it's Zapier or not, it's going to be able to create a podcast. That's not great security, you would want to tighten that up, but for now let me test it again and it's worked. And if I go back into my Bubble app, AppData, Podcasts, you'll see that I have the entry.

So that's it. That is how you can go from a Zapier Zap to your Bubble app, how you can send data from any of the thousands of applications available through Zapier and and send data from Zapier to your Bubble app.

Stay tuned for part two because in part two I'm going to be doing the opposite. How do we send data from our Bubble app to Zapier? So make sure you've liked and subscribed so you don't miss that part.