Bubble.io Embed
Add readymade, scalable, and powerful CSV Excel import experience in your Bubble.io application.
1. Setting Bubble App
You must have a paid bubble application plan to use the Bubble Data API, which is necessary to push external data into the Bubble data store.
i. Setting up data type
Prepare a data type in your Bubble app where you want to push the CSV data. Ensure that the data type is Publicly visible
. Add custom fields to the data type as per your requirements.
Important: Manually add at least one entry to the data type to map columns accurately.
ii. API Settings
Go to Settings ⚙️
Go to the API tab
Click on Enable Data API
Activate API for the data type where you want to push the imported data
Generate the API Private Key and save it.
2. Setting up the Impler Application
Visit web.impler.io and log in.
i. Click on the "Create Import" to create the new import
ii. Give name and click on "Create & Continue"
iii. Enable Bubble.io destination
Go to the destination tab and enable Bubble.io. Fill in the following information,
Bubble App Name - This is the name of your Bubble.io app, in most cases it's available in a URL like https://bubble.io/page?name=index&id=impler-app&tab=tabs-1, in which
impler-app
is the id.Environment - Pick from a development or production environment, based on which environment your app is running on.
Custom Domain Name - If the environment is production, provide a domain name address like example.com if you have attached any custom domain to your application.
API Private Key - It is the API token that you have generated while configuring the ii. API Settings Bubble app.
Data Type - The name of the data type where data will be sent.
Once done click on Test and Save, which will check details with bubble.io and save the data.
iv. Map Columns
Click on Map Columns to automatically map fields from bubble data type to Impler.
3. Using the Plugin
The last step is to add a CSV Excel Import plugin to your application.
i. Install plugin
Go to Plugins and click on Add Plugins
Search for CSV Excel Import Plugin
Click on Install
ii. Using the Plugin
Now go to the Design panel (1) and search for CSV Excel Importer (2) which is available in the Visual Elements Section. Drag and drop Importer on the UI panel. It doesn't have any visuals so we can hide (3) it.
a. Initialize Importer on Page Load
Go to workflow panel (1). Click on Add Event and add Page Load event (2). For the added event add Initialize Import Widget action, which is available in Element Actions (3).
b. Add a Button on the Page and Add Workflow
From the design section add Button (1), which will open its properties from there click on Add Workflow.
c. Add Workflow to Open Importer on Button Click
From workflow panel (1), for Button (2) add the Open Import Widget action.
d. Configure Importer
Project Id, Template Id, and Access Token are found in the Snippet section of the application.
Once done CSV & Excel Import functionality is ready in your application.
4. Considering UserId while importing data
i. Configuring import plugin to consider UserId
The impler import plugin provides a field for User Id, where one can provide static text or dynamic value as User ID. It's optional. Very useful while adding a relationship with the user.
ii. Passing userId to Bubble.io when data is imported
If you're taking static or dynamic userId field, you have to append "user": {{extra.userId}}
in output schema.
Here user is the field name in Bubble.io. You need to follow the name you have in your Bubble.io application.
5. Theming Importer
Provide Primary Color in properties to change the color theme of Importer.
6. Configuring multiple Importers on Page
In Progress
Have any doubts? Shoot us a message directly on Discord.
Last updated