Membuat Floating WA Button Secara Manual

<div class="floating_wa">
<a href="https://wa.me/+6281234567890" target="_blank" rel="noopener">
  <img src="/wp-content/uploads/2024/03/WhatsApp_icon.png" width="30px">
  Chat via WhatsApp
</a><div class="close_wa"></div>
</div>

.floating_wa {
    background: #f2c862;
    border:none;
    border-radius:12px;
    display:flex;
    align-items:center;
    gap:10px;
    color: #1f2c5d;
    font-weight:600;
    padding:10px 20px 10px 10px;
    position:fixed;
    bottom:20px;
    right:20px;
 }

.floating_wa img {
	margin-bottom:-10px;
}

 .floating_wa a:hover {
    text-decoration:underline;
  }

.close_wa {
	position:absolute;
	right:-5px;
	top:-5px;
	width:20px;
	height:20px;
	background:url(/wp-content/uploads/2024/03/close_button_bg_black.svg);
	background-repeat:no-repeat;
	content:"";
}

.close_wa:hover {
	opacity:.7;
	cursor:pointer;
}

/*I want smaller font size in mobile devices*/
@media (max-width:480px) {
	.floating_wa {
		font-size:13px;
		right:10px;
		padding:6px;
		gap:5px;
	}
}

jQuery(document).ready(function(){
  jQuery(".close_wa").click(function(){
    jQuery(".floating_wa").hide();
  });
});