Installation & Usage Instructions
Add the Pipeline Dashboard Mobile element to your Bubble Native Mobile page and resize it to fit the available screen width.

Configure your pipeline stages using the plugin fields.

1. Configure the Pipeline Stages

Set Stage Names with the list of stages you want to display.

Example:

New Lead, First Contact, Follow Up, Appointment, Negotiation, Closed

The order of the list determines the order in which stages are displayed in the dashboard.

2. Configure Stage Colors

Set Stage Colors with one color for each pipeline stage.

The colors must follow the same order as Stage Names.

Example:

#E85D68, #35A4C7, #356BA8, #9CA6B0, #F5A623, #45C978

Each visualization automatically uses these colors.

3. Provide Pipeline Data

Use the plugin's source fields to provide the records associated with each pipeline stage.

The dashboard automatically calculates the quantities and percentages according to the supplied data.

Make sure the order of your data corresponds to the order configured in Stage Names.

4. Date Filtering

Provide the corresponding dates through Stage Source Dates when you want to use the built-in period filters.

Users can analyze pipeline data by:

Month
Quarter
Semester
Year

The dashboard recalculates the stage quantities and percentages according to the selected period.

5. Visualization Modes

The dashboard provides four visualization modes:

Cards — Displays pipeline stages as compact colored cards.

Bars — Displays each stage using horizontal progress bars.

Funnel — Displays the pipeline from the widest first stage to progressively narrower stages.

Donut — Displays stage distribution using an interactive donut chart with a colored stage legend.

Users can switch visualization modes directly from the dashboard when the visualization controls are enabled.

6. Stage Selection

Tap any pipeline stage to select it.

When a stage is selected:

The stage receives a visual glow effect
Its percentage is displayed
Selection states are updated
The corresponding Bubble event can be triggered

Use the plugin's exposed States and Events to create workflows based on the selected pipeline stage.

7. Light and Dark Mode

Enable or disable Dark Mode according to your app design.

The dashboard automatically adjusts its interface while preserving the configured pipeline stage colors.

8. Customize the Dashboard

Use the available appearance fields to customize elements such as:

Dashboard colors
Primary color
Background color
Title background
Border radius
Padding
Greeting
User name
Quantity label
Stage names
Stage colors
Visualization controls
Period controls

This allows the dashboard to match the visual identity of your Bubble mobile application.

Important

This plugin is designed specifically for Bubble Native Mobile applications.

For best results, keep your Stage Names, Stage Colors, Source Values, and Source Dates in the same stage order, so the plugin can correctly associate each value with its corresponding pipeline stage.