Import customer CSV data to your Bubble app database with the csvbox.io importer.
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
Important: Manually add at least one object (row) to the data type.
- 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
Add a sheet.
Add a Sheet
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.
Under the "Settings" section, for the "Send Data To" setting select the "Bubble.io" option.
Bubble.io Data Destination Settings
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.
- 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
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.
Click the "Save" button.
Go to the "Code" section of the sheet and note down the Sheet License Key.
Sheet License Key
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
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.
You can add custom user attributes (such as user_id, user name, company name, etc) as values to the custom_attributeXX properties of the CSVBox Button element. More information on custom attributes is available here.
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
You can add relevant actions to process the import result events.
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.
The maximum number of items that can be created in Bubble.io via a single bulk request is currently 1000.