✅
Link to the plugin page: https://zeroqode.com/plugin/invisible-elements-plugin-for-bubble-1695227595133x558936280314483700
Demo to preview the plugin:
✅
Introduction
The Invisible Elements Plugin is designed to store and process data invisibly on a page without showing the element to users. It’s ideal for managing hidden workflows, backend calculations, and maintaining a clean UI while keeping elements loaded and functional in the background.
Key Features
- Invisible Data Storage: Store and manage data such as text, numbers, images, files, or addresses without displaying them on the UI.
- Dynamic Visibility Toggle: Show or hide elements dynamically through workflows without reloading the page.
- Workflow Compatibility: Fully integrates with Bubble’s workflows for real-time actions and triggers.
- Clean UI Design: Keeps unnecessary elements hidden, improving user experience and page performance.
- Versatile Data Support: Works with multiple data formats including text, numeric values, dates, images, addresses, and files.
- Lightweight Performance: Optimized for Bubble’s runtime to minimize overhead and keep your app responsive.
Prerequisites
- A working Bubble.io project.
- Basic understanding of workflows and custom states in Bubble.
- Installed Invisible Elements Plugin from the Bubble Plugin Marketplace.
How to setup
Step 1 – Install the Plugin
- Go to the Plugin Tab
- Open your Bubble Editor.
- Navigate to the Plugins tab on the left panel.
- Add Plugins
- Once in the Plugins tab, click the Add Plugins button.
- Search for the Plugin
- Use the search bar to type Invisible Elements.
- Locate the plugin in the search results.
- Install/Buy
- If the plugin is free, click Install to add it to your application.
- For a paid plugin, click Buy and follow the purchase instructions.
- Plugin Installed
- Once installed, the plugin will appear under the Installed Plugins list in your Bubble Editor.
Step 2 – Add the Plugin Element to Your Page
- Open the Design tab in your Bubble editor.
- Search for the Invisible Elements element in the Elements panel.
- You’ll see one option:
- Invisible Elements
- Drag and drop the element onto your page.
Step 3 – Configure Properties
Select the element and configure its properties in the Property Editor. Each field maps to a required job posting attribute:
- Text — A rich text editor field for storing text content invisibly. Useful for holding temporary text data, pre-formatted content, or notes that need to be processed without being displayed to users.
- Number — Stores numeric values invisibly. Ideal for calculations, counters, or numerical data that needs to be tracked in the background without cluttering the UI.
- Picture — Allows you to store image data invisibly through static image upload or dynamic image assignment. Perfect for pre-loading images or managing image assets behind the scenes.
- Dynamic Image — An input field for dynamically assigned image URLs or files. Enables you to store and manipulate image references programmatically without displaying them.
- External Sources — Provides access to search for free images from external libraries. Useful for storing image references from third-party sources invisibly.
- Address — Stores geographic address data invisibly. Helpful for location-based logic, calculations, or data processing without showing address fields to users.
- Yes / No — A boolean field for storing true/false or yes/no values invisibly. Perfect for conditional logic, feature flags, or state management in the background.
- Date — Stores date values invisibly. Useful for timestamp tracking, date calculations, or scheduling logic without displaying date pickers to users.
- File — Allows storage of file data invisibly through static file upload or dynamic file assignment. Great for document processing, file management, or temporary file storage.
- Dynamic Link — Stores URL or link data invisibly. Useful for managing navigation paths, external references, or dynamic URLs without showing link fields.
- Number Range — Stores a range of numbers (minimum and maximum values) invisibly. Ideal for filtering logic, validation ranges, or numerical boundaries used in calculations.
- Date Range — Stores start and end date values invisibly. Perfect for date-based filtering, scheduling windows, or time period calculations.
- Text List — Stores a list of text values invisibly. Useful for managing collections of strings, tags, categories, or any text-based data sets.
- Number List — Stores a list of numeric values invisibly. Ideal for managing sets of numbers, scores, IDs, or numerical collections.
- Picture List — Stores multiple images invisibly. Perfect for managing image galleries, carousel data, or collections of visual assets in the background.
- Address List — Stores multiple geographic addresses invisibly. Useful for managing location collections, route planning, or multi-location data.
- Yes / No List — Stores a list of boolean values invisibly. Helpful for managing multiple state flags, feature toggles, or conditional settings.
- Date List — Stores multiple date values invisibly. Ideal for managing schedules, event dates, or time-based data collections.
- File List — Stores multiple files invisibly. Perfect for document management, batch file processing, or managing file collections.
- Number Range List — Stores multiple number ranges invisibly. Useful for managing multiple numerical boundaries, filtering criteria sets, or range-based logic.
- Date Range List — Stores multiple date ranges invisibly. Ideal for managing multiple time periods, scheduling windows, or date-based filtering criteria.
Step 4 – Workflow Example
To configure the Invisible Elements Plugin, follow these steps to set up and control visibility actions on your page:
- Step 1: Add the Element to Be Hidden or Shown
- Place the element (e.g., group, image, text, button, etc.) on your page that you want to toggle visibility for.
- Step 2: Enable the “Expose the option to add an ID attribute” Setting
- Go to Settings → General → Advanced and check the box that says
“Expose the option to add an ID attribute to HTML elements.”
- Step 3: Assign an ID Attribute to the Element
- Select the element you want to hide/show.
- Scroll to the ID Attribute field in the Property Editor and enter a unique ID — for example:
test
- Step 4: Add Buttons for Workflow Actions
- Add two buttons to your page: one labeled Hide and another labeled Show.
- These will trigger the plugin actions through workflows.
- Step 5: Configure the Hide Workflow
- Go to the Workflow Editor.
- Create a new workflow for when the Hide button is clicked.
- Add the action: Make Element Invisible.
- In the action’s settings, enter the same Element ID you assigned earlier (e.g.,
test).
- Step 6: Configure the Show Workflow
- Create another workflow for when the Show button is clicked.
- Add the action: Make Element Visible.
- Enter the same Element ID (
test) in the field. - When triggered, the element will reappear on the page.
Plugin Element Properties - Invisible Element
Fields
Title | Description | Type |
Text | Stores plain or formatted text invisibly. Useful for temporary content, hidden notes, or text processing in workflows. | Text (optional) |
Number | Holds numeric values invisibly for calculations, counters, or data tracking. | Number (optional) |
Picture | Stores image data invisibly through static upload or dynamic assignment. | Image (optional) |
Address | Keeps geographic address data invisibly for background location logic or calculations. | Geographic Address (optional) |
Yes / No | A boolean field for true/false or yes/no values used in logic or conditions. | Checkbox (yes/no) (optional) |
Date | Stores date values invisibly for timestamps, scheduling, or comparisons. | Date (optional) |
File | Holds file data invisibly via static upload or dynamic assignment for processing or storage. | File (optional) |
Number Range | Stores a pair of numeric values representing a minimum and maximum range. Useful for filters or validations. | Number Range (optional) |
Date Range | Stores start and end dates invisibly for time-based filters or scheduling logic. | Date Range (optional) |
— LIST PROPERTIES — | ||
Text List | Stores multiple text entries invisibly. Useful for managing tags, categories, or string collections. | Text (optional) |
Number List | Stores a list of numeric values for IDs, scores, or grouped calculations. | Number (optional) |
Picture List | Holds multiple images invisibly for galleries or background visual data sets. | Image (optional) |
Address List | Stores multiple addresses invisibly for multi-location data or mapping logic. | Geographic Address (optional) |
Yes / No List | Holds multiple boolean (true/false) values for state flags or toggle collections. | Checkbox (yes/no) (optional) |
Date List | Stores multiple date values invisibly for schedules, events, or time tracking. | Date (optional) |
File List | Holds multiple files invisibly for batch uploads or document collections. | File (optional) |
Number Range List | Stores multiple numeric range pairs invisibly for complex filtering or boundary logic. | Number Range (optional) |
Date Range List | Stores multiple start and end date ranges invisibly for scheduling windows or date filters. | Date Range (optional) |
Exposed states
Title | Description | Type |
Text | Stores plain or formatted text invisibly. Useful for holding temporary text data or hidden content for workflows. | Text |
Number | Stores numeric values invisibly. Ideal for counters, scores, or calculations in the background. | Number |
Picture | Stores image data invisibly through static upload or dynamic image assignment. Useful for managing hidden visuals or preloaded images. | Image |
Address | Stores geographic address data invisibly. Helpful for background location logic, mapping, or distance calculations. | Geographic Address |
Yes / No | A boolean field for true/false values used in conditional workflows or logic states. | Checkbox (yes/no) |
Date | Stores date values invisibly. Useful for tracking timestamps, scheduling, or date-based logic. | Date |
File | Stores file data invisibly via static upload or dynamic assignment. Ideal for background file management or processing. | File |
Number Range | Stores a pair of numeric values representing minimum and maximum limits. Useful for range filtering or numeric validation. | Number Range |
Date Range | Stores start and end dates invisibly. Ideal for scheduling windows, filtering by date, or time-based logic. | Date Range |
Text List | Stores a collection of text values invisibly. Useful for managing lists of tags, labels, or string-based datasets. | Text |
Number List | Stores a list of numeric values invisibly. Ideal for tracking IDs, quantities, or grouped numeric data. | Number |
Picture List | Stores multiple images invisibly. Perfect for managing image galleries, carousels, or grouped visuals in the background. | Image |
Plugin Actions
- Make Element Invisible - Hides a specific element on the page dynamically while keeping it loaded in the DOM. This allows you to hide content or components without removing their functionality — useful for toggling visibility based on user actions or conditional logic.
Title | Description | Type |
Element ID | The unique ID of the element you want to hide. Must match the ID Attribute assigned to the target element. | Text |
- Make Element Visible - Displays a previously hidden element dynamically using its ID. This restores the element’s visibility on the page without reloading it ideal for toggling content, showing hidden sections, or managing conditional UI displays.
Title | Description | Type |
Element ID | The unique ID of the element you want to show. Must match the ID Attribute assigned to the target element. | Text |
Changelogs
Update 09.07.25 - Version 1.12.0
- Bubble Plugin Page Update (Logo).
Update 16.06.25 - Version 1.11.0
- Marketing update (minor change).
Update 27.11.24 - Version 1.10.0
- Minor update(Marketing update).
Update 15.09.24 - Version 1.9.0
- Minor update (Marketing update).
Update 23.07.24 - Version 1.8.0
- Minor update.
Update 13.06.24 - Version 1.7.0
- Updated demo/service links.
Update 30.05.24 - Version 1.6.0
- Minor update.
Update 19.10.23 - Version 1.5.0
- Updated description.
Update 12.10.23 - Version 1.4.0
- updated description.
Update 18.09.23 - Version 1.3.0
- updated description.
Update 13.09.23 - Version 1.2.0
- updated description.
Update 13.09.23 - Version 1.1.0
- minor updates.
Update 09.02.18 - Version 1.0.0
- Initial release.