Toastr - a useful message javascript library

Posted 20 Oct 2016 by Darren Welch

Sometimes you need to give your users a little information from your website. I have found Toastr to be really smooth and it looks nice too.

You can tell it what type of message it is & where to position the warning on your users screen:


  • success
  • info
  • warning
  • error
  • toast-top-right
  • toast-top-left
  • toast-top-center
  • toast-top-full-width
  • toast-bottom-right
  • toast-bottom-left
  • toast-bottom-center
  • toast-bottom-full-width


To use it you need to reference bootstrap css, jquery & the Toastr.js:


    <script src=""></script>
    <script src="/Assets/Toastr/toastr.min.js"></script>
    <script src="/Assets/Toastr/script.js"></script>
    <link href="/Assets/Toastr/toastr.min.css" rel="stylesheet" />


and then it's just a simple case of adding javascript to the page. I have added it to button clicks on the buttons at the top of the page. Here is an example of one of the buttons code:


<input type="button" id="btnMessage" value="Success" onclick="toastify('success', 'Great success!', 'Congratulations', 'toast-bottom-left', 'true');" />  


I have created a c# class (below) incase you need to call the code from within .Net code.


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;

namespace Toastr_example.App_Code
public class Toastr
/* 20161020*/
public void ShowToast(Page page, ToastType tType, string msg, string title = "",
ToastPosition position = ToastPosition.BottomRight, bool showCloseButton = true ) { string strType = ""; string strPosition = ""; switch (tType) { case ToastType.Success: strType = "success"; break; case ToastType.Info: strType = "info"; break; case ToastType.Warning: strType = "warning"; break; case ToastType.Err: strType = "error"; break; default: break; } switch (position) { case ToastPosition.TopRight: strPosition = "toast-top-right"; break; case ToastPosition.TopLeft: strPosition = "toast-top-left"; break; case ToastPosition.TopCenter: strPosition = "toast-top-center"; break; case ToastPosition.TopStretch: strPosition = "toast-top-full-width"; break; case ToastPosition.BottomRight: strPosition = "toast-bottom-right"; break; case ToastPosition.BottomLeft: strPosition = "toast-bottom-left"; break; case ToastPosition.BottomCenter: strPosition = "toast-bottom-center"; break; case ToastPosition.BottomStretch: strPosition = "toast-bottom-full-width"; break; default: break; } string script = string.Format("toastify('{0}', '{1}', '{2}', '{3}', '{4}');"
, strType, CleanStr(msg), CleanStr(title), strPosition,
showCloseButton.ToString().ToLower()); }
private string CleanStr(string str) { return str.Replace("'", "&#39;"); } public enum ToastPosition { TopRight, TopLeft, TopCenter, TopStretch, BottomRight, BottomLeft, BottomCenter, BottomStretch } public enum ToastType { Success, Info, Warning, Err } } }

Darren Welch


Darren Welch

  20 Oct 2016

Contact me online



Toastr.js javascript code programming

Related Content

Connect to SQl Server from command prompt

19 July 2016

Umbraco Backoffice default values

02 March 2016

Umbraco - RTE - Add blockquotes

6 Jan 17