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.