Introduction
Installation
How to create a firebase account
Control Panel
Usage
Changelog

Introduction

This add-on is used to configure and display desktop notifications to the users. These notifications’ appearance and specific functionalities provide a way to deliver information to the user asynchronously. This add-on uses a Firebase account.

Compatibility
EE Compatible Version: EE5, EE6.

Some of the features of Smart Web Notification are listed below:

  • Create a notification or edit the existing ones.
  • Option to send an icon and an image with a notification.
  • Store notifications for future use..
  • Option to resend existing notifications
  • Remove unnecessary or old notifications.
  • Add notifications for future use by using ‘Inactive’ status

We are not providing support for EE3, EE4.

Installation

Follow below steps to install Smart Web Notification add-on:

EE5_EE6:

  1. Download and Extract ZIP file of the module. (We recommend to use the latest version.)
  2. Copy Smart_web_notification > system > user > addons > smart_web_notification folder to “Your Site > system > user > addons” Folder.
  3. Copy Smart_web_notification > themes > user > smart_web_notification folder to “Your Site > themes > user” Folder.
  4. Login to the backend panel with Super admin credentials.
  5. Go to “Add-Ons” and Install 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.

Changelog

V1.0.0
This is the initial release.