# Home Hi there πŸ‘‹ First of all, thank you for your interest in our products! Here you will find description, screenshots and documentation for all our Bubble plugins and templates. We are working hard to always keep this place up to date. > Here is our [Contributor Profile page](https://bubble.io/contributor/digital-eye-1608928570771x248653587334472640) on Bubble If you have any questions, don't hesitate to contact us: # How to add a custom class or an ID to a Bubble element Classify plugin allows you to add a CSS class name, ID, attribute etc to your Bubble elements. 1. In your project settings, under General, make sure "Expose the option to add an ID attribute to HTML elements" is enabled. ![](/files/-MXg-2OYxjSrjULXUAa8) 2\. Install Plugin Classify ![](/files/-MXg-Ao-dMtUzF0M2-Qx) 3\. Use it Now you have access to the "ID Attribute" field. Use a special format to add a class name, ID or attribute to your Bubble element. On the screenshot below we are adding id "section1" and a class name "spy-item": ![](/files/-MXg-DqsbOffPHucNqB9) > Plugin page: > Forum: # Advanced Dynamic Tables πŸš€ Advanced Dynamic Tables for Bubble using DataTables.js ## πŸ”— Links > [Demo 1(Default theme)](https://digitaleyedemo.bubbleapps.io/datatable) | [Editor](https://bubble.io/page?type=page\&name=datatable\&id=digitaleyedemo\&tab=tabs-1) > [Demo 2 (Semantic UI theme)](https://digitaleyedemo.bubbleapps.io/datatable-semanticui) | [Editor](https://bubble.io/page?type=page\&name=datatable-semanticui\&id=digitaleyedemo\&tab=tabs-1) > [Demo 3 (5000 records)](https://digitaleyedemo.bubbleapps.io/version-test/datatable-large) | [Editor](https://bubble.io/page?type=page\&name=datatable-large\&id=digitaleyedemo\&tab=tabs-1) > [Plugin Page](https://bubble.io/plugin/excel-like-data-table-and-grid-1617804294068x151014387640434700) > [Forum](https://forum.bubble.io/t/plugin-release-advanced-dynamic-tables-for-bubble-excel-like/145600) ## ℹ️ Introduction Populate your table with data and update data dynamically at any time. Update any table's option dynamically without page reloads. Includes sorting, search and pagination out of the box. ## πŸ”₯ Main Features * Two styling themes * Conditional formatting 🎨 * Large data support * Row selection * Columns reordering * Populate your table with data dynamically at any time without page reloads * Responsive table automatically adapts to any screen size * Multiple styling options: hoverable rows, compact mode, striped rows, borders etc * 84 languages included * Row click event returns row id so you can edit / remove your data * Advanced settings (enable/disable search for some columns, enable/disable sorting for some columns, ...) Please check our demos and documentation for more features! ## πŸ“š Documentation ### ➑️ Plugin actions, events and states Actions: * Populate: provide data to the table * Export: export table data to CSV * Set Language: Change table language * Refresh table * Destroy: remove the table * Order column: choose a column to sort * Add Conditional Formatting * Clear Conditional Formatting Events: * Row clicked * Row selected * Row deselected * Column reordered * Table drawn: table fully rendered on the page States: * Clicked row (text): row unique id * Search term (text): current value in the search box * Selected rows: list of selected rows ### ➑️ Add table on the page Install the plugin and add a *DataTable* element on the page. ![](/files/-MZ9lMLl9iBdzVdnO-y1) You have a bunch of options to customize your table. Most of them are dynamic which means you can change them at any time in your app (just like in our demo). | | Option | Type | Description | | ------------------------------ | ------------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **General** | Theme | Dropdown | Plugin supports 2 styling themes: Default and Semantic UI | | | Language | Dropdown | Table captions language | | **Search** | Enable search | Yes/No | Enable or disable table searching | | | Limit searchable cols | String | Disable search on the data in certain columns. Comma-separated column indexes: "1,2,4" | | **Ordering** | Enable ordering | Yes/No | Enable or disable column sorting | | | Limit orderable cols | String | Disable ordering for certain columns. Comma-separated column indexes: "1,2,4" | | | Default ordering (column) | Number | Column index (1,2 etc) that will be ordered by default. Can be empty | | | Ascending order | Yes/No | 'Yes' for Ascending order; 'No' for Descending order (used for default ordering) | | **Pagination** | Enable pagination | Yes/No | Enable or disable table pagination | | | Length change | Yes/No | Feature control the end user's ability to change the paging display length of the table | | | Nb of records per page | String | Possible options to choose for the number of records per page. Comma-separated values: "25,50,100". "Show All" option is inserted automatically. | | | "Show all" localization | String | If the custom number of results per page is defined above, this field allows to translate the "Show All" option if need. | | **Row selection** | Selectable rows | Dropdown | Possible values are : Disabled, Single, Multi, OS. Multi and OS allows to select multiple rows in a slightly different way | | | Blur selection | Checkbox | Deselect the selected items automatically when the user moves focus outside of the table | | **Other** | Show info | Yes/No | Show/hide table information display field (number of entries) | | | Reorderable columns | Yes/No | Enable/Disable column sorting | | | Hidden columns | String | Columns to hide. Format: "1,2,4" (comma-separated column indexes) | | | Horizontal scrolling | Yes/No | Enable horizontal scrolling. When a table is too wide to fit into a certain layout, or you have a large number of columns in the table, you can enable horizontal (x) scrolling to show the table in a viewport, which can be scrolled. This is particularly useful when you want to show the table on mobile devices | | | Large data | Checkbox | You may want to use this mode to render thousands of rows | | **Styles (all themes)** | Striped rows | Yes/No | Changes background color of all the odd rows in the table. More info: | | | Cell border | Yes/No | Strong delineation between individual cells. More info: | | | Compact mode | Yes/No | Reduces the amount of white-space in the default styling, increasing the information density on screen. More info: | | | Row selected | Color picker | Row selected color | | | Control text | Color picker | Control text color | | **Styles (Default theme)** | Scroll collapse | Yes/No | Allow the table to reduce in height when a limited number of rows are shown. More info: | | | Hoverable rows | Yes/No | Highlight a row when the mouse is hovered over it. More info: | | | Order column | Yes/No | Highligth the columns to indicate the sorting. More info: | | | Row borders | Yes/No | Strong delineation between rows. More info: | | **Styles (Semantic UI theme)** | Inverted | Yes/No | Invert table colors | | | Table color | String | A table can be given a color to distinguish it from other tables. Possible values are: red \| orange \| yellow \| olive \| green \| teal \| blue \| violet \| purple \| pink \| brown \| grey \| black | ### ➑️ Populate table with data You should populate your table in the workflow. Call the "Populate" action (for example, from the "Page is loaded" event): ![](/files/-MXmbQTXONBl7w_zzrRk) Define all the **column** names and data. Please note that the column data must be a string separated by the **","** sequence (comma between double quotes). **Row IDs** field is optional but if you are planning to use the "Row clicked" event (see below) you must provide it. It defines a unique ID for each row. Clicking on a row will trigger the "Row clicked" event which will provide a row id value. ### ➑️ Update table data Simply call the "Populate" action anytime when your source data is changed. ### ➑️ Themes and Styling Plugin supports 2 themes: Default and Semantic UI. It also supports many styling options defined above. Check our [Demo1(Default theme)](https://digitaleyedemo.bubbleapps.io/datatable) and [Demo2 (Semantic UI theme)](https://digitaleyedemo.bubbleapps.io/datatable-semanticui) to check how both themes look like. ### ➑️ Export table data to a file Call the "Export" action from your Workflow: ![](/files/-MXmamGkMRoIP7cKcQ4S) Choose a filename and export format. Only CSV format is available at this moment. We have planned to add exporting to PDF very soon! ### ➑️ Row click event To use this event, you need to provide the "Row IDs" field when populating your table with data. Therefore each of your rows will have a unique ID. Clicking on a row will produce an event "**Row clicked**" so you can catch it in the workflow: ![](/files/-MXm_XyYMIhlDjvBPwhT) Now you can access the "**Clicked row**" state with the row id: ![](/files/-MXm_pjuGDxUJNEJFoZE) ### ➑️ Search Term state You can access the current search term ("new york" on the image below) by reading the "Search Term" state. ![](/files/-MY14erl9bGjFvg6s0Ua) ### ➑️ Conditional Formatting Conditional formatting allows you to automatically apply formatting: font colors, background colors, font weight to one or more cells based on the cell value. To do this, you’ll need to create a conditional formatting rule. Supported operations: =, <, >, !=, <=, >=, contains, doesn’t contain, startsWith, endsWith Supported styles: font color, background color, bold font 1\. Call the β€œAdd Conditional Formatting” action, provide a column index, condition (operation + value to compare) and styles ![](/files/-MZP9hhJ4WlV8ZLdWfi6) 2\. Add one or several conditions to one or several columns 3\. Call the β€œRefresh” action ![](/files/-MZP9k_P5vxRFOaIWZIT) Result: ![](/files/-MZP9pKZsaa2zMpD-VXp) Check out our [DEMO 1](https://digitaleyedemo.bubbleapps.io/datatable) to see it in action. **Related action**: Clear conditional formatting ## πŸ™‹β€β™€οΈ FAQ ⁉️ ### **Q: Why my data is not showing?** **A:** If your data source is Bubble Database, first of all check your privacy rules. Also you can try to render the same set of the data (or just a number of found items) in another widget (text box / repeating group etc) to verify that you actually have access to the data. ![](/files/-MZP6ddCdU9Da5pQmlK7) If it doesn't help, most likely you should check the format of the provided data for every column (refer to the [Populate table with data](https://bubble.digital-bird.com/plugins/tables-grids-excel#populate-table-with-data) section) ### **Q: Can I add formatting for the cells data?** **A:** The plugin supports HTML code as the cells value. As long as you can generate HTML data, you are able to customize your cells: ![](/files/-MZP8_J6Q4abB3IKJgSL) # Advanced Editable Tables ✏️ Spreadsheet / Excel like tables for Bubble supporting formulas and different data types ## πŸ”— Links > **Demo 1** (Data Types): [Demo](https://editable.bubbleapps.io/version-test) | [Editor](https://bubble.io/page?type=page\&name=index\&id=editable\&tab=tabs-1) > **Demo 2** (Spreadsheet like Google Sheets / Excel): [Demo](https://editable.bubbleapps.io/version-test/spreadsheet) | [Editor](https://bubble.io/page?type=page\&name=spreadsheet\&id=editable\&tab=tabs-1) > [Plugin Page](https://bubble.io/plugin/editable-table-pro--excel-like-1619298395010x967154588765126700) > [Forum](https://forum.bubble.io/t/editabe-tables-with-formulas-online-spreadsheet/150132) ## πŸ”₯ Main Features * Can be used like a static read-only or editable table * Create professional Excel-like and Google Sheets-like spreadsheets * Formulas support * Powerful cells. It can contain text, html, number, image, checkbox, radio button, dropdown, calendar... * Cells HTML code support * Export data to CSV * Context menu support * Dynamically add / remove column and rows * Columns reordering * Responsive table automatically adapts to any screen size * Sorting, Searching, Pagination and more ## πŸ“š Documentation ### ➑️ Quick Start Adding a table is simple and straightforward. 1. Install the plugin and add an Editable Table element on your page: ![](/files/-M_57y8Uv_COd2eghAjw) 2\. In your Workflow (for example, when the Page is loaded event is triggered) insert your data column by column respecting the data type. For example, for a *text data* column: ![](/files/-M_58gdvf9IM_caP9XhA) The most important field here is the "Data Source". Just provide a list of text values to be shown in the column. The process of adding any other data type is very similar and straghtforward. Below you will find detailed fields description and full list of plugin events, actions and states. ### ➑️ Editable Table Element Fields ![](/files/-M_5JcKaOYGZRJlHE5_1) | Field | Type | Description | | --------------------------- | ------ | ---------------------------------------------------------------------------------------------------------- | | Sorting | Yes/No | Enable / Disable column sorting | | Pagination | Number | Default number of rows per page. Put "0" to disable pagination | | Pagination options | String | List of comma-separated values: "10,30,50". Pagination options not shown if this value is empty | | Search | Yes/No | Enable / Disable table search | | Default column width | Number | This value can be changed in the insert column action | | Column dragging | Yes/No | Movable columns (change order of columns) | | Column resize | Yes/No | User can change the column width | | Row resize | Yes/No | User can change the row height | | Editable | Yes/No | Enable / Disable cells editing. It's also possible to make some columns read-only | | Fullscreen | Yes/No | Table fullscreen mode | | Context menu | Yes/No | Enable / Disable context menu (right mouse click) | | Enable paste | Yes/No | Pasting data in cells | | CSV Filename | String | This filename will be used when table data will be exported to a CSV. Do not include the ".csv" extension. | | Include headers on download | Yes/No | Include (or not) column headers when exporting to a CSV | ### ➑️ Plugin Events and States | Event | Related States | | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Cell edited |

  • edited\_value
  • edited\_col\_id
  • edited\_col\_title
  • edited\_row\_index
  • edited\_record\_id
  • edited\_col\_index
