Introduction to Zapier and Bubble.io Integration
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 CEO 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 planetnodecode.com but let's get started with Zapier.
Creating a New Zap with RSS Feed
So I'm going to create a new Zapier and use the RSS by Zapier and now I'm going to say when the 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 add we're going to trigger 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 Bartlett's content. Excellent. Continue with the selected record.
Setting Up Webhooks in Zapier
So then what do I want to do? Well there is, well there was, okay there is Bubble as an application and 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 going to 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.
Setting Up Bubble Backend Workflow
So webhooks and we're choosing the event and so we will post because we're going to send a chunk of data. Right and I need to go to my Bubble app and I'm in back-end workflows and I'm going to create a back-end workflow. I'll just call this one Zapier for now. It needs to be public and I think all I demonstrate with this is if I add in the new data type I call it podcast and we'll just take a little bit of data. In fact we would 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 the details of the podcast across text.
Configuring the Webhook URL
So going back into my back-end workflow I'm now going to put this into a detect data mode and so this gives me an end point and there's two things to point out here. One is that this is the URL of my my app without me having connected that my domain. Now my understanding is 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 Bubble apps.io sub domain the temporary domain that Bubble gives you. Three points actually points I hear that was number one. The second one is that API endpoints back-end workflows in Bubble where the 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'll 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.
Adding Data to Zapier Webhook
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 description and I think the rest is now okay 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.
Creating a New Thing in Bubble
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 up and it's not authenticated that is because I have not ticked this box here run this work for 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 exactly 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 app data podcasts you'll see that I have the entry.
Conclusion and Next Steps
So that's it that is how you can go from a Zapier Zap to your Bubble up how you can send data from any of the thousands of applications available through Zapier 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.