Bubble.io Integration
This documentation provides a step-by-step guide on how to collect data from Bubble.io and create and embed dashboards within the platform using BI.P.EYE
The guide outlines the following steps:
By following this guide, you will be able to efficiently collect, analyze, and visualize your application's data within Bubble.io using BI.P.EYE.
Export data from a specific table in Bubble.io as a secure REST API:
This document provides instructions on how to set up a secure REST API within Bubble.io for exporting data from a specific table. The data API allows for the creation of a RESTful interface to access some or all of your application's data.
For instance, if you have a food delivery application and would like to enable users to view their past orders, the data API would facilitate the creation of a feature to allow for such access without having to manually build out the functionality.
The API leverages a flexible query language that enables users to search and filter through the data. Additionally, access to the API is regulated via Bubble's privacy rules, which ensure that only authorized users can view specific data.
To illustrate, we can consider a simple example where an app contains a button that refreshes the site upon being clicked.
Create an App on Bubble:
The following represents the app workflow in Bubble:
Every time the button is clicked, a new record is saved in the "refresh" object. This record includes the refresh time (date of creation) and the user ID.
You can view this in Data > App data.
All refreshes table (refresh object):
Create REST API in Bubble.io:
To create secure data access through an API, we will enable the data API and restrict access using a token. To do this on Bubble, you need to have a personal membership or higher to access the APIs.
Follow these steps to enable API access to your data:
Go to “Settings”
Click “API”
Check “Enable data API”
Check the box next to the object for which you wish to create an API
Click “Generate a new API token”.
Generating an API token is not enough in order to secure the API. We also need to tell Bubble.io to use privacy rules, so the data will return only when using an API token.
Securing the API using privacy rules
The combination of creating an API token with Privacy rules will allow to secure the API to restricted users only:
Go to “Data”
Click “Privacy”
Click on the desired data object
Click “Define a new rule”.
Check off the box “View all fields” under “Everyone else (default permissions)”
Rules are per object, so make sure you define rules for each of your data objects.
Now, this API will return data only while using an API token.
Let's test the API without an API token:
https://bipeye-embed.bubbleapps.io/version-test/api/1.1/obj/refresh
Let's test the API with an API token:
Collect the data from Bubble.io using BI.P.EYE.
Go to https://bipeye.com -> datasets -> create the dataset and select Bubble.io integration:
Enter URL + API_KEY:
Use pipeline settings to pick specific fields, define filters, formats, and more:
Create a dashboard in BI.P.EYE to visualize and analyze the collected data.
You can add multiple types of charts and save them to your dashboard:
Embed the dashboard in Bubble.io via iFrames.
As a 1st step, we need to create the iFrame script in BI.P.EYE:
Add an API KEY per dashboard and copy the <iframe...> tag:
Embed the dashboard inside Bubble.io:
The Embedding iFrames in Bubble allows you to use and display third-party platforms
Create an iFrame
Drag the HTML element to the main workspace.
Insert the HTML code under the appearance tab instead of “edit me...”
Use the <iframe> tag that you copied from the previous step:
Check “Display as an iFrame”
The content of iFrame/dashboard is only visible in Preview mode and appears as an empty container in the Bubble app editor:
The dashboard is now embedded inside Bubble.io
Last updated
