Cara Membuat Widget Chat Whatsapp Sticky dengan SVG

Saya sering menjumpai widget chat whatsapp pada blog e-commerce untuk memudahkan pembeli melakukan chat langsung ke whatsapp penjual.

Namun, banyak diantaranya yang menggunakan format png pada icon whatsapp yang notabene sedikit memberikan beban pada blog. 

Oleh karena itu, pada kesempatan kali ini saya akan membagikan cara untuk membuat widget chat whatsapp dengan format SVG sehingga widget ini tidak mempengaruhi load blog anda. (Namun, sebelumnya pastikan terlebih dahulu template blog anda telah support SVG ya..)

Cara Membuat Widget Chat Whatsapp Sticky

Step 1. Silakan masuk pada menu tata letak dashbor blogger anda.

Step 2. Silakan tambahkan gadget HTML/Javascript (letaknya terserah karena nanti scriptnya otomatis akan berada di pojok kanan bawah / kiri blog anda)

Step 3. Copy semua code dibawah ini dan tempelkan ke gadget HTML/Javascript.

<a class='fixed-whatsapp' href='https://api.whatsapp.com/send?phone=628xxxxxxxxxxx' rel='nofollow noopener' target='_blank' title='Whatsapp'>
<svg viewBox='0 0 24 24' width='34' height='34'>
<path fill='#ffffff' d='M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z'/>
</svg>
</a>
<style>
.fixed-whatsapp {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  z-index: 9999;
  text-align: center;
}

.fixed-whatsapp:before {
  content: "";
  width: 50px;
  height: 50px;
  background-color: #00C853;
  position: absolute;
  border-radius: 100%;
  box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24);
  z-index: 1;
  top: 0;
  left: 0;
}

.fixed-whatsapp svg {
  vertical-align: middle;
  z-index: 2;
  position: relative;
}
.fixed-whatsapp:after {
  content: "Informasi lebih lanjut, hubungi kami..";
  width: 100px;
  padding: 5px 10px;
  position: absolute;
  bottom: 100%;
  margin-bottom: 10px;
  right: -150px;
  text-align: right;
  color: #555;
  border: 1px solid #dedede;
  background: rgba(255,255,255,.5);
  border-radius: 4px;
  opacity: 0;
  transition:all .4s ease-in-out;
  font-size: 90%;
  line-height: 1.1;
}

.fixed-whatsapp:hover:after {
  opacity: 1;
  right: 0;
}
</style>

Step 4. Silakan ubah yang saya tandai dengan data milik anda. Untuk left / right silakan sesuaikan dengan selera. (apabila website anda memiliki tombol back to top) saya rekomendasikan untuk berada di sisi lawannya agar tidak saling menutupi.

Gampang bukan?

Sekian yang bisa saya bagikan kali ini seputar widget chat whatsapp sticky dengan SVG. Semoga bermanfaat untuk anda.