| | Rows inserted |

  • row\_inserted\_after\_ind
  • row\_inserted\_count
| | Columns inserted |

  • col\_inserted\_after\_ind
  • col\_inserted\_count
| | Rows deleted |

  • row\_deleted\_from
  • row\_deleted\_count
| | Columns deleted |

  • col\_deleted\_from
  • col\_deleted\_count
| | Table updated | This event triggers after any update: cell edit, row added/removed, undo/redo/paste etc | **Other States (accessible at any time):** * *rows\_nb*: current number of rows in the table * *columns\_nb*: current number of columns in the table * *data*: Table's data array (row by row) ### ➑️ Plugin Actions **Add column actions:** * Add column: Text * Add column: Numeric * Add column: Image * Add column: Checkbox * Add column: Color * Add column: Dropdown * Add column: Calendar * Add column: Radio **Data management actions:** * Clear all: Removes all the data, rows and columns * Show index column / Hide index column * Show column / Hide column * Add empty rows / Add empty columns * Set data**:** Destroy the table and rebuild with the provided data **Other actions:** * Export CSV ### ➑️ Special Formulas Plugin uses spreadsheet-like formulas (=A1\*A2, =A1+A2 etc) and a few special formulas described in this section. | Formula | Description | Params | | ---------------------- | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------ | | =PROGRESS(int, string) | Create a progressbar |

