How to Send Data from Bubble to Zapier

By far, Bubble is one of my favorite no-code platforms. Discovering it a few years ago was a game-changer for me. Since then, I've been able to quickly and easily develop web applications without writing a single line of code.

How to Send Data from Bubble to Zapier

By far, Bubble is one of my favorite no-code platforms. Discovering it a few years ago was a game-changer for me.

Since then, I've been able to quickly and easily develop web applications without writing a single line of code.

With Bubble, you can create and ship a sophisticated MVP in just a matter of weeks or even days.

This means you can get feedback from customers and iterate faster than ever before.

And the best part? Bubble has an incredible set of features like the API Connector, which allows you to integrate with most APIs seamlessly. Plus, it offers hundreds of plugins and pre-built integrations including Zapier.

I'll walk you through how to integrate Bubble with Zapier, allowing you to trigger any Zap workflow and send data from Bubble to Zapier.

And don't worry, if you need to send data from Zapier to Bubble, I've got you covered with another tutorial you can check out here.

Bubble App Configuration

To integrate Bubble with Zapier, the first step is to expose your app's API. This enables Zapier to detect workflow events and access your database to read, write, update, and delete data.

To manage your app's API, you'll need a Bubble account on the personal plan or above - a free plan won't cut it.

Once you're set-up, navigate to the API tab in settings and check off 'Enable Workflow API and Backend Workflow' and 'Enable Data API.' Below the Data API, you'll see a list of your app's data types. Check off the types you want to expose based on what you want Zapier to access. For example, if you want to send customer data to Zapier, select the 'Customer' type.

If you're unsure which types to select, just think about what you want to achieve with Zapier and select the relevant types accordingly. With your API exposed and data types selected, you're ready to move on to the next step of the integration process.

Bubble Data Type Set Up

To store basic customer data such as names, email addresses, and phone numbers, I created a data type called 'Customer.'

To create this type, simply navigate to the 'Data' in the Bubble editor menu and click on the 'Data Types' tab. Name it 'Customer' and add three new fields for name, phone, and email. Make sure to set all field types to 'text.'

With the 'Customer' type setup, you're ready to move on to the next step: setting up the Zapier plugin.

Setting Up The Zapier Plug-In

Download the Zapier plugin and you will see it in the installed plugins.

The Zapier plugin enables you to create a trigger event in Zapier directly from within Bubble.

When setting up the trigger event in Zapier, you'll be able to view all the available Bubble trigger events for your app that have been exposed via the API. This makes it easy to select the appropriate trigger event based on your integration needs.

To set up the trigger event in the Zapier plugin, navigate to the plugin and click 'Add another Zap trigger.'

Give the trigger a name and select the appropriate trigger type from the list of types available in your Bubble app's database. In this example, I selected the 'Customer' type as we're sending customer data to Zapier. Remember to ensure that the selected type has been exposed in the API section of your Bubble app.

Next, we need to create a front-end form to capture customer data. Once the form is complete, we'll build a workflow in Bubble that can perform the following tasks:

1) Create a new customer record in the 'Customer' type,

2) Trigger a Zapier event

3) Display a success message to the user.

Collect Data in Bubble (To Send to Zapier)

To create a form for capturing customer data, we'll create a new page in Bubble and set the page's content to 'Customer.'

This will ensure that the page is associated with the 'Customer' data type we defined earlier.

From there, we can add form fields to the page to capture the data we want to send to Zapier. In this example, we're capturing basic customer information such as name, email address, and phone number.

Next, we'll add a group to hold the form input fields. To ensure that the group is associated with the 'Customer' data type, we'll set the type of content for the group to 'customer.' In this example, we've renamed the group to 'Group Customer' for easy reference.

To capture the customer's name, phone, and email address, create three input fields.

Then, create three text fields for the field names and place each above the corresponding input field.

Add two buttons to the form below the input fields, placing them on top of one another. The first button will be a submit button, which will initiate the workflow for sending the data. The second button will display a success message, which Bubble will show when the data is successfully sent to Zapier.

Make sure that the success message element is not visible on page load. To do this, turn off 'the element is visible on page load' option in the layout section of the element.

