Tombol WhatsApp & Telepon Untuk Semua Website, Toko Online, UMKM

Ditulis Salsabila Rabu, 03 Juni 2026

📱 Template Tombol WhatsApp & Telepon Modern 2026

Template ini dapat digunakan di Blogspot, WordPress, Landing Page, Website HTML, toko online, UMKM, dan berbagai website lainnya.

🎯 Fitur Template

✅ Tombol WhatsApp Mengambang (Floating)
✅ Tombol Telepon Langsung
✅ Popup Status Online
✅ Desain Modern 2026
✅ Responsif untuk HP dan Laptop
✅ Ringan dan Mudah Dipasang

🔰 Panduan Untuk Pemula

Klik tombol COPY KODE.
Cari tulisan 628XXXXXXXXXX.
Ganti dengan nomor WhatsApp Anda sendiri.
Tempelkan ke Blogger, WordPress, atau website HTML.
Simpan dan selesai.


<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>WhatsApp Button 2026 Modern</title>

<style>
body{
margin:0;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial;
background:#f9fafb;
}

.floating-wrap{
position:fixed;
right:20px;
bottom:20px;
display:flex;
flex-direction:column;
gap:10px;
z-index:999999;
}

.wa-btn{
width:60px;
height:60px;
background:rgba(37,211,102,0.95);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:26px;
color:white;
text-decoration:none;
box-shadow:0 10px 25px rgba(0,0,0,0.15);
animation:pulse 2s infinite;
}

.call-btn{
width:60px;
height:60px;
background:rgba(255,59,48,0.95);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:24px;
color:white;
text-decoration:none;
box-shadow:0 10px 25px rgba(0,0,0,0.15);
animation:blink 1.8s infinite;
}

.popup{
position:fixed;
right:20px;
bottom:150px;
background:#ffffff;
padding:10px 14px;
border-radius:12px;
font-size:13px;
box-shadow:0 8px 20px rgba(0,0,0,0.1);
}

.popup b{
color:#25D366;
}

@keyframes pulse{
0%{transform:scale(1);}
50%{transform:scale(1.12);}
100%{transform:scale(1);}
}

@keyframes blink{
0%{opacity:1;}
50%{opacity:0.6;}
100%{opacity:1;}
}
</style>

</head>

<body>

<div class="popup">
💬 <b>Online</b> • Klik untuk chat cepat
</div>

<div class="floating-wrap">

<a href="https://wa.me/628XXXXXXXXXX?text=Halo%20Admin%20Saya%20Mau%20Tanya"
class="wa-btn"
target="_blank">
💬
</a>

<a href="tel:+628XXXXXXXXXX"
class="call-btn">
📞
</a>

</div>

</body>
</html>

⚙️ Untuk Pengguna Menengah

Ubah pesan WhatsApp sesuai kebutuhan.
Pindahkan posisi tombol dengan mengganti right menjadi left.
Sesuaikan warna dengan tema website.

🚀 Untuk Pengguna Mahir

Gabungkan dengan landing page.
Tambahkan popup otomatis.
Hubungkan dengan chatbot AI.
Pasang tracking Google Analytics.

🏆 Kesimpulan

Template ini cocok untuk pemula hingga mahir. Cukup ganti nomor, copy, paste, dan simpan. Tombol WhatsApp dan Telepon akan langsung aktif di website Anda.