Link wa.me Dan Tombol Chat WhatsApp

Link wa.me adalah url navigasi panggilan dan pesan whatsapps melalui laman web. Meskipun link wa.me tidak masuk dalam ulasan MDN di artikel navigator metode atau navigator.registerprotocolhandler(), wa.me juga merupakan link navigasi yang berbasis protokol http/s.

Wa.me Link Navigasi Panggilan Dan Chat WhatsApp
Perlu diketahui juga bahwa wa.me adalah versi short link dari https://api.whatsapp.com/send/?phone=number. Jadi untuk membuat navigasi panggilan dan message whatsapp di website/blog dapat menggunakan kedua type link WA yaitu:

Type 1

https://wa.me/nomor hp

Contoh:

https://wa.me/6281261043687
[ads id="ads1"]

Type 2

https://api.whatsapp.com/send/?phone=number

Contoh:

https://api.whatsapp.com/send/?phone=6281261043687

//Dengan teks (Chat Message)

https://api.whatsapp.com/send/?phone=6281261043687&text=Hi can you help me?

Di HTML

<a href="https://wa.me/6281261043687" title="Hubungi Saya" rel="noopener" target="_blank">Hubungi Via WhatsApp</a>

Output:

Hubungi Via WhatsApp

Dengan Teks Otomatis

<a href="https://api.whatsapp.com/send/?phone=6281261043687&text=Isi Dengan Teks" title="Hubungi Saya" rel="noopener" target="_blank">Chat Ke WhatsApp</a>

Contoh:

<a href="https://api.whatsapp.com/send/?phone=6281261043687&text=Saya ingin memesan produk ini" title="Hubungi Saya" rel="noopener" target="_blank">Chat Ke WhatsApp</a>

Output:

Chat Ke WhatsApp

Catatan: Ganti nomor whatsapp dengan nomor whatsapp anda dan sesuaikan teks pada link whatsapp dengan bisnis atau layanan di website anda.

Fungsi Link Wa.me (WhatsApp)

Seperti yang telah dijelaskan diatas, fungsi link wa.me whatsapp adalah untuk membuat navigasi berupa elemen interaktif misalnya tombol chat whatsapp di situs web maupun blog.

Untuk demonya silahkan klik link "hubungi via whatsapp" melalui perangkat anda (smartphone ataupun komputer). Kinerja yang lebih baik akan terlihat jika anda menguji link chat/call whatsapp melalui smartphone.

Membuat Tombol Chat WhatsApp Di Blog

  1. Pilih salah satu kode html link chat whatsapp di atas.
  2. Tambahkan class baru tag <a> misalnya "tombol-whatsapp", dan
  3. Tambahkan juga atribut type="button" pada link chat whatsapp.
  4. Terakhir tambahkan gaya pada tombol chat whatsapp dengan css dibawah ini:

Kode HTML

<a class="tombol-whatsapp" type="button" href="https://wa.me/6281261043687" title="Hubungi Saya" rel="noopener" target="_blank">Chat Ke WhatsApp</a>

Kode CSS

<style type="text/css">

.tombol-whatsapp{

font-size:17px;

padding: 10px 30px;

cursor:pointer;

color:#fff!important;

font-weight:bold;

border: 0;border-radius:3px;

background:#2ecc71;

box-shadow:0 5px 1px #27ae60;

}

.tombol-whatsapp:hover{

background: #27ae60;

box-shadow: 0 5px 1px #145b32;

}

.tombol-whatsapp:active{

border-top: 5px solid white;

box-shadow: none;

}</style>

Output

Chat Ke WhatsApp
Selain link chat/call whatsapp, saya juga ingin merekomendasikan link navigator.registerprotocolhandler() laninya yang munkin dibutuhkan di website/blog anda. Secara fungsi masih sama dengan link chat/call whatsapp yang saya jelaskan diatas, tetapi saya pikir akan lebih baik jika layanan/bisnis anda memiliki banyak cara untuk terhubung dengan konsumen.

