🛠️ Step-by-Step Configuration 1. Generating VAPID Keys 🔑
VAPID keys are the "handshake" between your server and the browser. You only need to generate them once.

  - Go to vapidkeys.com

  - Click Generate.

  - Copy the Public Key and Private Key.

  - Paste them into the Plugin Settings in your Bubble Editor (fill both Dev and Prod columns).

  - Note: Never share your Private Key!

2. Installing the Service Worker (sw.js) 📁
Browsers require a script at the root level to listen for background notifications.

  - Create a text file on your computer named sw.js.

  - Paste the provided Service Worker code into it.

  - In the Bubble Editor, go to Settings > SEO / Metatags.

  - Scroll down to "Hosting files in the root directory".

  - Upload your sw.js file and set the file name exactly as sw.js

  - Crucial: Ensure your site is running on HTTPS.

  - Download it here: https://demo-app-56978.bubbleapps.io/version-test/buzz_free/1766415193817x417346980893437600

3. Setup the Buzz Bell Element 🔔
Drag the Buzz Bell element onto your page (usually in the header or a settings popup).

  - Paste your VAPID Public Key into the element's property field.

  - Customize the color and size to match your brand.

4. Workflows ⚡
On Subscription: Use the event A Buzz Bell User Subscribed to save the Buzz Bell's Subscription Data (a JSON string) to your User's data type.

  - Sending: Use the Send Native Push Server Action. Pass the saved JSON string, a title, a message, and an optional URL for deep linking.

📱 Important Note for iOS (iPhone/iPad)
For notifications to work on iOS, the user must:

  - Open the app in Safari.

  - Tap the Share button.

  - Select "Add to Home Screen".

  - Open the app from the Home Screen icon.


"Best Practices for Redirection":

⚠️ Important Check regarding External Links (Google, etc.) Due to strict browser security policies (especially on iOS/Safari), Push Notifications must open a page within your app first.

How to link to external sites (e.g., Google):

  - Create a simplified page in your app (e.g., named redirect).

  - On "Page Load", add a workflow to navigate to the URL parameter.

  - Send the notification with the Deep Link: /redirect?url=https://google.com.

  - This ensures 100% deliverability on all devices.


⚠️ IMPORTANT

version-test: Notifications may appear, but redirects/clicks will not work reliably.

Live / Production: All features (Icons, Badges, Redirects) work 100%.