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>

<html>
<head>
    ...
    <script src="https://notifuse.com/widget/widget2.min.js"></script>
</head>
<body>
    <!-- Your bell icon will be wrapped by the plugin -->
    <div id="#notifuse-bell">🔔</div>
    
    <script type="text/javascript">
        // customize the projectId, userId and userHmac with
        Notifuse.init({ 
            projectId: 'YOUR_PROJECT_ID',
            userId: 'YOUR_USER_ID',
            userHmac: 'YOUR_USER_ID_HMAC_SIGNATURE',
            onClickMessage: (message) => {
            
                console.log('got click on message', message);
                
                 switch (message.notificationId) {
                    default:
                      console.log('notification not implemented', notificationId);
                 }
            },
            bellSelector: '#notifuse-bell'
        });
    </script>
</body>
</html>

Configuration parameters

Parameter

Type

Description

projectId (required)

string

You can find your project ID in your projects settings.

userId (required)

string

The user ID logged in your app.

userHmac (required)

string

The HMAC256 signature of the userId. The secret key is provided in your projects settings.

bellSelector

string

The DOM selector to attach the widget to. By default it's #notifuse-bell, and will be attached to <div id="notifuse-bell>YOUR BELL ICON HERE</div>

faviconSelector

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!

onClickMessage

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 message object.

styles

object

Customize the different parts of the widget with inline CSS styles.

classNames

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

<!DOCTYPE html>
<html>
<head>
    <title>Notifuse Widget example</title>
    <link id="favicon" rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <script src="https://notifuse.com/widget/widget2.min.js"></script>
</head>

<body>
    <h1>Notifuse Widget example</h1>

    <p style="text-align: right">
        <span id="notifuse-bell">
            <svg aria-hidden="true" style="cursor: pointer; width: 26px; height: 30px; color: #673AB7" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-bell fa-w-14 fa-fw fa-lg"><path fill="currentColor" d="M224 512c35.32 0 63.97-28.65 63.97-64H160.03c0 35.35 28.65 64 63.97 64zm215.39-149.71c-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84C118.56 68.1 64.08 130.3 64.08 208c0 102.3-36.15 133.53-55.47 154.29-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h383.8c19.12 0 32-15.6 32.1-32 .05-7.55-2.61-15.27-8.61-21.71z"></path></svg>
        </span>
    </p>

    <script type="text/javascript">
        // customize the projectId, userId and userHmac with
        Notifuse.init({
            projectId: 'YOUR_PROJECT_ID',
            userId: 'test',
            userHmac: 'd1c9261eda09528b4d6bd73fe9c371b41989123a711de2a88c54e0a7dab16b70',
            onClickMessage: (message) => {
                
                console.log('got click on message', message);
                switch (message.notificationId) {
                    default:
                    console.log('notification not implemented', notificationId);
                }
            },
            bellSelector: '#notifuse-bell',
            faviconSelector: '#favicon',
            styles: {
                container: {
                    background: "red"
                },
                link: {
                    color: "red",
                },
            },
            classNames: {
                container: "my-container-class"
            },
            text: {
                markAllAsRead: "Tout marquer comme lu",
                empty: "No more stuff..."
            }
        });
    </script>
</body>
</html>

Methods

Init

Initialize the widget with the provided configuration and listens for clicks on the notification bell to open the widget.

Notifuse.init(configuration);

Open

Open the widget from javascript.

Notifuse.open();

Close

Close the widget from javascript.

Notifuse.close();

Destroy

Close the widget and detach event listeners.

Notifuse.destroy();

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.

PreviousTemplatesNextBackend API

Last updated

Was this helpful?