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.

Making sure that at least one entry is exist in datatype

ii. API Settings

1. Go to Settings ⚙️
2. Go to the API tab

3. Click on Enable Data API

4. Activate API for the data type where you want to push the imported data

5. Generate the API Private Key and save it.

API Settings for Importing Data

2. Setting up the Impler Application

Visit web.impler.io and log in.

i. Click on the "Create Import" to create the new import

Click on "Create Import" button

ii. Give name and click on "Create & Continue"

Give appropriate name in create Import for

iii. Enable Bubble.io destination

Bubble app configuration

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

1. Go to Plugins and click on Add Plugins

2. Search for CSV Excel Import Plugin

3. Click on Install

CSV Excel Import Plugin by Impler on Bubble.io

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.

Adding Importer on UI

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

Workflow Initialize Importer on Page Load

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.

Add Button and Workflow

c. Add Workflow to Open Importer on Button Click

From workflow panel (1), for Button (2) add the Open Import Widget action.

Open Import Widget on Button Click

d. Configure Importer

Configuring Importer with Credentials from Impler Application

Project Id, Template Id, and Access Token are found in the Snippet section of the application.

Getting credentials from Impler portal for Bubble Plugin

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.

Adding userId in output format

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.

Providing Primary Color to the Importer

6. Configuring multiple Importers on Page

In Progress

---

If you have any questions, suggestions, or comments. Feel free to reach out to us over Discord. We’re constantly improving to deliver the best Data Importer for your product, and we value your input.