Notifications

Use the popular Bootstrap Notify plugin to show dismissable notifications to your user

Getting started

You need to include the following javascript file before the end of the body tag:

<script src="@@path/vendor/bootstrap4-notify/bootstrap-notify.min.js"></script>

In order to enable animations you will also need to include the following stylesheet before the end of the head tag:

<link type="text/css" href="@@path/vendor/animate.css/animate.min.css" rel="stylesheet">

Example

Use the following example to show a notification in the top left part of the window when clicking on the button:

<button class="btn btn-info" id="notifyTopLeft">Top left info</button>

Javascript

The following script will launch a notification when the button will be clicked:

document.getElementById('notifyTopLeft').addEventListener('click', function (){
    const notyf = new Notyf({
        position: {
            x: 'left',
            y: 'top',
        },
        types: [
            {
                type: 'info',
                background: 'blue',
                icon: {
                    className: 'fas fa-info-circle',
                    tagName: 'span',
                    color: '#fff'
                },
                dismissible: false
            }
        ]
    });
    notyf.open({
        type: 'info',
        message: 'Send us <b>an email</b> to get support'
    });
});

Message and type

Set the message and icon of the notification by modifying the options object:

notyf.open({
    type: 'info',
    message: 'John Garreth: Are you ready for the presentation?'
});

Positioning

Change the following two properties inside the settings object to update the position of the notification:

position: {
    x: 'right',
    y: 'bottom',
},

Theming

Update the types property from the settings object to one of the Bootstrap color classes such as info, success, primary or warning:

types: [
    {
        type: 'info',
        background: 'black',
        icon: {
            className: 'fas fa-comment-dots',
            tagName: 'span',
            color: '#fff'
        },
        dismissible: false
    }
]

You can read more about the Notyf options from the official plugin documentation.