Creating Nice Alerts with sweetAlert

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:

swal({
   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.

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:

swal({
   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:

swal({
   title: 'Confirm',
   text: 'Are you sure to delete this message?',
   type: 'warning',
   showCancelButton: true,
   confirmButtonColor: '#987463',
   timer: 1500
});

It results in the following:

Conclusion

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.