@Param int percent - Value from 0-100

@Param string color - Hex color for the progressbar

| | =RATING(int) | Create a stars rating | @Param int value - Rate value from 0-5 | | =COLUMN() | Return the column number where the formula has been executed | | | =ROW() | Return the row number where the formula has been executed | | | =CELL() | Return the cell string identification | | | =VALUE(int, int) | Return the cell value based on the colNumber and rowNumber | @Param int colNumber @Param int rowNumber | | =TABLE() | Return the table instance | | # Export Page to PDF πŸ”₯ Export Bubble page, single element or a list of elements to a high-quality PDF file πŸ“„ ## πŸ”— Links > [Demo](https://digitaleyedemo.bubbleapps.io/pdf) | [Editor](https://bubble.io/page?type=page\&name=pdf\&id=digitaleyedemo\&tab=tabs-1) > [Plugin page](https://bubble.io/plugin/-advanced-export-to-pdf--1618325851181x183358745676087300) > [Forum](https://forum.bubble.io/t/plugin-release-advanced-export-to-pdf-whole-page-single-element/146552) ## πŸ”₯ Features Very easy to use plugin with advanced settings: * Export one page element, a list of elements or the whole page to a PDF file * Export to a multipage or a single-page PDF * Flexible page layout settings: Predefined (A0-A10, letter, etc) and custom page formats; Page orientation; Margins * Plugin generates lightweight and excellent quality PDF files ready to print or to keep as a digital file * Fine control over PDF compression quality * Use any valid CSS selector to select elements to export * Download generated PDF file * Upload generated PDF file to Bubble (generate a URL) ## πŸ“š Documentation ### ➑️ PDF generation. Plugin fields **Pre-requirement:** Install and configure Classify plugin {% content-ref url="/pages/-MXfykQSfukoAWO5UBlp" %} [How to add a custom class or an ID to a Bubble element](/classify) {% endcontent-ref %} 1.Install the plugin and add the "PDF Converter" element on your page 2.Set an ID for the element you want to export. To export the whole page, use this special selector: `.main-page`. 3.From your Workflow, Call the "Convert" action: ![](/files/-MYigsOR4NJzkb7B1QXF) | | Option | Type | Description | | ---------------- | ---------------------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | General | Element(s) to capture | String |

