$('button').on('click', function(){ swal('Any fool can use a computer')});
$('button').on('click', function(){ swal( 'The Internet?', 'That thing is still around?', 'question' )});
$('button').on('click', function(){ swal( 'Good job!', 'You clicked the button!', 'success' )});
$('button').on('click', function(){ swal({ title: 'Auto close alert!', text: 'I will close in 2 seconds.', timer: 2000 })});
$('button').on('click', function(){ swal({ title: '<i>HTML</i><u>example</u>', type: 'info', html: 'You can use <b>bold text</b>, ' + '<a href="//github.com">links</a>' + 'and other HTML tags', showCloseButton: true, showCancelButton: true, confirmButtonText: '<i class="fa fa-thumbs-up"></i>Great!', cancelButtonText: '<i class="fa fa-thumbs-down"></i>' })});
$('button').on('click', function(){ swal({ title: 'jQuery HTML example', html: $('<div>') .addClass('some-class') .text('jQuery is everywhere.') })});
$('button').on('click', function(){ swal({ title: 'Are you sure?', text: "You won't be able to revert this!", type: 'warning', showCancelButton: true, confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', confirmButtonText: 'Yes, delete it!' }).then(function() { swal( 'Deleted!', 'Your file has been deleted.', 'success' ); })});
$('button').on('click', function(){ swal({ title: 'Are you sure?', text: "You won't be able to revert this!", type: 'warning', showCancelButton: true, confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', confirmButtonText: 'Yes, delete it!', cancelButtonText: 'No, cancel!', confirmButtonClass: 'btn btn-primary', cancelButtonClass: 'btn btn-secondary', buttonsStyling: false }).then(function() { swal( 'Deleted!', 'Your file has been deleted.', 'success' ); }, function(dismiss) { // dismiss can be 'cancel', 'overlay', // 'close', and 'timer' if (dismiss === 'cancel') { swal( 'Cancelled', 'Your imaginary file is safe :)', 'error' ); } })});
$('button').on('click', function(){ swal({ title: 'Sweet!', text: 'Modal with a custom image.', imageUrl: 'https://unsplash.it/400/200', imageWidth: 400, imageHeight: 200, animation: false })});
Documentation
Since SweetAlertexecutes by a Javascript function, to load its dependencies you have to attach data-provide="sweetalert"
to your document. Best place would be the first <script>tag.