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

Step 1: Create Your Bubble.io Project

The first thing we need to do is to create a new project on Bubble.io.

• Go to Bubble.io (https://bubble.io/) and log in to your account. Create an account if you do not have one.
• After you log in, click on the 'New App' button on your dashboard.
• Fill in the necessary details such as Name, Application type, and choose a plan for your new app, then click on 'Create a new app.'

Step 2: Create Data Types and Fields

Now that your application is ready, you need to create the necessary data types and fields that you will work with.

• Go to the 'Data' tab in your Bubble.io editor and click on the 'Data types' option.
• Click on 'Create a new type' button, and fill in the name of your data type like 'User', 'Post', etc.
• After you have created a Data type, you can now add fields to the data type by clicking on 'Add a new field' button and typing the name of your field.

Step 3: Setting Up Autopilot

• Create an account on Autopilot if you don't have one, and navigate to your dashboard.
• Once there, click on the 'Journey' tab located on the left-handed menu.
• Here, you can create a new journey by clicking on the '+ New Journey' button, or choose from an existing journey.
• In your journey canvas, select the 'Trigger' action from the left-handed menu and configure it based on your preference.
• At this point, you'll also need to create the outcome actions that Autopilot will perform.

Step 4: Integrating Bubble.io with Autopilot

Now that you have everything ready, the next step is to have Bubble.io send data to Autopilot.

• In your Bubble.io editor, go to the 'Plugin' tab and click on the '+ Add plugins' button.
• Use the search bar to find the 'API Connector' plugin and install it.
• Once installed, navigate to the Plugins settings by clicking on the 'Plugins' tab on the left-handed menu and then select 'API Connector.'
• Click on '+ Add Another API' and then type in a name for your API integration. This could be something like 'Autopilot Integration.'
• Enter the Base URL which is https://api2.autopilothq.com/v1/
• On the 'Shared Headers' section, enter the following:

Header: autopilotapikey
Value: (Enter Your API Key Here)
Content-Type: application/json

• Next, go to the 'Add Call' section, choose a verb (such as POST), enter the endpoint, mark it as action, and set up the body by clicking on JSON.

Step 5: Setting Up Workflow Actions in Bubble.io

The final step is to set up workflow actions in Bubble.io to send HTTP requests to Autopilot.

• In your Bubble.io editor, go to the 'Workflow' tab, and click on '+ New Workflow.'
• Choose an 'Event' for which the workflow will run (e.g., button click, page load).
• After that, click on '+ Add action' to expand the dropdown list and choose the 'Plugins' option.
• Under the plugins option, select 'POST to Autopilot' (or the name you chose for the API call).
• At this point, you will need to fill data that will be sent to your Autopilot journey.

And that's it! You've now successfully set up an integration between Bubble.io and Autopilot. Remember to test your application thoroughly to ensure the integration is working correctly.