Smart Web Notification
Overview
Description
Web notifications, also referred to as web push, Chrome push notifications, browser push notifications, and web push notifications, are notification-style messages that are sent through a web browser. Gradually, it has turned into a robust tool, especially for marketers. Presently, many website owners are considering installing this extension on their websites.
Key Highlights
- Create, edit, resend, and delete browser notifications.
- Enhance notifications with icons and images.
- Store notifications for later use (Inactive status).
- Built on Firebase for secure, reliable delivery.
- Compatible with ExpressionEngine EE5 and EE6.
- Requires PHP 7.4+ and HTTPS enabled websites.
Features
- Create & Edit Notifications with title, message, URL, icon, and image.
- Visual Enhancements by attaching icons and images.
- Inactive Mode to store drafts for later publishing.
- Resend Option to send existing notifications again.
- Bulk Delete notifications from the admin listing.
- Unlimited Notifications no cap on the number of messages.
- Firebase Integration for push messaging.
Plugin's purpose and benefits
Installation
- Download and extract the add-on package.
- Copy:
- The smart_web_notification folder → system/user/addons/
- The smart_web_notification themes folder → themes/user/
- The smart_web_notification folder → system/user/addons/
- Log in as Super Admin to ExpressionEngine backend.
- Go to Add-Ons → Install Smart Web Notification.
Firebase Configuration
- Open Firebase Console and create or use an existing project.
- Add a Web App to your project and get the Config JSON (contains apiKey, authDomain, projectId, etc.).
- Paste the JSON into the plugin’s configuration panel.
- Copy the Server Key from Firebase → Cloud Messaging → Credentials.
- Paste the Server Key into the plugin’s settings.
Front-End Setup
- Place the included JavaScript file in your site’s root directory.
Add the following ExpressionEngine tag to your homepage template:
{exp:smart_web_notification:display}
- This will trigger a browser pop-up asking users to allow notifications.
Managing Notifications
- Create/Edit: Add notification title, message, target URL, icon, and image.
- Activate: Set status to Active to send instantly, or Inactive to save as draft.
- Resend: Select and resend notifications when needed.
- Delete Remove outdated notifications individually or in bulk.
Get Started
Quick setup instructions
How To Use & Features
EE5_EE6:
Download and extract ZIP file of the module. (We recommend using the latest version.)
- Copy Smart_web_notification > system > user > addons > smart_web_notification folder to “Your Site > system > user > addons” Folder.
- Copy Smart_web_notification > themes > user > smart_web_notification folder to “Your Site > themes > user” Folder.
- Log in to the backend panel with Super admin credentials.
- Go to “Add-Ons” and install the Smart Web Notification module.
How to create a Firebase account
To create the Firebase account:
- Go to Firebase Console and add a new project or use an existing one.
- Once your project has been created, then add a web app to your project. Register your web app by adding a name to the app, then click on continue to console.
- Go to the Project Settings by pressing the ‘settings’ icon beside the “Project Overview” at the top left corner.
- In the “General” tab, you will find a newly added web app config panel. Find “Firebase SDK snippet” and select the “Config” radio button to get the configuration keys.
- After selecting the “Config” radio button, you will get the configuration script as a JSON Object with apiKey, authDomain, projectId, storageBucket, messagingSenderId, and appId in it.
- Now you need to copy the exact part from the config script as shown below and paste it in the “Configuration Json Data” text area in the plugin’s Settings page.
{ apiKey: "***********", authDomain: "***********", projectId: "***********", storageBucket: "***********", messagingSenderId: "***********", appId: "***********" }
OR
- You can fill individual values in the input boxes in the “Configuration” panel as well.
Control Panel
In the firebase project, on the project setting page, go to the “Cloud Messaging” tab and copy the “Server key” from the “Project credentials” panel and paste it into the setting page “Server Key” field.
Usage
- After adding the required information on the settings page, download the js file and place it in the server base root folder.
- Put the below one-line code on your front home page.
{exp:smart_web_notification:display}
- While accessing your site, users will get a popup to enable the option for getting the notifications in the future.
Notification:
Add/Edit Notifications:
- Option to add notification in title, text, URL, icon, image, and status according to your requirement.
- You can choose an image on your assets or local.
- If you select Active status, a notification will be sent to your user. The Inactive status notification is stored in your system. Later on, you can edit any notification.
Delete Notifications:
- On the list page, there is an option to select one or more notifications and delete them.
Resend Notifications:
- You can resend one or more notifications from the listing page at a time.
Get Support
FAQs
What should be basic requirement for this add-on to work for the website?
This add-on works only with “https” so that website needs secure SSL to be installed on the website.
Does this add-on use any third party API to send the notifications?
Yes, this add-on uses a Firebase account to generate the notifications for the site.
How much notification can a user can generate?
User can generate unlimited notifications.
Where can the user see the notification?
User can see the notification in the browser.
Change log
version 1.0.0
- This is the initial release.