Sticky Chat Button (WhatsApp, Telegram, Messenger, SMS Dan E-mail)

Sticky Chat Button merupakan widget atau tombol chat sosial media seperti whatsapp, telegram, messenger, sms dan chat via e-mail yang di rancang khusus untuk website dan blog. Desain yang simple dan mobile friendly menjadikan widget chat buttons ini sangat cocok untuk diterapkan di web anda.

Sticky Chat Button For Web / Blog

Popular Chat Buttons

  1. WhatsApp,
  2. Telegram,
  3. Facebook Messenger,
  4. SMS (Short Message Service), dan
  5. E-mail Message.
[ads id="ads1"] Baiklah, saya tidak ingin berlama-lama untuk menjelaskan ini karena saya akan langsung mengajak anda ke tutorial membuat/memasang widget chat button (tombol chat sosial media) di blog dengan gaya sticky (fixed).

Memasang Tombol Chat Sosial Media Di Blog

  1. Pilih salah satu social chat button,
  2. Install kode html chat button di atas kode penutup body (</body>),
  3. Tambahkan kode css sticky chat button diantara tag <head> dan </head>,
  4. Untuk platfom blogger install/pasang kode css sticky chat button di atas kode ]]></b:skin> tanpa tag <style>,
  5. Kemudian ganti URL dengan short link chat sosial media anda
  6. Terakhir klik Save untuk menyelesaikan.
Catatan: Perhatikan ilustrasi/contoh pemasangan kode html dan kode css sticky chat button pada cuplikan kode di bawah ini agar tidak salah.

Contoh Memasang Widget Sticky Chat Button

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.sticky-chat-button{
  position: fixed;
  background-color: #3367d6;
  border-radius:40px;
  bottom: 80px;
  right: 15px;
  height: 40px;
  width: 40px;
  overflow: hidden;
}
.sticky-chat-button a{
  display:inline-block;
  position: relative;
  text-align:center
  height: 25px;
  width: 25px;
  padding: 8px;
}
</style>
</head>
<body>


...



<div class="sticky-chat-button">
<!-- social media chat button  start -->
 <a href="URL" title="Chat Button">
  <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 512 512">
   <path fill="#fff" d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 9.8 11.2 15.5 19.1 9.7L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z"/>
  </svg>Chat Me!</a>
<!-- social media chat button end -->
</div>
</body>
</html>

Kode HTML Chat Button

<div class="sticky-chat-button">
<!-- default chat button  start -->
 <a class="default-chat-button" href="URL" title="Chat Button">
  <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 512 512">
   <path fill="#fff" d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 9.8 11.2 15.5 19.1 9.7L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z"/>
  </svg></a>
<!-- default chat button end -->
</div>

CSS Sticky Chat Button

<style>
.sticky-chat-button{
  position: fixed;
  background-color: #3367d6; //replace this color
  border-radius:40px;
  bottom: 80px;
  right: 15px;
  height: 40px;
  width: 40px;
  overflow: hidden;
}
.sticky-chat-button a{
  display:inline-block;
  position: relative;
  text-align:center
  height: 25px;
  width: 25px;
  padding: 8px;
}
</style>
Customize: Ganti warna background tombol chat (background-color: #3367d6;) dengan id color yang yang sesuai dengan sosial chat button yang anda pilih, misalnya: whatsapp color #25d366, telegram color #0088cc, messenger color #006aff, sms color #3367d6 dan e-mail color #fc4f08 dan,

Khusus untuk telegram chat button ganti css padding: 8px menjadi 6px agar icon telegram lebih center.

Gunakan salah satu kode html social chat button di bawah ini untuk membuat tombol chat di blog anda.

WhatsApp Chat Button (HTML)

<div class="sticky-chat-button">
<!-- whatsapp chat button  start -->
 <a class="whatsapp-chat-button" href="https://wa.me/62812xxxxxxxx" title="Chat Button">
  <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 448 512">
   <path fill="#fff" d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"/>
  </svg></a>
<!-- whatsapp chat button end -->
</div>

Telegram Chat Button (HTML)

<div class="sticky-chat-button">
<!-- telegram chat button  start -->
 <a class="telegram-chat-button" href="https://t.me/username" title="Chat Button">
  <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 32 32">
   <path fill="#fff" d="M29.919 6.163l-4.225 19.925c-0.319 1.406-1.15 1.756-2.331 1.094l-6.438-4.744-3.106 2.988c-0.344 0.344-0.631 0.631-1.294 0.631l0.463-6.556 11.931-10.781c0.519-0.462-0.113-0.719-0.806-0.256l-14.75 9.288-6.35-1.988c-1.381-0.431-1.406-1.381 0.288-2.044l24.837-9.569c1.15-0.431 2.156 0.256 1.781 2.013z"/>
  </svg></a>
<!-- telegram chat button end -->
</div>

Messenger Chat Button (HTML)

<div class="sticky-chat-button">
<!-- messenger chat button  start -->
 <a class="messenger-chat-button" href="https://m.me/username" title="Chat Button">
  <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 32 32">
   <path fill="#fff" d="M0 15.521c0-8.922 6.984-15.521 16-15.521s16 6.599 16 15.521c0 8.917-6.984 15.521-16 15.521-1.615 0-3.172-0.214-4.625-0.615-0.286-0.078-0.589-0.052-0.854 0.068l-3.188 1.401c-0.833 0.37-1.776-0.224-1.802-1.135l-0.094-2.854c-0.010-0.349-0.167-0.672-0.422-0.906-3.245-2.927-5.073-7.109-5.016-11.479zM11.094 12.599l-4.693 7.469c-0.469 0.703 0.427 1.521 1.094 1l5.052-3.828c0.349-0.266 0.802-0.266 1.161 0l3.729 2.802c1.125 0.839 2.724 0.531 3.469-0.641l4.693-7.469c0.469-0.703-0.427-1.505-1.094-1l-5.052 3.828c-0.333 0.266-0.802 0.266-1.146 0l-3.734-2.802c-1.125-0.849-2.729-0.552-3.479 0.641z"/>
  </svg></a>
<!-- messenger chat button end -->
</div>

SMS Chat Button (HTML)

<div class="sticky-chat-button">
<!-- sms chat button  start -->
 <a class="sms-chat-button" href="sms:0812xxxxxxxx" title="Chat Button">
  <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 512 512">
   <path fill="#fff" d="M464,48H48A16,16,0,0,0,32,64V352a16,16,0,0,0,16,16h80V480h8L248,368H464a16,16,0,0,0,16-16V64A16,16,0,0,0,464,48ZM184,272H144V232h40Zm96,0H240V232h40Zm96,0H336V232h40Z"/>
  </svg></a>
<!-- sms chat button end -->
</div>

E-mail Message (HTML)

<div class="sticky-chat-button">
<!-- email chat button  start -->
 <a class="email-chat-button" href="mailto:yourmail@gmail.com" title="Chat Button">
  <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24">
   <path fill="#fff" d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
  </svg></a>
<!-- email chat button end -->
</div>
Nah, demikian saja tutorial membuat atau memasang tombol chat di blog, saya harap widget sticky chat button ini dapat membantu anda terhubung dengan audiens yang lebih banyak. Selemat mencoba dan sampai jumpa kembali di tutorial-tuorial menarik selanjutnya seputar blogging dan web design. [Lihat Demo]
Lebih baru Lebih lama
Close