Bubble.io Embed
Add readymade, scalable, and powerful CSV Excel import experience in your Bubble.io application.
Last updated
Add readymade, scalable, and powerful CSV Excel import experience in your Bubble.io application.
Last updated
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.
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.
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.
Visit web.impler.io and log in.
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.
Click on Map Columns to automatically map fields from bubble data type to Impler.
The last step is to add a CSV Excel Import plugin to your application.
Go to Plugins and click on Add Plugins
Search for CSV Excel Import Plugin
Click on Install
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.
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).
From the design section add Button (1), which will open its properties from there click on Add Workflow.
From workflow panel (1), for Button (2) add the Open Import Widget action.
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.
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.
If you're taking static or dynamic userId field, you have to append "user": {{extra.userId}} in output schema.
Here user is the field name in Bubble.io. You need to follow the name you have in your Bubble.io application.
Provide Primary Color in properties to change the color theme of Importer.
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.
