DocsAllOver Toast Notification with Sound in Bootstrap 4 Snippets

Toast Notification with Sound in Bootstrap 4

Oct. 10, 2024

Bootstrap, Bootstrap 4, Ecommerce, Toast Notification, Notification

Full Screen

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link href="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1557232134/toasty.css" rel="stylesheet" />

  </head>
  <body>
    

<div class="page-content page-container" id="page-content">
    <div class="padding">
        <div class="row container d-flex justify-content-center">
            <button type="button" id="successtoast" class="btn btn-success btn-icon-text mt-2"> <i class="fa fa-check btn-icon-prepend"></i>Toast Notification success</button>
            <button type="button" id="infotoast" class="btn btn-info btn-icon-text mt-2"> <i class="fa fa-check btn-icon-prepend"></i>Toast Notification info</button>
            <button type="button" id="warningtoast" class="btn btn-warning btn-icon-text mt-2"> <i class="fa fa-check btn-icon-prepend"></i>Toast Notification warning</button>
            <button type="button" id="errortoast" class="btn btn-primary btn-icon-text mt-2"> <i class="fa fa-check btn-icon-prepend"></i>Toast Notification error</button>
        </div>
    </div>
</div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1557232134/toasty.js"></script>
    
  </body>
</html>

body {
    background: #eee
}

.btn {
    margin-right: 0.5rem !important
}

.btn {
    font-size: 0.875rem;
    line-height: 1;
    font-weight: 400;
    padding: .7rem 1.5rem;
    border-radius: 0.1275rem
}

.container {
    margin: 100px 100px
}

.toast {
    transition: 0.32s all ease-in-out
}

.toast-container--fade {
    right: 0;
    bottom: 0
}

.toast-container--fade .toast-wrapper {
    display: inline-block
}

.toast.fade-init {
    opacity: 0
}

.toast.fade-show {
    opacity: 1
}

.toast.fade-hide {
    opacity: 0
}

$(document).ready(function () {

    //success toast



    var options = {
        autoClose: true,
        progressBar: true,
        enableSounds: true,
        sounds: {

            info: "https://res.cloudinary.com/dxfq3iotg/video/upload/v1557233294/info.mp3",
            // path to sound for successfull message:
            success: "https://res.cloudinary.com/dxfq3iotg/video/upload/v1557233524/success.mp3",
            // path to sound for warn message:
            warning: "https://res.cloudinary.com/dxfq3iotg/video/upload/v1557233563/warning.mp3",
            // path to sound for error message:
            error: "https://res.cloudinary.com/dxfq3iotg/video/upload/v1557233574/error.mp3",
        },
    };

    var toast = new Toasty(options);
    toast.configure(options);





    $('#successtoast').click(function () {

        toast.success("This toast notification with sound");

    });

    $('#infotoast').click(function () {

        toast.info("This toast notification with sound");

    });

    $('#warningtoast').click(function () {

        toast.warning("This toast notification with sound");

    });

    $('#errortoast').click(function () {

        toast.error("This toast notification with sound");

    });

});

This Bootstrap 4 snippet provides a visually appealing and functional toast notification component with sound effects. Toast notifications are non-modal, temporary messages that appear on the screen to provide feedback or alerts to the user. The sound effect adds an extra layer of engagement, drawing the user's attention to the notification.

Key Features:

Customizable Appearance: Easily modify the appearance of the toast notification using Bootstrap's CSS classes to match your website's design and branding.
Sound Effects: Incorporate sound effects to enhance the user experience and provide auditory feedback.
Multiple Notification Types: Support different notification types, such as success, info, warning, and error, to convey various messages effectively.
Dismissable Notifications: Allow users to dismiss the notification by clicking on it or after a specified duration.
Responsive Design: The toast notification adapts to different screen sizes, ensuring a consistent appearance and behavior across devices.

Implementation:

Include Bootstrap 4: Ensure you have Bootstrap 4 installed and configured in your project.
Create the HTML Structure: Set up the basic HTML structure for the toast notification, including the container and notification content.
Apply Bootstrap Classes: Use Bootstrap's CSS classes to style the toast notification, such as toast, toast-header, toast-body, and toast-success, toast-info, toast-warning, or toast-danger for different types.
Add JavaScript for Functionality: Implement JavaScript code to handle the display, dismissal, and sound effects of the toast notification. You can use JavaScript libraries or native JavaScript for this purpose.

Latest Snippets

View All