POP NOTIFY (PRO)

Pop Notify (Pro)

Published December 2025

    •    Updated this week

Plugin details

PopNotify upgrades your app's user experience by replacing boring native alerts with sleek, responsive notifications and smart modals.

🔥 Features:

🎨 Toasts: Modern, non-blocking notifications (Success, Error, Warning, Info) that float on the screen.

🛑 Smart Modals: Beautiful "Are you sure?" confirmation popups that trigger workflows based on user choice (Yes/No).

⏳ Loading State: Block the UI with a professional spinner while your workflows run in the background. Prevents double-clicks.

📝 Input Popups: Collect data (email, password, text) directly inside a sleek modal without building custom popups.

🚀 Lightweight: Built on Toastify.js and SweetAlert2. Zero impact on page load speed.

📱 Responsive: Looks perfect on mobile and desktop.

Use cases:

   - Confirming a database save.

   - Displaying validation errors.

   - "Delete Account" safety checks.

   - Blocking the screen during payment processing.

🍞 Toast Upgrades

Custom Branding: You are no longer limited to the default gradients. Use the Custom Color field to match your brand identity perfectly.

Interactivity: Added a Toast Clicked event (great for "Click here to view" notifications) and a manual "Close" button option.

⏱️ Popup Timers

Create "Redirecting in 3..." style popups easily.

Added Timer (ms) and Progress Bar inputs to the Show Popup action.

🔽 New Action: Show Dropdown Input

Need to ask the user for a quick choice without building a custom popup?

Use Show Dropdown Input, pass a list of text options, and get the selected result immediately in your workflow.

Premium Notification Framework (Toasts)

Action Buttons: Add clickable buttons inside toasts to trigger Bubble workflows instantly.

Animated Progress Bars: Visual timers that pause when the user hovers over them.

Perfect Stacking: Multiple notifications queue and stack beautifully without overlapping.

Custom Avatars: Inject user profile pictures or custom icons directly into the toast.

Modal & Popup Expansion

Side Drawers & Fullscreen: Slide-in panels from the left/right and immersive fullscreen modals.

Rich Media Embeds: Display Images, YouTube/Vimeo Videos, or PDF documents right inside the popup.

Marketing Countdowns: Real-time visual countdown timers (e.g., "Offer ends in 3.2s") to drive urgency and conversions.

Enterprise Confirmation Suite

Built-in Theme Engine: Instantly apply stunning CSS themes like Glassmorphism, Dark Mode, Neon, Corporate, or Minimalist.

OTP & Password Verification: Built-in inputs with numeric keypad support for mobile OTPs.

Legal / Terms Acceptance: Modals with mandatory checkboxes that block the confirmation button until accepted.

Delete Protection: High-risk red dialogs to prevent accidental data loss.

📊 Advanced Notification Automation
We added purpose-built UI templates for SaaS growth. Easily trigger fixed Feature Announcements, rich-text Changelog popups for release notes, and fully functional 0-10 NPS Surveys to measure user satisfaction.

✍️ Interactive User Input Suite
Why force users to load a new page just to fill out a form? V4 introduces advanced interactive modals:
* Star Rating Selectors
* Native Date & Time Pickers
* Multi-field profile forms (with color pickers!)
All natively integrated to extract the exact data your user inputs and send it straight to your Bubble database.

🧠 Bubble Workflow Intelligence
PopNotify Pro now has a "nervous system". Every action you trigger now communicates back to Bubble using Promises and Callbacks. Build smart workflows that only trigger when a popup is explicitly closed, a toast expires naturally, or a specific input is submitted.

