Professional web push notification SDK with beautiful subscription popups
npm install bnotify-web-sdkWelcome to BNotify! This guide will help you quickly add BNotify notifications to your website or web app in just a few easy steps.
---
Open your terminal and run:
``bash`
npm install bnotify-web-sdk
---
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.
---
Add this code to your main JavaScript or React file:
`js
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.
`
---
#### English:
`js`
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:
`js`
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:
`js`
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'
}
#### Text Logos:
`js`
logo: 'M', // Mjunoon style
logo: 'N', // News app
logo: 'T', // Tech app
logo: 'S', // Sports app
logo: 'B', // Business app
#### Emoji Logos:
`js`
logo: '🔔', // Bell icon
logo: '📰', // Newspaper
logo: '⚽', // Sports
logo: '💻', // Technology
logo: '📱', // Mobile
#### Image Logos:
`js`
popupText: {
message: 'Get latest updates and notifications.',
allowButton: 'Enable',
laterButton: 'Later',
logo: 'https://yourdomain.com/logo.png', // Image URL
logoType: 'image'
}
---
js
// Show popup manually at any time
const subscribed = await bnotify.showSubscriptionPopup();
if (subscribed) {
console.log('User subscribed to notifications!');
}
`$3
js
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 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').---
---