Berikut adalah contoh script HTML dan JavaScript untuk membuat widget pop-up chat ke WhatsApp di Blogspot atau di website
!-- WhatsApp Chat Widget --
style
.whatsapp-chat-widget {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
}
.whatsapp-chat-button {
background-color: #25D366;
color: white;
border: none;
border-radius: 50px;
padding: 15px;
font-size: 18px;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
cursor: pointer;
}
.whatsapp-chat-popup {
display: none;
position: fixed;
bottom: 80px;
right: 20px;
width: 300px;
background-color: white;
border-radius: 10px;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
}
.whatsapp-chat-popup-header {
background-color: #25D366;
color: white;
padding: 10px;
border-radius: 10px 10px 0 0;
text-align: center;
font-weight: bold;
}
.whatsapp-chat-popup-body {
padding: 10px;
}
.whatsapp-chat-popup-body p {
margin: 10px 0;
}
.whatsapp-chat-popup-footer {
padding: 10px;
text-align: center;
}
.whatsapp-chat-popup-footer a {
background-color: #25D366;
color: white;
padding: 10px;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
}
</style>
<div class="whatsapp-chat-widget">
<button class="whatsapp-chat-button" onclick="toggleWhatsAppChat()">Chat with us!</button>
<div class="whatsapp-chat-popup" id="whatsappChatPopup">
<div class="whatsapp-chat-popup-header">WhatsApp Chat</div>
<div class="whatsapp-chat-popup-body">
<p>Hi there! How can we help you?</p>
</div>
<div class="whatsapp-chat-popup-footer">
<a href="https://wa.me/1234567890" target="_blank">Start Chat</a>
</div>
</div>
</div>
<script>
function toggleWhatsAppChat() {
var popup = document.getElementById('whatsappChatPopup');
if (popup.style.display === 'none' || popup.style.display === '') {
popup.style.display = 'block';
} else {
popup.style.display = 'none';
}
}
/script
Cara Menggunakan:
Masuk ke akun Blogspot Anda dan buka blog yang ingin Anda tambahkan widget.
Pilih "Tata Letak" dari menu di sebelah kiri.
Klik "Tambah Gadget" di tempat yang Anda inginkan widget muncul.
Pilih "HTML/Javascript" dari daftar gadget.
Salin dan tempel kode di atas ke dalam konten gadget.
Simpan perubahan dan lihat blog Anda untuk memastikan widget muncul dengan benar.
Keterangan:
Ubah 1234567890 pada URL https://wa.me/1234567890 dengan nomor WhatsApp yang ingin dituju.
Anda dapat menyesuaikan gaya dan teks sesuai kebutuhan Anda.
Posting Komentar untuk "Berikut adalah contoh script HTML dan JavaScript untuk membuat widget pop-up chat ke WhatsApp di Blogspot atau di website"