How to Use Browser Push Notifications The Browser Push Notifications plugin allows your application to send system-level alerts to your users' desktops or mobile devices. These notifications appear outside the browser window, making them highly effective for urgent updates or re-engagement.

Initial Setup & Permissions
Browsers require an explicit "Allow" from the user before notifications can be displayed.

Triggering the Request: The permission prompt is automatically triggered the first time the Send Browser Notification action runs.

Best Practice: Do not trigger this on page load, as browsers often block "unsolicited" permission requests. Instead, trigger the action after a user clicks a button, such as "Enable Alerts."

Permanent Choices: If a user selects "Block," the browser will prevent any future prompts. The user must then manually click the "lock" or "settings" icon in their URL bar to reset permissions for your site.

Using the Workflow Action
In your Bubble workflow, add the Send Browser Notification action. You will need to fill out the following fields:

Title: This is the bold text at the top of the alert. Keep it short and actionable.

Description: This is the main body of the message. Use this to provide context or specific details.

Image: Provide a full HTTPS URL to an icon or logo. This image will appear inside the notification box.

Link: Enter the full URL where you want the user to go when they click the notification. It will open in a new browser tab.

Sound: You can provide a URL to a sound file, though please note that most modern browsers will ignore this and use the default system alert sound to prevent intrusive audio.

Important Requirements
Security: This plugin requires an HTTPS connection. It will not function on local development environments or sites using standard HTTP.

Mobile Support: On Android, notifications appear in the system tray. On iOS, notifications are primarily supported for "Web Apps" that the user has added to their Home Screen.

Click Behavior: When a user clicks the notification, it will automatically attempt to focus your app's tab or open the provided link in a new one.

Suggested Use Cases
Direct Messages: Notify a user the moment they receive a new chat or private message.

Task Completion: Alert a user when a heavy background process, like a CSV export or image processing, is finished.

Reminders: Trigger a notification five minutes before a scheduled event or meeting begins.


Demo URL: https://hks-demos.bubbleapps.io/version-test/web_notifications?debug_mode=true

Demo Editor URL: https://bubble.io/page?id=hks-demos&test_plugin=1776769758557x113940875926306820_current&tab=Design&name=web_notifications&type=page&elements=cmNCE