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

Step 1: Create Accounts on Both Platforms

Before proceeding, ensure that you have created an account on both Bubble.io and Doodle.com. If not, visit their websites:

• Bubble.io
• Doodle

Follow the instructions to complete the signup process.

Step 2: Understand the Workflow

Plan your integration process while considering the following:

• Which features of the Doodle application you want to integrate into your Bubble.io app
• When (i.e., at what point in your app workflow) you want these features to be triggered

Step 3: Install the API Connector Plugin

Bubble.io uses a plugin called "API Connector" to integrate with other apps. Follow these steps to add it to your Bubble.io account:

• From your Bubble dashboard, click on the Plugins tab.
• Click on the Add plugins button.
• In the search bar, type API Connector and click on the relevant result.
• Finally, click on the Install button.

Step 4: Configure the API Connector

You'll need to configure the API Connector plugin in your Bubble.io app to connect with Doodle's APIs.

• To do this, open the API Connector from the Installed Plugins list.
• Click on Add another API.
• Name the API as "Doodle API" or something that you prefer.
• For the Base URL field, enter Doodle's API URL: https://api.doodle.com/v2/.

Step 5: Authentication

Doodle's API uses OAuth 2.0 for authentication and authorisation.

• In the API Connector for Doodle, select OAuth2 User-Agent Flow under Authentication.

• Enter Doodle's OAuth URLs:

• Login dialog URL: https://doodle.com/api/v2/auth/login

• Access Token URL: https://doodle.com/api/v2/auth/token

• Put the relevant Client ID and Secret from your Doodle OAuth application here.
• Set the Scope as required by your application and Doodle.
• Redirect URI is your Bubble page where you want your users to be redirected after successful authentication. The format is https://your_bubble_app.com/api/1.1/oauth_redirect.

Step 6: Configure API Endpoints

After you configure the API for authentication, you have to define the actions or the endpoints.

• There are several actions that you can add as per your application's requirements like:
• List Polls
• Create Polls
• Get Poll
• etc.
• To add an action, click on Add another call under the API Connector settings.
• Provide a name for the call and select the type of API call (GET, POST, etc).
• Use the paths from the Doodle API depending on what are you trying to accomplish e.g., /polls for fetching polls.
• Define the parameters and headers as required by Doodle's API.
• Repeat these steps for every additional API endpoint you want to add.

Step 7: Setup Brush

• From your Bubble dashboard, select the Design tab.
• Click on any element in which you want the API data to populate.
• Choose the relevant API you set up previously and the correct method (API endpoint).
• Use Bubble's visual programming tools to manipulate the API's data.

Step 8: Preview & Test

Finally, to see your integration in action, preview your Bubble app, and perform the relevant operations. If everything is set up correctly, your Bubble.io app should communicate with Doodle seamlessly.

Remember to debug any issues by using Bubble's 'Inspect' functionality and checking the API calls in the 'Network' tab of your browser's developer tools.

Please refer to Bubble’s and Doodle's documentation for other advanced features and specific issues. Keep in mind the instructions may vary based on the complexity and features of your Bubble.io app.