Try It Editor

Code

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Plugin With Options & Defaults</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>#box{padding:10px;border:1px solid #ccc;width:260px}</style>
</head>
<body>
  <div id="box">Toast area</div>
  <button id="run">Show toast</button>
  <script>
    (function($){
      var defaults = { text: "Saved!", bg: "#4caf50", color: "#fff", duration: 800 };
      $.fn.toast = function(opts){
        var cfg = $.extend({}, defaults, opts);
        return this.each(function(){
          var $t = $(this);
          var $msg = $("<div/>").text(cfg.text).css({
            background: cfg.bg, color: cfg.color, padding:"6px 10px", marginTop:"6px", borderRadius:"4px", display:"inline-block"
          }).hide();
          $t.append($msg);
          $msg.fadeIn(150).delay(cfg.duration).fadeOut(300, function(){ $(this).remove(); });
        });
      };
    })(jQuery);

$("#run").on("click", function(){
      $("#box").toast({ text: "Profile updated", bg:"#2196f3" });
    });
  </script>
</body>
</html>

Output