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

Integrating Bubble.io with Flock involves creating an application in Flock, getting the application’s client ID and client secret, and then using them to set up an API in Bubble.io. Follow the detailed step-by-step guide below to successfully integrate Bubble.io with Flock.

Step 1: Create an Application in Flock

• Go to the Flock developer dashboard by opening your web browser and visiting: https://dev.flock.com/.
• If you haven't already, sign in to your Flock account or create a new account.
• Once you're in the Flock developer dashboard, click on "My Apps" in the top navigation menu.
• Next, click on the "Create a New App" button to start the process of creating a new application.
• You need to fill out the application form that appears. This includes the App name, Description, App Logo, and Redirect URIs.
• When filling in the Redirect URIs, use: https://bubble.is/site/yoursitename/version-test/api/1.1/oauth\_redirect and replace "yoursitename" with the actual name of your Bubble.io website.
• Agree to the Flock API terms and conditions by checking the box.
• Click on the "Create App" button to finally create your Flock application.
• Your application will now appear in your Flock dashboard.

Step 2: Get Application Client ID and Client Secret

• Go to your Flock dashboard and click on your newly created application, that you want to integrate with Bubble.io.
• You will see your application details, including your application's Client ID and Client Secret.
• Copy both the Client ID and Client Secret and keep them somewhere safe. You will need them for the next step.

Step 3: Set Up an API in Bubble.io

• Go to the Bubble.io editor by opening your browser and visiting: https://bubble.io/.
• Sign in to your Bubble.io account or create a new one if you haven't yet.
• In your dashboard, select the app you would like to integrate with Flock.
• Once inside the app, from the left-hand side options, click on "Plugins".
• Click on the "+" (Add plugins) button. This will open the plugins menu.
• Here, click on the "API Connector" Plugin and install it.
• Once installed, you will see a new plugin added to your installed plugin’s list named “API Connector”.

Step 4: Configure the API in Bubble.io

• Click on the "API Connector" option from the installed plugins list.
• You will then see the API Connector settings window. Here, click on the "Add another API" button.
• A form will appear where you must fill in the API details:
  • for the API name, you can use any name you want, but it's recommended to use "Flock" for simplicity.
  • the next part, “Authentication”, you should choose OAuth2 User-Agent Flow.
  • in the "App ID Key", insert the Flock application's Client ID from Step 2.
  • in the "App Secret Key", insert the Flock application's Client Secret from Step 2.
  • in the "Access Token Endpoint", use: https://api.flock.com/accounts/oauth/token.
  • in the "Authorize Endpoint", use: https://api.flock.com/accounts/oauth/authorize.
  • in the "Scope" field, you should enter the exact permissions your application needs.
• Click the "Initialize / call" button to run a test and initialize the call. You should receive a status that says "API is set up".

Following these steps will successfully integrate Bubble.io with Flock. You can now run and test the integration using various Flock and Bubble.io functionalities.