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/
  • 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

Obtain the add-on package and extract the ZIP file to a temporary location.
Step 1
Download and Unzip
Obtain the add-on package and extract the ZIP file to a temporary location.
Upload the extracted files to the appropriate directory on your server (`system/user/addons` for EE5+ or `system/expressionengine/third_party` for EE4 and below).
Step 2
Upload Files
Upload the extracted files to the appropriate directory on your server (`system/user/addons` for EE5+ or `system/expressionengine/third_party` for EE4 and below).
Ensure directories are set to `755` and files to `644`.
Step 3
Set Permissions
Ensure directories are set to `755` and files to `644`.
Log in to the ExpressionEngine Control Panel, navigate to the
Step 4
Install via Control Panel
Log in to the ExpressionEngine Control Panel, navigate to the "Add-Ons" section, and click "Install" next to the uploaded add-on.
Configure the add-on as per the developer's instructions and verify its functionality.
Step 5
Configure and Verify
Configure the add-on as per the developer's instructions and verify its functionality.
Questions about our plugins?

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.

Get Premium Support

Request a Quote

Submit this form now and we will get back to you promptly!