Baca Juga: Mailto Link
Baca Juga: Link Telephone

Sekarang saatnya untuk anda mencoba dan menggunakan link chat/call whatsapp di website anda, kreasikan link chat/call whatsapp dengan tombol dan icon agar lebih menarik. Saya harap artikel ini dapat membantu dalam membuat lebih banyak navigasi kontak di website/blog anda.

Komentar

Posting Komentar

Postingan populer dari blog ini

Cara Mengatasi Render Blocking Resources Dari Template Blogger

Gambar
Cara Mengatasi Render-blocking resources -  Sedikitnya ada dua jenis resources pada template blogger yang menyebabkan bloking first paint pada halaman blog. Yang pertama resources yang berasal dari platform blogger (resources default) yang biasa kita sebut dengan bundle css blogger dan resources pihak ketiga (3rd party) seperti bundle css fontawesome dan library javascript. Kedua jenis resources (bundle css/js) tersebut sebenarnya bukan hal buruk untuk situs blog, kita hanya perlu memuatnya secara tidak sinkron (asynchron) jika memungkinkan, Dan khusus untuk bundle css/js bawaan blogger langkah terbaik saat ini untuk mengatasinya adalah adalah dengan menonaktifka-nya. Karena sangat tidak mungkin untuk memodifikasi kode tersebut. Dampak Negatif Render-Blocking Resources [ads id="ads1"] Yang paling nyata dampak negatif render-blocking resources adalah (bloking first paint) yaitu ketika browser memuat halaman blog yang pertama kali terlihat adalah layar putih, di butuhkan waktu
Baca selengkapnya

Cara Mengatasi URL Yang Dikecualikan (Discovered-Currently Not Indexed Status)

Gambar
Tahukah kamu apa itu " Discovered currently not indexed " dengan status " Excluded "? Discovered currently not indexed maksudnya adalah halaman (url) sudah ditemukan oleh google tetapi belum di-crawl, sedangkan status excluded adalah status url yang masuk dalam ketegori pengecualian atau di kecualikan. Biasanya halaman ( url ) yang dikecualikan juga tidak diindeks oleh google karena menurut google halaman (url) merupakan duplikat dari halaman yang diindeks, atau diblokir dari pengindeksan oleh beberapa mekanisme di situs web itu sendiri. Jika tag canonical url di terapkan dengan benar beberapa url atau halaman di situs web akan dikecualikan oleh crawler google, biasanya halaman yang dikecualikan merupakan halaman (url) yang memang tidak penting untuk diindeks seperi url ?m=1, ?m=0 dan /search. Pengecualian pada yang url seperti itu baik untuk situs web, dengan begitu url (halaman) duplikat akan terjaring kedalam keranjang pengecualian di search console. [ads id=&
Baca selengkapnya

Cara Mendaftarkan Blog Ke Google Adsense (Panduan Terupdate)

Gambar
Google adsense menjadi terget utama kebanyakan blogger di dunia, pasalnya google adsense memberikan penghasilan kepada konten kreator melalui monetisasi konten blog dengan iklan adsense. Oleh karena itu bagi kamu yang baru saja memulai blogging khususnya yang ngeblog di platform blogger saya akan menunjukkan cara mendaftarkan blog anda ke google adsense agar dapat dimonetisasi dengan iklan adsense. Tapi sebelumnya harap perhatikan dan terapkan beberapa poin di bawah ini agar blog anda dapat dimonetisasi dengan iklan adsense. Syarat Agar Blog Diterima Adsense Untuk Monetisasi Daftarkan blog anda ke google adsense jika sudah rampung. Pastikan konten blog tidak berisi konten dewasa dan perjudian. Buat navigasi yang relevan dengan konten dan niche blog. Pastikan blog memiliki trafik organik. [ads id="ads1"] Jika ke empat poin di atas yang menjadi syarat kelayakan situs (blog) untuk dimonetisasi dengan iklan adsense sudah dipenuhi oleh blog anda maka blog sudah siap untuk didaftar
Baca selengkapnya