Widget 🔔
The widget is a small JavaScript plugin (32ko gzip) that will bring a notification bell "a la Facebook" right into your SaaS app.
Installation
To initialize the widget, import the following script in the <head></head>
of your HTML page, and initialize it in the <body></body>
.
The widget needs to be initialized for your project (projectId
) and your end user (userId
).
To avoid any third-party to access all your users notifications, you need to sign the userHmac
parameter with HMAC256. The secret key is provided in your projects settings.
By default, the plugin will wrap the #notifuse-bell
DOM selector: <div id="#notifuse-bell">YOUR BELL ICON HERE</div>
Configuration parameters
Parameter | Type | Description |
| string | You can find your project ID in your projects settings. |
| string | The user ID logged in your app. |
| string | The HMAC256 signature of the |
| string | The DOM selector to attach the widget to. By default it's |
| string | The DOM selector of your favicon. When provided, a red dot will be added in the top right corner of your favicon when your users have unread notifications. This only works with PNG favicons! |
| function | This function is called everytime your user clicks on a notification.
You can use this function to redirect your user etc...
The parameter of the function is a |
| object | Customize the different parts of the widget with inline CSS styles. |
| object | Customize the different parts of the widget with your own CSS classes. |
text | object | Object that contains UI translations. |
text.empty | string | Default: "You don't have any notifications..." |
text.settings | string | Default: "Settings" |
text.notifications | string | Default: "Notifications" |
text.error | string | Default: "Something went wrong..." |
text.markAllAsRead | string | Default: "Mark all as read" |
Example
Methods
Init
Initialize the widget with the provided configuration and listens for clicks on the notification bell to open the widget.
Open
Open the widget from javascript.
Close
Close the widget from javascript.
Destroy
Close the widget and detach event listeners.
Styles & CSS classes
If you want to customize the look of the widget to match your own brand, you can use the following styles and css class names.
Last updated