BNotify Web SDK – User Guide

Welcome to BNotify! This guide will help you quickly add BNotify notifications to your website or web app in just a few easy steps.

1. Install BNotify SDK

Open your terminal and run:

npm install bnotify-web-sdk

2. Service Worker Setup (Required for Notifications)

Option 1: Use BNotify's Default Setup (Recommended)

• You don't need to do anything! BNotify will automatically set up everything for you using its own secure files.

Option 2: Advanced (Host the file yourself)

• Copy the service-worker.js file from the SDK package to your project's public/ folder (so it is available at /service-worker.js on your website).
• BNotify will use this file if the default setup is not available.

3. How to Use BNotify in Your Project

Add this code to your main JavaScript or React file:

import { initializeBNotify } from 'bnotify-web-sdk';

const bnotify = initializeBNotify({
  projectId: 'your-project-id',
  appId: 'your-app-id',
  
  // 🎯 Customize your popup completely!
  popupText: {
    message: 'You will receive the latest updates. You can disable it anytime.',
    allowButton: 'Allow',
    laterButton: 'Later',
    logo: 'N', // Custom logo (text, emoji, or image)
    logoType: 'text' // 'text' for text/emoji, 'image' for image URL
  }
  
  // Optional: Add your own functions for notification events
  onReceived: (data) => {
    // console.log('Notification received:', data);
  },

  onClicked: (data) => {
    // console.log('Notification clicked:', data);
  },

  onDismissed: (data) => {
    // console.log('Notification dismissed:', data);
  }
});

await bnotify.initialize(); // That's it! BNotify will handle everything automatically.

4. 🎨 Custom Popup Text & Logo Examples

Custom Text Examples:

English:

popupText: {
  message: 'Get instant notifications for breaking news and important updates. You can unsubscribe anytime.',
  allowButton: 'Enable Notifications',
  laterButton: 'Maybe Later',
  logo: 'N',
  logoType: 'text'
}

Hindi:

popupText: {
  message: 'Aapko latest news aur updates milenge. Kabhi bhi disable kar sakte hain.',
  allowButton: 'Allow Karo',
  laterButton: 'Baad Mein',
  logo: 'N',
  logoType: 'text'
}

Urdu:

popupText: {
  message: 'Breaking news aur important updates ke liye instant notifications paayein.',
  allowButton: 'Notifications Enable Karein',
  laterButton: 'Baad Mein Dekhte Hain',
  logo: 'N',
  logoType: 'text'
}

Custom Logo Examples:

Text Logos:

logo: 'M',        // Mjunoon style
logo: 'N',        // News app
logo: 'T',        // Tech app
logo: 'S',        // Sports app
logo: 'B',        // Business app

Emoji Logos:

logo: '🔔',       // Bell icon
logo: '📰',       // Newspaper
logo: '⚽',        // Sports
logo: '💻',        // Technology
logo: '📱',        // Mobile

Image Logos:

popupText: {
  message: 'Get latest updates and notifications.',
  allowButton: 'Enable',
  laterButton: 'Later',
  logo: 'https://yourdomain.com/logo.png', // Image URL
  logoType: 'image'
}

5. 🚀 Advanced Features

Manual Popup Trigger:

// Show popup manually at any time
const subscribed = await bnotify.showSubscriptionPopup();
if (subscribed) {
  console.log('User subscribed to notifications!');
}

Complete Customization Example:

const bnotify = initializeBNotify({
  projectId: 'my-news-app',
  appId: 'news-notifications',
  
  // Complete customization
  popupText: {
    message: 'Aapko latest news aur updates milenge. Kabhi bhi disable kar sakte hain.',
    allowButton: 'Allow Karo',
    laterButton: 'Baad Mein',
    logo: '🔔', // Emoji logo
    logoType: 'text'
  }
});

await bnotify.initialize();

6. No Manual Service Worker Registration Needed

• You do not need to write any extra code to register the service worker.
• Just call bnotify.initialize() and BNotify will do the rest.

7. Troubleshooting

• Service Worker registration failed?
  • Make sure your website uses HTTPS (except on localhost for testing).
  • If you use your own file, make sure /service-worker.js is accessible from your website's root.
• Notifications not showing?
  • Check your browser's notification permissions.
  • Make sure you called await bnotify.initialize() after your app loads or after a user action.
• Custom text/logo not showing?
  • Make sure popupText object is properly configured.
  • Check that logoType is set correctly ('text' or 'image').

8. Need Help?

If you have any questions or need help, please contact your BNotify support team.

License

MIT