Bootstrap

How to code a chat bubble in bootstrap.(bugs fixed) hopefully.

        
        
.bubble{
  position:fixed;
  width:60px;
  height:60px;
  bottom:40px;
  right:40px;
  background-color:#0C9;
  color:#FFF;
  border-radius:50px;
  text-align:center;
  box-shadow: 2px 2px 3px #999;
}

optionally...

 
  .bubble-icon-sizeL {
   font-size: 200%;
}

and the html
<button class="bubble" id="bubble"> <img src="/chat3.png" alt="Avatar" class="image" width="32"> </button>
and the js...

$( "#button" ).click(function() {
$('#button').hide();

             
let height1=$(window).height()
let left1=$(window).width()-220;
let width1=$(window).width()*.25
url ="https://appliedscience.com/chat"
$('#button').show();

window.open(url, "ChatModAI","width="+width1+", left="+left1+",height=" +height1)

        
});