I was experimenting with adding a button that triggers a popup message to my website. I followed a coding tutorial using jQuery and CSS, which looks like this:
Javascript :
!function (v) { v.fn.floatingWhatsApp = function (e) {...} }(jQuery);
CSS :
.floating-wpp{position:fixed;bottom:15px;left:15px;font-size:14px;transition:bottom .2s}...
HTML : including scripts and body placement
<script type="text/javascript" src="catalog/view/javascript/jquery/whatsapp/floating-wpp.min.js"></script>
<link rel="stylesheet" href="catalog/view/javascript/jquery/whatsapp/floating-wpp.min.css">
<body>
<div id="myDiv"></div>
</body>
<script type="text/javascript">
$(function () {
$('#myDiv').floatingWhatsApp({
phone: '12345678910',
popupMessage: 'Helo, how can we help you?',
message: "",
showPopup: true,
showOnIE: false,
headerTitle: 'Whatsapp Chat',
headerColor: '#128C7E',
backgroundColor: '#25D366',
buttonImage: '<img src="catalog/view/javascript/jquery/whatsapp/whatsapp.svg" />'
});
});
</script>
Despite following the tutorial correctly, I encountered an issue with positioning the button and popup message on the bottom right of my website. Additionally, I struggled with making sure the elements appear above other content on the webpage.
The difficulties I faced include typing in the chat window and closing the popup:
https://i.sstatic.net/GRmq6.png
If anyone has expertise in CSS and jQuery, your assistance would be greatly appreciated. Thank you for your support!