> For the complete documentation index, see [llms.txt](https://help.csvbox.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.csvbox.io/destinations/bubble.io.md).

# Bubble.io

Import customer CSV data to your Bubble app database with the csvbox.io importer.

## Demo App

See how it works [here](https://csvbox-demo.bubbleapps.io/version-test).

## 1. Configuring Bubble App

{% hint style="info" %}
You need to be on a [paid Bubble application plan](https://bubble.io/pricing/compare) to be able to use the Bubble API that is required to push external CSV data into the Bubble data store.
{% endhint %}

#### Data Settings

Create or update 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.

![Bubble Data Type](https://1907234374-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MN8YRAnfnCaoVVZflQz%2F-MlF7jrCKfdE_2kcvgoL%2F-MlF9_Ri0Pvs4OKw6-Vv%2FData%20type.jpg?alt=media\&token=763efe97-7ea5-48b3-936c-846c069065f8)

**Important:** Manually add at least one object (row) to the data type.

![Add object](https://1907234374-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MN8YRAnfnCaoVVZflQz%2F-MlF7jrCKfdE_2kcvgoL%2F-MlFAAduaDJVvkR_JjZ7%2Fobject.jpg?alt=media\&token=71105d43-d978-49ca-b168-e62745f664e8)

#### API Settings

1. Go to Settings
2. Go to the API page
3. Activate 'Data API'
4. Activate API for the data type where you want to push the CSV data
5. Generate and save the **API Private Key**

![API Settings](https://1907234374-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MN8YRAnfnCaoVVZflQz%2F-MlF7jrCKfdE_2kcvgoL%2F-MlFF_Dohzrp_qyu0lax%2FAPI%20settings.jpg?alt=media\&token=353e40f9-6617-4d77-82cc-c3a0c1c1a204)

## 2. Setting up csvbox.io

Log in to [csvbox.io](https://app.csvbox.io/login).

Add a sheet.

![Add a Sheet](https://1907234374-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MN8YRAnfnCaoVVZflQz%2F-Mj35xKYZBkUwz2EJSp7%2F-Mj38Dz7cxytaL48TR3g%2Fadd%20sheet.png?alt=media\&token=a373cc5f-6882-47c8-bcf3-3386f04e9644)

Add columns to the sheet. The column names should match column/object names for your data type in Bubble. Make sure you pay attention to upper and lower case letters on Bubble and match them in csvbox.io.

![Add Columns](https://1907234374-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MN8YRAnfnCaoVVZflQz%2F-Mj35xKYZBkUwz2EJSp7%2F-Mj38czlRHi7IyDXeoR3%2FAdd%20columns.png?alt=media\&token=d8ddd1a0-59f6-4b4b-a300-c87ad1ee55f5)

Under the "**Settings**" section, for the "**Send Data To**" setting select the "**Bubble.io**" option. 

![Bubble.io Data Destination Settings](https://1907234374-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MN8YRAnfnCaoVVZflQz%2F-MlF1f_qkTzHqTRV-9o1%2F-MlF3743QOGj852qd1T5%2Fbubble.io%20settings.jpg?alt=media\&token=bd21e60d-5670-4a36-9dc6-42b11a5161e4)

Fill in the following fields:

* **App Name** - This is the name of your Bubble.io app.
* **Custom Domain Name** - If you have attached a custom domain name to your Bubble app then you need to provide it here.
* **Environment** - Pick an environment between TEST/DEVELOPMENT and PRODUCTION/LIVE where you want the CSV data to be sent.
* **API Private Key** - It is the API token that you generated while configuring the [API settings ](https://help.csvbox.io/destinations/bubble.io#api-settings)in the Bubble app.
* **Data Type** - The data type name where you want to push the CSV data.

Click the "**Test Connection**" button. It should be successful if all fields are inputted correctly.

Click the "**Map Columns**" button. It will open a modal where you can map the sheet columns to the object fields.

![Map Sheet Columns to Bubble Data Fields](https://1907234374-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MN8YRAnfnCaoVVZflQz%2F-MlF1f_qkTzHqTRV-9o1%2F-MlF6Yue4ibif9qR4M_Q%2FMap%20columns.jpg?alt=media\&token=9d0c3d1a-6feb-4509-839a-b4feb9e67c77)

{% hint style="danger" %}
The data fields from the Bubble database will be available in the Map Column modal only if they have data in the first row. You may add dummy data for each data field in the first row in order for them to appear in the Map Column modal.
{% endhint %}

Click the "**Save**" button.

Go to the "**Code**" section of the sheet and note down the **Sheet License Key**.

![Sheet License Key](https://1907234374-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MN8YRAnfnCaoVVZflQz%2F-Mj-AmDZVGM7Khrdhfdf%2F-Mj-BO9coVZhfayCkqQy%2Fsheet%20license%20key.png?alt=media\&token=e34f0f43-eb1f-4b04-ac4f-020da95bd25d)

## 3. Adding the csvbox to Bubble

Install the [csvbox.io](https://bubble.io/plugin/csv--excel-importer-%7C-receive-json-1628686647935x372170116910546940) plugin to your Bubble app.

Drag the CSVBox Button element on your web page.

Save the **Sheet License Key** value from the sheet "**Code**" page (that we saved above) into the "**Sheet License Key**" property of the CSVBox element.

![Bubble App CSVBox Button Element](https://1907234374-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MN8YRAnfnCaoVVZflQz%2F-Mj-AmDZVGM7Khrdhfdf%2F-Mj-DZ9qMgvDLOBsfWPN%2FBubble%20App%20CSVbox%20element.png?alt=media\&token=6314a847-44fa-4442-8bc1-bf22bb72b270)

Enter the import button label under the '**button\_text**' property. Optionally you can add CSS classes in the "**button\_classes**" property to stylize the csvbox.io import button.

{% hint style="info" %}
You can add custom user attributes (such as user\_id, user name, company name, etc) as values to the custom\_attribute*XX* properties of the CSVBox Button element. More information on custom attributes is available [here](https://help.csvbox.io/getting-started#referencing-the-user).
{% endhint %}

The csvbox.io import button should be available on your app. Your users can click the button to upload CSV files. You will get data in your Bubble Database.

The CSVBox Button element exposes two events that indicate the completion of the import process. The two events are:

1. **import\_success** - triggered when the CSV data gets imported successfully into your Bubble database.
2. **import\_fail** - triggered when the import failed completely or partially failed.

![CSVBox Button Element Events](https://1907234374-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MN8YRAnfnCaoVVZflQz%2F-Mj3AYZCFwOoDpkBmr2l%2F-Mj3BzfI7j1RPhqZt7TI%2FBubble%20events.png?alt=media\&token=1ec7d612-b706-4745-97fb-b2c8fb7b16bf)

You can add relevant actions to process the import result events.

## Why does my upload fail with unknown errors?

Bubble.io databases are very picky. The Column Names you are POSTing from the csvbox importer need to **EXACTLY** match what is in your Bubble.io database.

Check the following things:

* Make sure there are no extra columns in your csvbox.io sheet that do NOT map to a field/attribute in your Bubble.io database object. Bubble does not like extra columns that its database doesn't know about.
* The csvbox.io sheet column names should **EXACTLY** match the type names in your Bubble.io database object. Verify that capitalization and spaces are exactly the same as your Bubble.io data type object.
* In your Bubble.io app settings, click "API" and make sure you have all checkboxes checked for exposing the Data API and also checked for every database object you want to import for.

{% hint style="info" %}
The maximum number of items that can be created in Bubble.io via a single bulk request is currently 1000. 
{% endhint %}

## Adding Configuration Options

{% hint style="info" %}
coming soon
{% endhint %}