Basic message
$('button').on('click', function(){  swal('Any fool can use a computer')});
A title with a text under
$('button').on('click', function(){  swal(    'The Internet?',    'That thing is still around?',    'question'  )});
A success message!
$('button').on('click', function(){  swal(    'Good job!',    'You clicked the button!',    'success'  )});
A message with auto close timer
$('button').on('click', function(){  swal({    title: 'Auto close alert!',    text: 'I will close in 2 seconds.',    timer: 2000  })});
Custom HTML description and buttons
$('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>'  })});
jQuery HTML
$('button').on('click', function(){  swal({    title: 'jQuery HTML example',    html: $('<div>')      .addClass('some-class')      .text('jQuery is everywhere.')  })});
A warning message, with a function attached to the "Confirm"-button...
$('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'    );  })});
... and by passing a parameter, you can execute something else for "Cancel".
$('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'      );    }  })});
A message with a custom image and CSS animation disabled
$('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.