Bubble.io and WordPress integration: Step-by-Step Guide 2024

Step 1: Begin with Bubble.io

Prior to starting the integration process, you need to have your application set up in Bubble.io. Assuming you already have an account, we'll start from there:

• Log into your Bubble.io account,
• Navigate to your dashboard,
• Choose the application you want to integrate with WordPress or create a new app.
• Once inside the app, click on “Settings” in the primary navigation menu.

Step 2: Set Up API Endpoints in Bubble.io

You'll need to communicate through APIs between Bubble.io and WordPress. First, set up the API endpoints in Bubble.io:

• In the app’s settings page, click on the “API” tab,
• Check the box allowing Data API,
• Check the box for This app exposes a POST/Workflow API,
• Click on “Add an endpoint” and name it according to your preference (remember the name, you will need it later).

Step 3: Configure Data To Be Sent via API

Next, define what data you want to send to WordPress:

• Still on the API page, scroll down to the endpoint you’ve just created,
• Work on the POST settings,
• Define the types of data you want to send – for example, you might want to include a user's name, email, and profile picture,
• For each data type, provide a key and define it as optional or required.

Step 4: Open WordPress and Install the Rest API Plugin

Now it's time to switch gears and log into your WordPress:

• From your WordPress Dashboard, go to "Plugins" > "Add New",
• Use the search bar to look for "Rest API - Filter Fields" and hit enter. This plugin helps filter and simplify the data you receive,
• Find and install the plugin named "REST API – Filter fields" by Arjun Jain,
• After installing, don’t forget to activate the plugin.

Step 5: Test the Rest API Plugin

Before proceeding further, ensure the plugin is working properly:

• In a new browser window or tab, type your WordPress site's URL followed by '/wp-json/' (Example: https://yourwebsite.com/wp-json/),
• Press enter,
• It should return the JSON data of your WordPress site.

Step 6: Install Http Request Plugin

A crucial step when integrating Bubble.io and WordPress is facilitating communication between both platforms. This is where the HTTP Request plugin comes in:

• In your WordPress dashboard, go to "Plugins" > "Add New",
• Search for "Http Request",
• Find and install the plugin named "HTTP Requests" by KubiQ,
• After installing, make sure to activate the plugin.

Step 7: Set Up an Action with the HTTP Request Plugin

Now, create an action with the HTTP Request plugin:

• In your WordPress dashboard, go to "HTTP Requests",
• Click on "Add New",
• Provide a title for your action,
• Go back to your Bubble.io page, copy the API endpoint URL you created before, and paste it in "URL to call",
• Set method type as "POST",
• In the 'Headers' section, click on 'add line' and set ‘Key’ as ‘Content-Type’ and ‘Value’ as ‘application/json’,
• In JSON body, you need to format the data you want to send using the structure:

  {
  "data": [{"Key1":"Key1Value", "Key2":"Key2Value", "KeyX":"KeyXValue"}]
  }
  

• Substitute "Key1", "Key2", "KeyX" with the keys (data types) you set up in Bubble.io,
• Replace "Key1Value", "Key2Value", "KeyXValue" with the relevant WordPress fields.

Step 8: Confirm the Entire Setup Works

The final step is to verify your setup works:

• Go back to the WordPress page where you created your HTTP request,
• Click on “Save Changes”,
• Then click on “Test Call” on the right side of the page,
• On the page that appears, if your test call was successful, you’ll see a 200 status code,
• You can also go back to your Bubble.io app and check the "Logs" > "Server logs" to see if the requested data arrived.

Remember that for this guide, actions in WordPress will trigger events in Bubble and vice versa. Therefore, you need to have a solid understanding of what actions in WordPress you want to get data from or send data to in Bubble. Enjoy your new integrated Bubble + WordPress environment!