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:

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:


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.
Lebih baru Lebih lama
Close