Custom Notifications using bootstrap

Question

I am using bootstrap notifications to show informational messages to my end users. http://goodybag.github.io/bootstrap-notify/

And I have a DIV called

<div class="notifications bottom-right"></div>

In theory the library should be handling the JS I have made sure the library is loaded and it is but still no notification window is showing I don't know why I want this to happen on page load so user is told if has points pending.

How would I adapt the script tag to achieve that via PHP ?.

<script>
    $('.bottom-right').notify({
        message: { text: 'Aw yeah, It works!' }
    }).show(); // for the ones that aren't closable and don't fade out   there is a .hide() function.
</script>

Edit to show files in Header I have used wp enque obv

<script type='text/javascript' src='http://fundrasing.davidbuckleyni.co.uk/wp-content/themes/gogreensoccer5/js/bootstrap-notify.js?ver=201202012'></script>
<link rel='stylesheet' id='notifcations-css1-css'  href='http://fundrasing.davidbuckleyni.co.uk/wp-content/themes/gogreensoccer5/css/bootstrap-notify.css?ver=1.0' type='text/css' media='all' />
<link rel='stylesheet' id='notifcations-css2-css'  href='http://fundrasing.davidbuckleyni.co.uk/wp-content/themes/gogreensoccer5/css/styles/alert-blackgloss.css?ver=1.0' type='text/css' media='all' />
<link rel='stylesheet' id='notifcations-css3-css'  href='http://fundrasing.davidbuckleyni.co.uk/wp-content/themes/gogreensoccer5/css/styles/alert-bangtidy.css?ver=1.0' type='text/css' media='all' />

Answer 1

Working example: https://jsfiddle.net/mwatz122/1k3s7m80/

Make sure you include all of the necessary libraries (both CSS and JS). In my JSFiddle example, I have included bootstrap-notify.min.css , alert-bangtidy.min.css , alert-blackgloss.min.css , and bootstrap-notify.min.js from a CDN.

If you want the notification to show when the page loads, you should include the JavaScript code within a $(document).ready block as shown.

<div class='notifications bottom-right'></div>

$(document).ready(function () {
    $('.bottom-right').notify({
        message: {
            text: 'Aw yeah, It works!'
        }
    }).show();
});

Edit:

Your site is throwing an error when the page loads:

Uncaught TypeError: $(...).notify is not a function

This means the bootstrap-notify.min.js source file isn't detected. I would try referencing a CDN first, to make sure you can get it working. You should include jQuery and Bootstrap before the bootstrap-notify.min.js file in your header. You can use this as your CDN link https://cdnjs.cloudflare.com/ajax/libs/bootstrap-notify/0.2.0/js/bootstrap-notify.min.js .