You don't have to use a button for the success message. Instead, you can implement it as a container such as a group or as a visual element like a text field or icon.  

Setting Up The Workflow (To Trigger The Zap)

This workflow will commence when a user fills out the required fields on the customer request form and clicks the submit button.

To set up the workflow with the submit button as the trigger event, click the 'Start/edit workflow' button in the appearance section of the element.

Start by adding an action to create a new customer in the customer type. To do this, click 'Data (Things)' and select 'Create a new thing ...'

Next, select your type. You can use the type dropdown to specify where you want Bubble to create new things. Click the '+ set another field' button to add a field type and specify the data source. Add the field types email, name, and phone.

The data source for each field type is the corresponding form input field. Scroll down and select 'input [field type name]' for all field types (email, name, phone, etc.). This is how it should look ...

Step two will trigger the Zapier zap. Search for the action 'Trigger a Zapier zap' and add it.  

A drop-down menu will appear, allowing you to select the Zapier trigger. This will list all the zap-trigger events that have been created.

Select the result of step 1 (create a new customer) for the Zap Thing. This will send the output data of the previous step to Zapier.

The final step is to display the success message. Hover over 'Element Actions' and select 'Show.' Then, choose the element 'SUCCESS' from the dropdown menu. The workflow is now complete.

Preview the customer request form and make a test submission. The app should display the error message 'The Zap you tried to trigger has no active zaps.' This is normal.

Now, head over to Zapier to set up the zap.

Setting Up The Zap In Zapier

Create a new zap and select 'New Workflow Trigger Event' as the trigger event. With this event, the zap will trigger whenever a Bubble workflow including the plugin action is kicked off.

Next, add your Bubble account and then select the App ID. When you click on the dropdown, you should see a list of all your Bubble apps. Select the one you are using for this zap.

Select the app version. Since we previously made a test form submission from the test environment, make sure 'Development' (version-test) is selected.

Once you build your Zap, you can deploy your Bubble app to live for it to work in the live version.

In the Zap ID field, select the Zap event specified in step two of the Bubble workflow (Trigger a Zapier zap). For this example, our Zap ID is 'Customer Request Form New.'

Test the Zap, and Zapier should return the output data from the test submission of the Bubble customer request form.

As you can see above, Zapier returned the customer data that passed through the workflow. In addition to returning the customer's name, email, and phone, Zapier also captured the following:

  • Modified Date
  • Created Date
  • Created By
  • id

The returned data, especially the thing id, can be valuable as it can be used to reference the Bubble thing in the future.

Now that you have the output data from the Bubble trigger event, you can push this data to other apps by adding additional steps in your zap.

For testing purposes, it's recommended to publish the zap after adding at least one action step. Trigger the zap workflow event from Bubble a few times and verify if the data is being delivered to the intended destination.

The Bubble-Zapier integration is powerful for two key reasons ...

  1. Flexibility - A key benefit of using the Zapier plugin in Bubble, as it allows you to integrate your app with a wide range of Zapier-supported applications. While some of these apps may have a Bubble plugin, the plugin may have limited capabilities or not be supported by Bubble at all. With Zapier, you can still connect your Bubble app with these apps and leverage their features to enhance your app's functionality.
  2. Speed - Although you can use Bubble's API connector to connect your app with a third-party service that has an accessible API, I find it more convenient to use the Zapier plugin (if the app service provider is Zapier-supported). This is because Zapier-supported apps often have rich functionality and support common use cases.

As mentioned earlier, if you wanna learn how to send data from Zapier to Bubble, I got you covered with a full tutorial on this topic. My hope is that it will open up a whole new world of possibilities for your Bubble app. Just click on the link and dive right in.

Please let me know if you have any questions about this tutorial. If you found this helpful, please consider subscribing to my newsletter.  


What are you trying to automate and why? I'd love to know!

Do you have an idea for a tutorial?  Share it in the comments!

Need help with an automation? Hit me up - hello@joshnocode.com

I write weekly about business process automation hacks. If that's something you're into, join me, and let's automate together.