Display AOSP like custom snackbar notifcations in your web html/js project.

The following steps are to be followed for each html document of yours in which you want to display message as bottom snackbar.

Steps:

• Include snackbar.css in your html document in head section.
• Include the snackbar.js in your html document in head section, before you include any other script of yours.
• Copy the code from snackbar.html and paste it at the bottom of your body tag but before closing it.
• Call the methods defined in the snackbar.js script from your associated scripts to make snackbar work.

You can use index.html as an example on how the web-snackbar works. Checkout this working page at sample example.

Try this in your website projects.