(Note: For persistent Notification Centers/Inboxes, we highly recommend using Bubble's native database and Repeating Groups to store the history, paired with our plugin for the visual frontend alerts!)

Welcome to Pop Notify V5.0 – The Ultimate Mobile Native Upgrade! 📱

We are thrilled to introduce the Mobile Native (Beta) element. If you are wrapping your Bubble app into a native iOS/Android app (via BDK, Natively, Expo, etc.), standard web alerts and popups often look clunky, suffer from z-index issues, or break layout bounds. Not anymore!

This major release brings a dedicated React Native engine to your app. One single 1x1 invisible element controls an entire suite of beautifully animated, 100% native UI components:

✨ What's Included in the Mobile Engine:

Animated Toasts: Slide-in alerts (Top/Bottom) with progress bars and native sound effects.

Confirmation Dialogs: Featuring 5 stunning themes including true iOS-style Glassmorphism (native blur). Supports Passwords and OTP inputs.

Popups & Modals: Standard, Fullscreen, or Drawer layouts with WebView support for PDFs/Videos.

Native Loading Spinners: Block user interaction securely using the official iOS/Android Activity Indicators.

Feature Banners: Sticky top/bottom announcement banners.

Interactive Surveys: Beautiful 0-10 NPS Surveys and Star Rating modals.

Native Date Picker: Triggers the official, native iOS/Android DateTime wheel picker!

Zero CSS hacks. Pure native performance at 60fps.

Demo Test: https://demo-app-56978.bubbleapps.io/version-test/popnotify_pro/1764692349311x271064431071847070

Editor: https://bubble.io/page?id=demo-app-56978&test_plugin=1764677645773x399101250759295000_current&tab=Design&name=popnotify_pro&ai_generated=true

$15

One time • Or $5/mo

 stars   •   0 ratings

1 installs  

This plugin does not collect or track your personal data.

Platform

Web & Native mobile

Contributor details

NoCoddo

Joined 2025   •   96 Plugins

View contributor profile

Instructions

How to use PopNotify:

1. Setup: Drag the PopNotify element onto your page.

Pro Tip: Since notifications float above the page content, you can make the element very small (e.g., 1x1px) and place it anywhere. It does not need to be visible.

2. Showing Toasts (Non-blocking): Use the action "Show Toast" for simple notifications.

Select the Type (Success, Error, Warning, Info) and Position (Right, Center, Left).

3. Using Modals (Blocking):

   - Confirmation: Use "Show Confirmation" to ask "Are you sure?".

   - Go to the Workflow tab and select Elements > An element has an event.

   - Choose "User clicked Confirm" to handle the "Yes" action.

   - Choose "User clicked Cancel" to handle the "No" action.

   - Loading: Use "Show Loading" to block the screen. Use "Close All" to remove it when the workflow finishes.

   - Inputs: Use "Show Input" to ask for data. Listen for the "Input Submitted" event and read the value from SleekAlerts A's input_value.

How to use the V3 Actions in your Workflows:

🛠️ Action: Show Toast

Select the visual Type (Success, Error, Warning, Info, or Custom).

Set the Duration in milliseconds (e.g., 3000). Set to 0 for a persistent toast.

Optional: Fill in Action Button Text (e.g., "View Details"). If clicked, it will trigger the A Toast Action Button is clicked event in Bubble. You can retrieve the clicked notification's text using the element's last_action_clicked state.

Optional: Add a Custom Icon URL to show a user's avatar.

🛠️ Action: Show Popup

Choose your Layout Mode (Standard, Fullscreen, Drawer Right, Drawer Left).

To embed media, select the Media Type (Image, Video, PDF) and provide the Media URL.

Toggle Show Countdown to display a real-time descending clock based on your Timer property.

Use the A Popup is Confirmed or A Popup is Closed events to continue your workflows.

🛠️ Action: Show Confirmation

Select a Theme (e.g., Glassmorphism) to instantly style your dialog.

Choose a Dialog Mode:

Standard: Regular Yes/No confirmation.

Password / OTP: Asks the user for input. Retrieve what they typed using the element's input_value state.

Legal Acceptance: Requires the user to check a box before proceeding.

Check Reverse Buttons to swap the positions of the Confirm and Cancel buttons (Windows vs. Mac style).

Trigger your next actions using the A Dialog is Confirmed event.

To prevent confusion, here is exactly which Events and States are triggered by each specific Action. Always set up your Bubble Workflows to listen to these events to capture the data!

| Action Used | Triggers Event | Exposes State (Data) |
| :--- | :--- | :--- |
| Show NPS Survey | nps_submitted | nps_score (Number) |
| Show Star Rating | star_rating_submitted | star_rating_value (Number) |
| Show Date & Time Picker | datetime_submitted | datetime_value (Text) |
| Show Multi-Field Form | multi_form_submitted | form_field_1, form_field_2, form_color (Text) |
| Show Input | input_submitted, popup_opened/closed/cancelled | input_value (Text) |
| Show Dropdown Input | dropdown_selected, popup_opened/closed/cancelled | dropdown_value (Text) |
| Show Toast | toast_clicked, toast_action_clicked, toast_expired | last_action_clicked (Text) |
| Show Popup & Confirmation | popup_opened, popup_closed, popup_confirmed, popup_cancelled | input_value (If dialog mode is used) |
| Close All | all_closed | (None) |

Example Setup:
1. Run "Show Star Rating".
2. Create a new workflow: "Do when PopNotify's star_rating_submitted is fired".
3. Add action: Create a new Database Thing -> Save "PopNotify's star_rating_value".

How to setup Pop Notify Mobile (Beta) in your App:

1. The "Floating" Setup (Crucial for Z-Index):
To ensure your native alerts always appear above your app's buttons and navigation bars, you must place the engine in the highest layer.

Draw a standard Bubble Floating Group on your page (Set to Float relative to: Top, Background: None, Width: 1px, Height: 1px).

Drag and drop the new Pop Notify Mobile element inside this Floating Group.

2. Triggering Actions:
Do not use the legacy web actions. Look for the new actions prefixed with "Mobile" in your workflow editor:

Show Mobile Toast

Show Mobile Popup

Show Mobile Confirmation

Show Mobile Loading (Use Close Mobile Windows to hide it!)

Show Mobile Banner

Show Mobile NPS / Show Mobile Stars / Show Mobile Date Picker

3. Capturing Data:
The mobile element exposes several dedicated States (e.g., input_value, nps_score, star_rating_value, datetime_value) and Events (e.g., toast_clicked, popup_confirmed, nps_submitted). Use these events to trigger your backend workflows and save the captured data seamlessly.

4. Debugging:
Running blind on mobile is tough! Bind a text element on your test page to the Pop Notify Mobile's debug_logs state to see real-time, timestamped logs of everything the engine is doing behind the scenes.

Types

This plugin can be found under the following types:

Element   •   Event   •   Action

Resources

Support contact

Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.

Product

Bubble for

Discover

Learn

Resources

Community

Company

Legal

Pop Notify (Pro)

Plugin details

$15

One time • Or $5/mo

Other actions

Platform

Contributor details

Instructions

Types

Categories

Resources

Rating and reviews

No reviews yet