🫧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" button to get started with the new import

ii. Write an appropriate name and click on "Create & Continue"

iii. Enable bubble destination and fill in the details

Go to the destination tab and enable Bubble.io. You will have to fill in the following information, Bubble App Name:

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.
Custom Domain Name - Provide the address of the domain name like example.com if you have attached any custom domain to your application.
Environment - Pick from a development or production environment, based on which environment your app is running on.
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.

Impler adds user: {{extra.userId}} field to output considering you want to keep track of who is importing data. Which you can remove from 5. Output tab if you don't need the userId field.

3. Using the Plugin

The last step is to add a readymade 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. Use Plugin

Now use the drag and drop Import Button element from the UI panel to add the Import button in the application. You can search for Import Button or Impler to find the Import button.

Project Id - Project from which import is happening
Template Id - Import Id in which data is getting imported
Access Token - Security token used to authenticate communication.
Primary Color - Change the import widget's color theme by selecting your application's color.
User Id - Provide the User ID of the current user importing data into the application.

Project Id, Template Id, and Access Token are found in the Destination 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 user.