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

Step 1: Head to Bubble.io and Shippo
Before you can start the integration process, make sure you have accounts on both Bubble.io and Shippo. Visit https://bubble.io/ and create an account if you don't already have one, and do the same for Shippo at https://goshippo.com/.

Step 2: Create a New Bubble Application
Login to your Bubble.io account. On the homepage, click on the New App button. Type in your desired application name and click Create an app.

Step 3: Obtain Shippo API Token
Next, head to your Shippo account. Click on the settings icon from the dashboard, then navigate to API. Here you should be able to find your API TOKENS. It's recommended to use the TEST TOKEN first before using the LIVE TOKEN.

Step 4: Install API Connector Plugin
Now back to Bubble.io's editor interface. Click on Plugins located in the left side menu, then click on the Add plugins button. A new window displaying a list of plugins will pop up. In the search bar, type "API Connector" and click on the one made by Bubble itself. Click the Install button to add the plugin to your Bubble.io app.

Step 5: Set Up API Connector
Once you've installed the plugin, go to Plugins again in the left side menu and click on API Connector. Click on Add another API, and in the pop-up window, type in the name of this new API, something like "Shippo API".

Step 6: Configure Shippo API
For Shippo's API, there are various calls you can configure such as Get Rates, Create Transaction, Get All Carriers etc. To set up these calls:

• Click on Add another call.
• Fill in a unique name for this API Call.
• For the Method, select GET or POST depending on the call type.
• In the URL section, copy and paste the Endpoint URL for the specific call from Shippo's API documentation.
• Check the Private box and add “Bearer ” in front of your Shippo's API Token in the Value field.

Step 7: Initialize and Test API
After you've set up the API, click on the Initialize Call button to test the API. This will either give you a success message if everything has been set up properly, or will throw an error showing what went wrong.

Step 8: Use API Data in Your Application
Post a successful API initialization, you can now use this data in your Bubble.io application. To do this, go back to your Bubble.io editor and go to where you want to display the data. For example, you can add a new text element to your page, and in the dynamic data expression, use Get data from API.

Step 9: Test Your Bubble.io Application
Finally, test your application by clicking on Preview. This will open a new browser window where your application runs. You can test to see if the Shippo data is correctly being pulled into your app.

Step 10: Going Live
If you're happy with everything, you can switch your Shippo API token to the LIVE TOKEN and click on Deploy in your Bubble.io editor. This will publish your Bubble app online, where users can access and interact with the live data.