🫧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.