# 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.