Alerts for Bubble Mobile

✅

Link to plugin page: https://zeroqode.com/plugin/alerts-for-bubble-mobile-plugin-1749538103755x315971236458874040

Demo to preview the plugin:

✅

Demo page: https://zeroqode-native-demo-03.bubbleapps.io/api/1.1/mobile/preview?debug_mode=true&preview_view=Alerts

✅

Bubble Editor: https://bubble.io/page?version=live&name=Alerts&id=zeroqode-native-demo-03&tab=Design

Introduction

The Alerts for Bubble Mobile plugin provides native-style alert dialogs specifically designed for mobile applications built on the Bubble platform. This plugin allows you to create beautiful, customizable modal alerts that match the native look and feel of mobile operating systems. The plugin supports various alert types including informational alerts, confirmations, and input dialogs with extensive customization options for colors, animations, icons, and text styling.

The plugin is optimized for mobile platforms and provides a seamless user experience with smooth animations and responsive design. It supports both simple alerts with OK/Cancel buttons and more complex input dialogs where users can enter text.

Prerequisites

This plugin is designed specifically for the mobile version of the Bubble editor. To test the plugin on your mobile device, use the TestFlight app available at: https://testflight.apple.com/join/phtrt5zv

⚠️

Please note that the testing app is currently available for iOS only.

How to setup

Setting up the Alerts for Bubble Mobile plugin is straightforward:

Install the plugin from the Bubble Plugin Marketplace.

Add the Alert Native element to your page where you want the alerts to appear.

Set up workflows to trigger the alert actions (Show, Hide) based on user interactions.

Optionally configure event handlers to respond to user interactions with the alert (OK button, Cancel button, backdrop clicks).

The plugin requires no additional configuration or API setup - simply install and start using it in your workflows.

Plugin Element Properties

The plugin contains an Alert Native visual element that should be placed on your page to enable alert functionality.

Alert Native

Fields:

Title	Description	Type
Font	Text font settings for the alert	Font

Element Actions

Show

Displays the alert modal with fully customizable appearance, content, and behavior options.

⚠️

Text editing in Rich text editor is currently unavailable in fields Title and Message.

Fields:

Title	Description	Type
Icon
Icon enabled	Enable/disable icon display	Boolean
Icon type	Icon image (info, success, warning, error, question, custom)	Text
Icon size	Icon size in pixels	Number
Icon color	Icon color for info, question and custom icons	Color
Icon svg path(raw)	SVG path for custom icons Example: `M1 7.948A3.49 3.49 0 0 1 0 5.5a3.503 3.503 0 0 1 5.293-3.005A4.005 4.005 0 0 1 9 0c2.21 0 4 1.795 4 4a3.98 3.98 0 0 1-1 2.644V8h2V6h2v10h-2v-2h-2v2H1V7.948zm2 1.016V14h7V7.874a3.998 3.998 0 0 1-3.428-.696A3.502 3.502 0 0 1 3 8.964zM12 12h2v-2h-2v2zM7 4c0 1.112.895 2 2 2 1.112 0 2-.895 2-2 0-1.112-.895-2-2-2-1.112 0-2 .895-2 2zM2 5.5C2 6.334 2.672 7 3.5 7 4.334 7 5 6.328 5 5.5 5 4.666 4.328 4 3.5 4 2.666 4 2 4.672 2 5.5z`	Text
Text
Title	Alert title text. Alert title text. Text editing is currently unavailable in RTE.	Text
Message	Alert message/description text. Alert title text. Text editing is currently unavailable in RTE.	Text
General
Background color	Modal background color	Color
Close on backdrop	Allow closing by tapping backdrop	Boolean
Buttons
△ OK text	OK button text. Leave empty to hide the OK button	Text
Button color	OK button background color	Color
Button text color OK	OK button text color	Color
△ Cancel text	Cancel button text. Leave empty to hide the cancel button	Text
Cancel button color	Cancel button background color	Color
Button text color cancel	Cancel button text color	Color
Animation
Animation type in	Appearing animation	Text
Animation type out	Disappearing animation	Text
Animation duration	Animation duration in milliseconds	Number
Animation fade	Enable fade animation overlay	Boolean
Input
Input enabled	Enable input field	Boolean
Placeholder	Input placeholder text	Text
Default value	Default input value	Text
Input background color	Input background color	Color
Input border color	Input border color	Color
Input border width	Input border width	Number
Input border radius	Input border radius	Number
Input text color	Input text color	Color
Input font size	Input font size	Number
Input padding	Input padding	Number
Input placeholder color	Input placeholder text color	Color

Hide

Reset input state

Exposed states

Name	Description	Type
input text	Current value of the input field	Text
is visible	Current visibility state of the modal	Boolean

Element Events

Name	Description
alert ok clicked	Triggered when OK button is pressed
alert cancel clicked	Triggered when Cancel button is pressed
alert submitted	Triggered when OK is pressed with input enabled
alert backdrop clicked	Triggered when backdrop is tapped