📘 Buzz Pro: Advanced Setup Guide
1. ⚙️ Configuration sw.js & VAPID Keys (Crucial)
Before sending any notifications, you must configure the plugin in the Plugins Tab.

  - VAPID Public Key: Your generated public key.

  - VAPID Private Key: Your generated private key.

  - Contact Email: ⚠️ IMPORTANT: This field must include the mailto: prefix.

  ❌ Incorrect: [email protected]

  ✅ Correct: mailto:[email protected]

  Why? The Web Push protocol requires a valid URI for the contact field.

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_pro/1766505853678x993904586022841500


2. 📊 Setting Up Click Analytics (Internal Links)
Buzz Pro has a built-in system to track who clicks on your notifications.

How it works: When you define a tracking_id (e.g., promo_winter), the plugin automatically appends ?pid=promo_winter to your destination URL.

Step-by-Step Implementation:

  - Database Setup:

     - Create a new Data Type called Push Analytics.

     - Add fields: Campaign Name (text), User (User), Timestamp (date).

     - Workflow Setup (On your landing page/index):

Go to your index page (or the page your notifications link to).

     - Create a workflow event: Page is loaded.

     - Add a Condition: Only when: Get data from page URL (parameter: pid) is not empty.

  - Action:

     - Create a new thing... (Push Analytics)

     - Campaign Name = Get data from page URL (parameter: pid)

     - User = Current User

3. 🔀 The Redirect Strategy (Tracking External Links)
If you want to link to an external site (e.g., Google, CNN, Affiliate Link) AND track the click in your Bubble database, you cannot link directly. You must use a "Middleman Page".

Why? If you link directly to Google, the user leaves your app immediately, and Bubble cannot record the click.

How to set it up:

  - Create a Redirect Page:

     - Create a new blank page in Bubble called redirect.

     - (Optional) Add a loading spinner icon in the center.

  - Add the Logic:

     - On the redirect page, create a workflow: Page is loaded.

     - Step 1 (Track): Create a new Push Analytics entry (save the pid from URL).

     - Step 2 (Forward): Add action Open an external website.

     - Destination: Get data from page URL (parameter: target).

     - Sending the Push: When using the Send Bulk Push action for an external link:

     - Deep Link: Do not put https://google.com. Instead, put your redirect URL: https://your-app.bubbleapps.io/version-test/redirect?target=https://google.com

     - Tracking ID: google_campaign_01

     - Result: The plugin will send the user to .../redirect?target=google.com&pid=google_campaign_01. Your page saves the data, then immediately sends the user to Google.