<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="whatsapp-box position-absolute border rounded">
<div class="header text-white p-2 d-flex align-items-center">
<div>
<img class="rounded-circle" src="data:image/png;base64,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" />
</div>
<div class="ml-2">
<div class="font-weight-bold">Name</div>
<div class="small text-light">Status</div>
</div>
</div>
<div class="body">
<div class="position-relative">
<div class="text position-relative">
Halo<br/>How do you do?
</div>
<div class="bubble position-relative pb-3">
<svg class="_8hnr" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="228.1px" height="66.2px" viewBox="0 0 228.1 66.2" style="enable-background:new 0 0 228.1 66.2;"><path fill="#ffffff" d="M207.8,0H33.7c-0.6,0-1.2,0-1.9,0.1c-0.2,0-0.3-0.1-0.5-0.1h-29c-1.9,0-3,2.1-1.8,3.6l13.1,17.1V46 c0,11.2,9.1,20.2,20.2,20.2h174.1c11.2,0,20.2-9.1,20.2-20.2V20.2C228.1,9.1,219,0,207.8,0z"></path></svg>
</div>
</div>
</div>
<div class="footer"></div>
</div>
.whatsapp-box {
bottom: 30px;
right: 30px;
width: 300px;
min-height: 120px;
}
.whatsapp-box .header {
background: #1ebea5;
overflow: hidden;
}
.whatsapp-box .header img {
width: 40px;
}
.body {
background: cyan;
}
.text {
top: 55px;
margin-left: 40px;
z-index: 2;
}
.bubble {
z-index: 1;
margin-left: 10px;
}
