Creating Nice Alerts with sweetAlert

By Aurelio De Rosa

When building JavaScript-driven websites we often have the need to provide feedback to our users to let them know if the action they have performed has been successful or not. In the early days of the web, developers used to create messages using the window.alert() function. While alert() works in practice and it’s also consistent across browsers, it’s not very flexible and, to be honest, its look and feel is terrible. Today there are several approaches adopted that range from modals to inline messages. In this article I’ll introduce you to sweetAlert, a library that acts as a replacement for the JavaScript’s alert() function.

What is sweetAlert?

As mentioned in the introduction sweetAlert is a replacement for JavaScript’s window.alert() function that shows very pretty modal windows. It’s a standalone library that has no dependencies, and it’s made from a JavaScript file plus a CSS file.

This library comes in three different flavors. The first is a library that you can use in any web project, the second is a fork that is specifically adapted to work with Bootstrap, and the third is a fork that you can use in your Android projects. This project is constantly under work as you can see from the fact that the last version was released just few days ago.

Now that you know what this library is all about, let’s see how you can use it in your website.

Getting Started with sweetAlert

To use sweetAlert in your projects you have to download it and include it in the pages where you intend to use this library. There are a few options to download the library: the first is by visiting its GitHub repository, while the second is through Bower. If you choose to use Bower, you have to run the command:

bower install sweetalert

Once downloaded, you can include the JavaScript file with the usual script element as you would do for any other JavaScript library:

<script src="path/to/sweet-alert.min.js"></script>

In addition you must include the CSS file as shown below:

<link rel="stylesheet" href="path/to/sweet-alert.css" />

Once done you’re ready to employ sweetAlert in your website. A minimal example of use is shown below:

sweetAlert('Congratulations!', 'Your message has been successfully sent', 'success');

Resulting in the following output:

I don’t know what you’re thinking, but I love the small animation!

As you have seen from the previous statement, the library operates through a method called sweetAlert. It accepts up to three parameters:

  • title (mandatory): A string representing the title of the alert shown
  • message (optional): An optional string representing the message shown beneath the title
  • type(optional): An optional string representing the type of message you want to show. Its value may be one of "success", "error", "warning", and "info".

The library also offers a nice shortcut to invoke the sweetAlert method called swal. So, the previous statement can be rewritten as follows:

swal('Congratulations!', 'Your message has been succesfully sent', 'success');

In addition to the parameters presented, the library offers a whole set of options that you can set through an object passed as the first parameter of the method. For example, the previous statement can be rewritten as such:

   title: 'Congratulations!',
   text: 'Your message has been succesfully sent',
   type: 'success'

Now that you know the basics of this library, let’s learn a bit more about its options.


The first option I want to cover allows you to change the text of the buttons shown. For example, if you want to change the text of the button for the success message from “OK” to “Yeah!”, you can set the value for an option called confirmButtonText. If you want to change the text of the button for the cancel button, you have to set the value of cancelButtonText. At this point the most observant of you should raise up the hand and say “I haven’t seen any cancel button so far, what are you talking about?” If you did, excellent!

The truth is that sweetAlert allows you to show a cancel message but you have to explicitly specify that you want it. You can do that by setting the option showCancelButton to true.

The following code takes advantage of these three options:

   title: 'Confirm',
   text: 'Are you sure to delete this message?',
   type: 'warning',
   showCancelButton: true,
   confirmButtonText: 'Yes, sir',
   cancelButtonText: 'Not at all'

This code results in the following:

In case you don’t like the colors of the confirm button you can also change it by setting a hash value for the confirmButtonColor option.

Another interesting option is that you can set that a message is displayed for a fixed amount of time and then is auto-closed. You can achieve this task by passing a number, representing the number of milliseconds after which the message is closed, to an option called timer.

The following code uses these other two options:

   title: 'Confirm',
   text: 'Are you sure to delete this message?',
   type: 'warning',
   showCancelButton: true,
   confirmButtonColor: '#987463',
   timer: 1500

It results in the following:


In this article I covered sweetAlert, a library meant as a replacement for JavaScript’s window.alert() function, that allows you to show very nice messages to your users. This library works on any type of device, so you can employ it in your responsive website too. I hope you like the library as much as I do, and that you’ll give it a chance in some of your projects.


For a Developer like me that suck with front-end stuff, this will come in handy.

Page bookmarked as I will be needing something like this for a project.


It looks nice. What about comparing it vs bootbox?? It seems bootbox is more complete project (and older of course)...


Looks great - although I am experiencing an issue when using in IE10 (Browser Mode IE10) where the alerts close immediately they are opened, excepting the timer. If I change to IE9 compatibility, it all works correctly again.
No problems at all in Chrome (latest), and I am unable to test with FireFox. Hope this helps.


Same issue with IE11 too, so not ready for production use yet.


Hi. It's possible that you're encountering this issue that has been fixed.


That appears to have fixed an issue with the timer but the main functionality doesn't work in IE11 (or IE10 from what others mention).


Thanks for IE fix. This looks great, I look forward to using it in the near future smile


The SweetAlert repo seems to be inactive. There's a bunch of Pull Requests without any replies, last merged pull request was on Nov 9, 2014.

I created sweetalert2 with HTML support in modal and some other options for customisation modal window - witdh, padding, etc.


thank you, very good script.
You also need to add functions php on the server without opening a new window.
For example:

            title: 'Are you sure?',
            text: 'You will not be able to recover this imaginary file!',
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!',
            cancelButtonText: 'No, cancel plx!',
            closeOnConfirm: false,
            closeOnCancel: false
        function(isConfirm) {
            if (isConfirm) {
                'Your file has been deleted.',
                window.location = 'delete_files_server.php'; 
            } else {
                'Your imaginary file is safe :)',

i wondering if i can echo out sweet alert script?
this is my code
echo "< script> swal("heres a message")< /script>";


It will work - but only if you change the quotes so the echo and the message are not conflicting.



how to link after clicking OK?

function(){document.location.href = 'http://...'});

Hi AurelioDeRosa,

Help me make cookies after you click to close for 24 hours.

This works on alert confirm.

if (getCookie("user_canceled") != "YES") {
    if (confirm("Selection")) {
        window.location.href = "http://..."   
    } else {
        setCookie("user_canceled", "YES", 10);

function setCookie (name, value, days) {
// code

function getCookie(name) {
// code

How to do for sweetAlert?


Users! Forum CLOSED sweetAlert



Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in JavaScript, once a week, for free.