Bubble.io and DHL API integration: Step-by-Step Guide 2024

Step 1: Create Your Bubble.io App

First, navigate to Bubble.io and sign into your account. If you do not have an account, you will need to create one by clicking on the Sign Up option. Once you are signed into your account, click on the New App tab on the left panel. You’ll be asked to name your app. You can name it anything you want. Confirm the creation of your new app by clicking on the Create a new app button.

Step 2: Install API Connector Plugin

Next, on your app’s dashboard, click on the Plugins tab found on the left panel. On the top of the plugins page, click on the Add plugins button. This will open a new window with a library of available plugins. Type API Connector into the search bar and install the API Connector by clicking Install button.

Step 3: Setup API Connector

After installing the API Connector, click back on its tab found on the left panel in your app’s dashboard to set it up. On the API Connector page, click on the Add another API button. You’ll need to name your API. You can name it DHL for convenience. In the Authentication drop-down menu, select the authentication type. DHL API usually uses Basic Authentication, but this may vary depending on the specific DHL service you are integrating.

For Basic Authentication, you’ll have the option to input a Username and Password. These will be the credentials provided by DHL when you register for their API service.

Step 4: Register for DHL API Service

To get your DHL credentials, navigate to DHL API website and sign up for their API service. You might need to have a valid DHL account or create one. Once you have registered, DHL will send you a username and password that you’ll use for the API integration.

Step 5: Make API Requests

Having your credentials ready, head back to Bubble.io and input them into the respective fields in the API Connector. After this, you can begin adding API requests. Requests will be GET, POST, PUT or DELETE depending on the specifics of the DHL service you are integrating.

Input the DHL API endpoint into the URL field. The specific structure of this URL may vary but it should be indicated in the DHL API documentation. For instance, for tracking shipments, the API call might be a POST Request at URL https://api.dhl.com/track/shipments.

Below the URL field, there is an option to add Parameters. These parameters will depend on the specifics of your API call as provided in the DHL documentation. They may include things like TrackingNumber, ServiceArea, or other pertinent information related to your request.

Step 6: Initialize API Call

Once you have added all necessary details, click on the Initialize Call button. If everything is properly set up, Bubble.io will get a response from DHL API and automatically detect data from the API. Your integration should now be complete and the DHL API ready for use in your Bubble.io app.

Step 7: Use API in Your Workflow

To use the API in your app, navigate to the page in your app where you want to use it and open your workflow editor. For instance, if you want to display DHL shipment tracking information when a button is clicked, click on the button in your design view, then click Start/Edit workflow and add an action. Choose the API action that corresponds with your DHL API call. Bubble.io will make the API call in the background and then you can display the relevant data by dynamically referring to "Result of Step 1's..." in your workflow.

Note: Be aware that DHL may have other security procedures like generating an API Key or using Oauth2 in place of or together with username/password authentication. Be sure to fully read DHL's API documentation to ensure you are properly connecting to their service.