One or more comma-separated selectors. Each element will be exported to a separate page in the PDF document.

You can use any valid CSS selector (#eltID, .eltClassname, img etc). Use this special selector to export the entire Bubble page: .main-page

| | | Save to file | Yes/No | Whether the generated file will be saved into a file and downloaded automatically | | | Generate URL | Yes/No | If "yes", the PDF file will be uploaded to Bubble filestorage | | | Filename | String | Output filename. Do not add ".pdf" at the end | | | Compress quality | Integer | Compress quality is a number in range `[0..100]`. It defines the output file size and quality | | Page Layout | Page format | Dropdown | Predefined commonly used page formats | | | Orientation | Dropdown | Page orientation (Portrait, Landscape) | | | Page fit mode | Dropdown | How the captured element will be rendered into the PDF page. Possible values are: fill, contain, scale-down, cover, none. Check the [detailed description below](/plugins/export-page-to-pdf#page-fit-options) | | | No page breaks mode | Yes/No | Applies to "full-width" mode only | | | Margins (left, right, top, bottom) | Float | Page margins | | | Margin unit | Dropdown | Inches, Centimetres, Pixels, Points etc | | Custom Page Size | Custom page size | Yes/No | Set to "yes" if you want to define custom page format | | | Page size(,) | String | Custom page size. Format: `width,height`. "Custom page size" field must be set to "yes". | | | Unit | Dropdown | Units for the custom page size: Inches, Centimetres, Pixels, Points etc | | Other | Autoprint | Yes/No | Automatically show the print dialog when file opened | | | Draw margin borders | Yes/No | Draw red borders to indicate the margins. For debug purposes | | | Use Proxy | Yes/No | Setting this field to Yes is particularly useful when your page contains images from external resources. Hint: set this field to Yes when the output PDF misses some images. | | Archive | Create archive | Yes/No | Helps to decrease the output filesize. Useful to do before generating a URL | | | Archive filename | String | Filename without ".zip". Example: "output" | **Related events:** * PDF Generated **Related states:** * PDF Generating (Yes/No) * PDF Generation Percentage (Number) ### ➑️ Page fit options Page fit defines how the captured element will be rendered on the PDF page. Plugin supports 6 options: `full-width`, `fill`, `contain`, `scale-down`, `cover`, `none`. It works in the same way as the [object-fit CSS attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) (check the *CSS Demo section* for a better undertanding). If you are unsure about which option you have to choose, start from `full-width` or `ontain`. ### ➑️ How to upload PDF and generate a URL 1.Set the "Generate URL" field to "Yes" ![](/files/-MYVCa3ijVRVGq-QCi6v) 2\. Once the "URL generated" event triggers: ![](/files/-MYVChS3g1e-WMXb8k7p) 3\. Access the "URL" shared state: ![](/files/-MYVCoPedJsvFPGp1CV6) Now you can save the generated URL to database etc {% hint style="info" %} Sometimes it's useful to archive the PDF before generating an URL to highly reduce the filesize. Set the "Create archive" to "YES" and optionally the "Archive filename" fields. {% endhint %} **Related events:** * URL Generated **Related states:** * URL Generating (Yes/No) * URL (String) # Advanced Algolia Search πŸ•΅οΈ Easy to use plugin to implement blazing fast search through thousands of data records. ## πŸ”— Links > [Demo](https://algoliasearch.bubbleapps.io/version-test) | [Editor](https://bubble.io/page?name=index\&id=algoliasearch\&tab=tabs-1) > [Plugin Page](https://bubble.io/plugin/advanced-algolia-search-1620829006228x939199669208350700) > [Forum](https://forum.bubble.io/t/plugin-advanced-algolia-search/151196) ## ℹ️ Introduction This plugin is the easiest way to bring blazing fast search using [Algolia](https://www.algolia.com) into your Bubble app. ### **What Is Algolia?** Your users almost certainly use at least one of YouTube, Amazon, and Facebook. An essential feature that these big websites share is great search. The reason they have great search is because they have hundreds (if not thousands) of people working on it full-time. Because your users are constantly exposed to great search on these platforms, they expect to find it on every site and application that they use. But your company isn’t a search company: **it doesn’t make sense for you to hire a dedicated team of developers to reinvent search.** Algolia provides software and tools to help you implement **efficient, flexible, and insightful search on your sites and applications.** ### What can Algolia do for my users? Algolia provides your users with a fast and rich search experience. Your Algolia search interface can contain a search bar, filters, infinite scrolling, query suggestions, sorting, refinements, etc. These help your users **find what they’re looking for** and **discover new products**. Find more info about Algolia [here](https://www.algolia.com/doc/guides/getting-started/what-is-algolia/). ## πŸ“š Documentation ### Pre-requirements (5 minutes) 1. Go to and create an account 2. Navigate to your Algolia Dashboard and create a new index here: ![](/files/-M_fJEFyT8aIHt4vaq-P) 3\. Now you need to populate the newly created index with data. You can import your database data directly or use a sample dataset: ![](/files/-M_fJgNw-gcDvNfQguQg) 4\. Go to API keys page and copy your **Application ID** and **Search-Only API key**. *Please **do not** use the **Admin API Key** and keep it secret.* ### Plugin Configuration (2 minutes) Install the **Advanced Algolia Search** plugin. Paste your keys directly on the plugin page: ![](/files/-M_fLT3ra_-xMlevayCI) Now add the **Algolia Search** element into your app. Insert your **Index name**. For the **Data type** please choose **Algolia (Search Result)**. This field is used internally by the plugin. ![](/files/-M_fKwhH7eGijRjGE22n) You are ready to make your first search! ### Searching the data Plugin provides you a very straightforward way to search the data. Just call the **Search** action (for example, when user clicked a search button or search input value changed): ![](/files/-M_fMeas9mdjwkoT1Pe5) | Field | Type | Description | | ---------------------- | ------ | ------------------------------------------------------------------------------------------------------------------- | | Query | String | String to search | | Attributes to retrieve | String | Comma-separated values. Example: "name, description, price". Attributes are the field names in your data structure. | | Page | Number | Page to retrieve (starting from 0) | | Results per page | Number | Number of records per page | Once Algolia returns the search results, you can access the **Result** shared state: ![](/files/-M_fNyHz57ZRxZJJ7_8H) It provides you a set of fields: | Field | Type | Description | | ----------------- | ---------------- | ----------------------------------------------------------------------------------- | | processingTimeMs | Number | Query processing time (ms) | | page | Number | Current page index (starting from 0) | | nbPages | Number | Total pages number in the final result | | nbHits | Number | Total number of found results | | hitsPerPage | Number | Number of results on the current page | | field1 .. field20 | Array of Strings | Requested data attributes (in the order defined by *Attributes to retrieve* field). | FieldN is an array of strings. For example: * field1 (id): \["123", "542", "941"] * field2 (name): \["iPhone", "Android", "Samsung"] * ... Therefore you can iterate over arrays to display your data in tables, Repeating Groups etc. ### Sending the data to Algolia There are several ways to push your data to an Algolia index: * Using the Algolia dashboard by sending a JSON file. * Using a Plugin action "Send Data" as explained below. ![](/files/-M_z4aPdSHxt8p7WLmB7) 1. From your workflow call the "Send Data" action 2. Provide the index name, your APP ID and Admin API Key 3. Provide the object fields (name, age and country in the example above) 4. The returned object has 2 fields: *error* (Yes/No) and *message* (text) # Rich Text Editor like Medium πŸ“ The dead simple inline editor toolbar ## πŸ”— Links > [Demo](https://de-demo2.bubbleapps.io/version-test/medium) | [Editor](https://de-demo2.bubbleapps.io/version-test/medium) > [Plugin page](https://bubble.io/plugin/rich-text-editor--medium-1621422273210x663707797524316200) > [Forum](https://forum.bubble.io/t/plugin-rich-text-editor-like-medium/152496) ## ℹ️ Introduction This is a clone of [medium.com](https://medium.com) inline editor toolbar. ## πŸ”₯ Features * 7 different themes * 25+ toolbar buttons * Extremely simple setup ## πŸ“š Documentation ### ➑️ Quick Start 1. Add the **Medium Text Editor** on the page: ![](/files/-MaEiJTRjmessnRdT8_Y) 2\. Set the **Content** field (can be static or dynamic value) and the **Buttons** list (comma-separated values). See below for the available buttons. ### ➑️ Available Toolbar Buttons * bold * italic * underline * anchor * quote * strikethrough * h1, h2, h3, h4, h5, h6 * justifyLeft, justifyCenter, justifyRight, justifyFull * orderedlist, unorderedlist * indent, outdent * image * pre * removeFormat * html * subscript * superscript ### ➑️ Change the Toolbar Theme To change the toolbar theme, simply call the **Set Theme** action and choose one of the available themes. You can also create your own theme by writing custom CSS. ![](/files/-MaEk4lNLgEIkYa3ptd6) ![](/files/-MaEkB1jVIQbto8fRCne) ![](/files/-MaEkHf5FmcmC4nvkuhr) ![](/files/-MaEkLbcp2bs7cA3cBHL) ![](/files/-MaEkQDOy6pbmXyXddZq) ![](/files/-MaEkUgb1By5VqX7a3mH) ![](/files/-MaEk_8i_FUSnAn0nmBx) ### ➑️ States and Events You can always access the **Content** state with current editor content. Every time the content changes, a **Content changed** event is triggered. You can use it in your Workflow # Scrollspy πŸ‘ Plugin returns an element currently visible on the screen. ## πŸ”— Links > **Demo 1** (without a RepeatingGroup): [Demo](https://scrollspy.bubbleapps.io/ids) | [Editor](https://bubble.io/page?name=ids\&id=scrollspy\&tab=tabs-1) > **Demo 2** (vertical RepeatingGroup): [Demo](https://scrollspy.bubbleapps.io/) | [Editor](https://bubble.io/page?name=index\&id=scrollspy\&tab=tabs-1) > **Demo 3** (horizontal RepeatingGroup): [Demo](https://scrollspy.bubbleapps.io/horizontal) | [Editor](https://bubble.io/page?name=horizontal\&id=scrollspy\&tab=tabs-1) > [Plugin Page](https://bubble.io/plugin/scrollspy-1610326820506x757120895346278400) > [Forum](https://forum.bubble.io/t/plugin-announcement-scrollspy/136050) ## ℹ️ Introduction In a nutshell, when you scroll the page (or a Repeating Group), plugin will provide you current element visible on the screen. Some common use cases: * Animate an element when it becomes visible on the screen * Dynamically highlight a nav element in the nav bar (check the demo for an example). * Dynamically change selected element in a dropdown on scroll * Dynamically highlight an item in TOC (Table of Content) on scroll * Calculate the scrolling percentage progress * ...and more ![Scrollspy](/files/-MXg0ci69Zs2GYfMgdw2) ## πŸ”₯ Features * Can be used to implement the scrollspy feature in Bubble or animate elements * It works with any Bubble element (returns an element ID) * It works for Repeating Groups as well (returns visible item / index) * Works for both, Vertical and Horizontal Repeating Groups * Get "Current Item", "Current ID", "Current Index" visible on the screen * Plugin fires an event "Item changed" that you can use in your Workflows * Setup rules, in which part of the screen an element considered as "visible" Plugin supports 3 modes: 1. Add Groups, Texts or any other element type on the page and define a unique ID for each element. When you scroll, plugin will provide you current element's ID visible on the screen. 2. RepeatingGroup (Vertical). Add a RepeatingGroup element on the page. When you scroll, plugin will provide you current element visible on the screen and its index. 3. RepeatingGroup (Horizontal). Same as 2 but for a horizontal RepeatingGroup. ## πŸ“š Documentation ### **➑️ Mode 1 : Without RepeatingGroup** **Pre-requirement:** Install and configure Classify plugin {% content-ref url="/pages/-MXfykQSfukoAWO5UBlp" %} [How to add a custom class or an ID to a Bubble element](/classify) {% endcontent-ref %} 1. Add any elements on the page (blocks, texts, images etc). For each element, define a class name and an id (check our demo for an example) ![](/files/-MXg-np5_ZF3xn7QnyW_) 2\. In the Scrollspy plugin settings copy paste the same class name. ![](/files/-MXg-u89CVpT-08ELpcw) 3\. Now you have access to **current\_id** state: ![](/files/-MXg-zGXt7T9CnhrbsPK) ### **➑️ Mode 2 :** **Using a Vertical RepeatingGroup** **Pre-requirement**: Go to Settings -> General and enable the "Expose the option to add an ID attribute to HTML elements" option. 1. Add a RepeatingGroup in your app. 2. Go to your Repeating Group's properties, at the bottom you will see "ID attribute". Add a name here. ![](/files/-MXg02tuqhFXsDFl_SQk) 3\. In the Scrollspy properties define: "RepeatingGroup ID", "Type of content" and "Data source" attributes (exactly the same values as in your RepeatingGroup) ![](/files/-MXg08Vu5hs60_pRpNQ8) 4\. Now anywhere in your app you can use the "Scrollspy's Current Index", "Scrollspy's Current Item" or "Scrollspy's Current ID" ### **➑️ Mode 3: Using a Horizontal RepeatingGroup** The settings are very similar to the Mode 2. # Move, Rotate & Resize element πŸ”„ Move, offset, rotate, spin and resize Bubble elements by its id in a very simple way ## πŸ”— Links > [Demo](https://digitaleyedemo.bubbleapps.io/version-test) | [Editor](https://bubble.io/page?name=index\&id=digitaleyedemo\&tab=tabs-1) > [Plugin page](https://bubble.io/plugin/move-rotate--resize-element-1613310378435x672329527629709300) > [Forum](https://forum.bubble.io/t/new-plugin-move-rotate-resize-bubble-elements/137469) ## ℹ️ Introduction ![](/files/-MXg7QvL_L6prnvwsvl9) ## πŸ”₯ Features * Move an element * Offset an element: add horizontal and vertical offset to initial coordinates * Reset an element to initial state * Rotate an element by a specific angle * Spin an element (constant rotation) * Resize an element (width, height) ## πŸ“š Documentation Plugin contains 7 actions which can be used from the Bubble Workflow and 1 element. **Pre-requirements:** 1. Install and configure Classify plugin {% content-ref url="/pages/-MXfykQSfukoAWO5UBlp" %} [How to add a custom class or an ID to a Bubble element](/classify) {% endcontent-ref %} 2\. Add any elements on the page. For each element you want to rotate, move etc, define an id:
![](/files/-MXg8-ZNTGTJ8MSDs7CI) ### **Element Move (Action)** Input parameters: * ID: Element ID to move * Offset X (px): Offset by X coordinate (positive, zero, or negative value) * Offset Y (px): Offset by Y coordinate (positive, zero, or negative value) * Time to move (ms): Time to animate the movement in milliseconds ### **Element Offset (Action)** Input parameters: * ID: Element ID to offset * Coordinate X: Offset by X coordinate (positive, zero, or negative value) * Coordinate Y: Offset by Y coordinate (positive, zero, or negative value) * Time to move (ms): Time to move the element in milliseconds ### Element Reset (Action) Input parameters: * ID: Element ID to reset ### **Element Rotate (Action)** Input parameters: * ID: Element ID to rotate * Angle: Rotation angle (positive or negative value) ### **Element Spin (Action)** Input parameters: * ID: Element ID to spin * Angle Step: Defines the rotation smoothness * Update frequency: Time in milliseconds between two frames (defines the rotation speed) ### **Element Stop Spin (Action)** Input parameters: * ID: Element ID to stop spinning ### **Element Resize (Action)** Input parameters: * ID: Element ID to resize * Width (px): New width (px). Leave it empty to keep the original width * Height (px): New height (px). Leave it empty to keep the original height * Animation time (width): Time in milliseconds to animate the width resize. Leave it empty or 0 to change the size instantly * Animation time (height): Time in milliseconds to animate the height resize. Leave it empty or 0 to change the size instantly ### **Resize Element (Element)** Works in the same way as the "Element resize" action but exposes Width and Height states with the current element's size.\ Actions: * Resize Element Exposed State: * Width: Current element's width (updated after the resize action) * Height: Current element's height (updated after the resize action) # Inverted RepeatingGroup (for Chat app) Revert the Repeating Group elements ordering upside down to create apps like chats and messages ## πŸ”— Links > [Demo](https://digitaleyedemo.bubbleapps.io/inverted_rg) | [Editor](https://bubble.io/page?type=page\&name=inverted_rg\&id=digitaleyedemo\&tab=tabs-1) > [Plugin page](https://bubble.io/plugin/inverted-repeating-group-like-chat-1614516761794x182777501586030600) > [Forum](https://forum.bubble.io/t/new-plugin-inverted-repeating-group-like-a-chat-app/138847) ## ℹ️ Introduction Plugin allows to revert the Repeating Group elements ordering. So to see / load next items in the list you have to scroll to the top (instead of scrolling to the bottom). ![](/files/-MXgB7wmJ6x5TTnL2w33) Use case: any chat / messaging app (e.g. Facebook, Telegram, WhatsApp...). The latest message showed on the bottom and you have to scroll to the top to load older ones. ## πŸ”₯ Features * Revert the Repeating group elements order and change the scroll behaviour * Show scrollbar on the left (or right) side of the Repeating Group * Hide/Show scrollbar ## πŸ“š Documentation **Pre-requirements:** 1. Install and configure Classify plugin: {% content-ref url="/pages/-MXfykQSfukoAWO5UBlp" %} [How to add a custom class or an ID to a Bubble element](/classify) {% endcontent-ref %} 2\. Add a Repeating Group and define an ID: ![](/files/-MXgBc1AdPvJmTiIvSWB) Now when you have a Repeating Group on your page: 1. Add the "Inverted Repeating Group" element on your app page and copy paste the ID. 2. Define following parameters: * **ID** (text): Same ID from the step 1 * **Invert Repeating group** (yes/no): Revert the Repeating group elements order and change the scroll behaviour * **Scrollbar on the left** (yes/no): Show scrollbar on the left/right side of the Repeating Group * **Hide scrollbar** (yes/no): Hide/Show scrollbar. Please note that this option may not work properly in some browsers ![](/files/-MXgBwoq4PqkRasQj95h) # Live Chats (LiveChat.com, Intercom ...) πŸ’¬ Multiple plugins to integrate a live chat on your website We developed a few plugins to help you integrate a live chat on your website. All plugins are extreamely easy to use and in most of the cases you will only need to insert your client\_id in the plugin to make it work. > [LiveChat (livechat.com)](https://bubble.io/plugin/livechat-livechatcom-1613923364113x238006850088075260) > [Intercom](https://bubble.io/plugin/intercom-live-chat-1613765689157x858545148000206800) > [Chaport](https://bubble.io/plugin/chaport-live-chat-1613928323780x866888852584267800) > [ChatBot (chatbot.com)](https://bubble.io/plugin/chatbot-live-chat-chatbotcom-1613924419124x536313498559840260) > [Freshchat (Freshworks)](https://bubble.io/plugin/freshchat-freshworks-chat-1613928682777x564687615386452000) > [tawk.to](https://bubble.io/plugin/tawkto-live-chat-1613927791723x595239171872784400) > [Olark](https://bubble.io/plugin/olark-live-chat-1613922269941x133005022630772740) # Advanced Screenshot Element πŸ–Ό Capture a screenshot of a single element, visible part of the page or the entire page ## πŸ”— Links > [Demo](https://digitaleyedemo.bubbleapps.io/screenshotelementpro) | [Editor](https://bubble.io/page?name=screenshotelementpro\&id=digitaleyedemo\&tab=tabs-1) > [Plugin page](https://bubble.io/plugin/screenshot-element-pro-1611438394170x673066697274163200) > [Forum](https://forum.bubble.io/t/new-plugin-screenshot-element-pro/136632) ## ℹ️ Introduction ![](/files/-MXgDMNUKUpPgoM5r-Ci) ## πŸ”₯ Features * Capture a screenshot of a single element by its ID * Capture the visible visible part of the page (as currently displayed in browser) * Full Page capture * Save screenshot in JPG or PNG * Generate URL (upload to Bubble filestorage) * Download the screenshot * Choose image compress quality ## πŸ“š Documentation ### ➑️ Screenshot of the the visible part of the screen: 1\. In Workflow choose "Generate Screenshot" action. Define the Filename, File Format, choose Screenshot Type "Screen" and Output ![](/files/-MXgEovJ_iQ3CExzwfbC) ### ➑️ **Screenshot of the entire page** 1\. In Workflow choose "Generate Screenshot" action. Define the Filename, File Format, choose Screenshot Type "Entire Page" and Output. ![](/files/-MXgExI0OvYPIGGHbgrz) ### ➑️ **Screenshot of an element by ID** 1\. Settings / General / Select "Expose the option to add an ID attribute to HTML elements" ![](/files/-MXgFBNYY48_Kf_jgC0Z) 2\. Define ID for an element you want to save ![](/files/-MXgFDUiuVnpotV8oxfN) 3\. In Workflow choose "Generate Screenshot" action. Define the Filename, File Format, choose Screenshot Type, Output and Element ID ![](/files/-MXgFGjs9x1RIVZbI7xY) # Screenshot Element πŸ–Ό Easy to use Plugin to save an Element to PNG by its ID. πŸ“Έ ## πŸ”— Links > [Demo](https://screenshotdemo.bubbleapps.io/) | [Editor](https://bubble.io/page?name=index\&id=screenshotdemo\&tab=tabs-1) > [Plugin page](https://bubble.io/plugin/screenshot-element-1611427174263x940872047117205500) ## ℹ️ Introduction ![](/files/-MXgG7LUAyrlsTgTdn_r) ## πŸ“š Documentation 1\. Go to Application Settings / General / Select "Expose the option to add an ID attribute to HTML elements" ![](/files/-MXgGMcUY_mT1OpnX6e6) \ 2\. Define an ID for the element you want to save as Image (ID Attribute field) ![](/files/-MXgGQ5sBiZZ9vLDoiqv) \ \ 3\. Add event: "Download Element As PNG". Define filename and element\_id from the previous step ![](/files/-MXgGU3bvfaq5gt31zF0) # Cookies πŸͺ Easy Read, Write and Delete browser cookies ## πŸ”— Links > [Demo](https://digitaleyedemo.bubbleapps.io/version-test/cookies) | [Editor](https://bubble.io/page?name=cookies\&id=digitaleyedemo\&tab=tabs-1) > [Plugin page](https://bubble.io/plugin/cookies-1611605211880x216983365361336300) > [Forum](https://forum.bubble.io/t/plugin-announcement-cookies/136052) ## ℹ️ Introduction Cookies allow you to store user's data without using Bubble's database. And this plugin makes the cookies management very simple. Use cases: Save user preferences for language, dark/light mode, currency, country, visit numbers, last visit date, any stats etc ## πŸ”₯ Features * Read a cookie by name * Delete a cookie by name * Add a cookie: name + value + expiration (in days) * Read all cookies ## πŸ“š Documentation Available actions: * Read a Cookie by name * Write a Cookie: define a name, value and expiration (in days) * Delete a Cookie by name * Read all Cookies Available states: * Cookie: available after "Read a Cookie" action * All Cookies: available after "Read all Cookies" action Plugin is very easy to use. Check our demo for a detailed example. # Device by Screen Size πŸ“± πŸ–₯ πŸ“Ί Plugin allows you to get the current screen size (xs, sm, md, lg) and/or receive an appropriate event every time user changes the screen size. ## πŸ”— Links > [Demo](https://digitaleyedemo.bubbleapps.io/version-test/devicebyscreensize) | [Editor](https://bubble.io/page?name=devicebyscreensize\&id=digitaleyedemo\&tab=tabs-1) > [Plugin page](https://bubble.io/plugin/device-by-screen-size-width-1611618330713x668390098435833900) > [Forum](https://forum.bubble.io/t/plugin-announcement-device-by-screen-size-width/136418) ## πŸ”₯ Features * Get current screen size: extra small (**xs**), small (**sm**), medium (**md**), large (**lg**) * Triggers an appropriate event every time screen size changes * Define your custom width for every screen size \ Default values: * XS screen: 0px - 768px * SM screen: 768px - 992px * MD screen: 992px - 1200px * LG screen: > 1200px ## πŸ“š Documentation Available events (events trigger workflows, such as a click): * extra\_small\_screen * small\_screen * medium\_screen * large\_screen Available state (states let users access data from this element): * Screen. Possible values: xs, sm, md, lg Check our demo for a detailed usage example. # Browser Language and Locale πŸ“ Plugin detects browser's language and locale ## πŸ”— Links > [Demo](https://digitaleyedemo.bubbleapps.io/version-test/browserlanguage) | [Editor](https://bubble.io/page?name=browserlanguage\&id=digitaleyedemo\&tab=tabs-1) > [Plugin page](https://bubble.io/plugin/browser-language-and-locale-1611674652831x297972691674333200) > [Forum](https://forum.bubble.io/t/new-free-plugin-browser-language-and-locale/136888) ## ℹ️ Introduction Plugin detects browser's language and locale. Language code has a 2-characters browser-independent format: en, es, fr etc Locale format depends on browser. Here are some examples: * fr, fr-fr, fr-FR * en, en-us, en-US ## πŸ“š Documentation 1. Add the Browser Language element into your app. 2. Language code is stored in the state "Language". 3. Locale is stored in the state "Locale". # Advanced \