Media Berbagi & Catatan Online

Membuat Tombol Share dan Chat WhatsApp pada Website

Kategori: Blogging  |  07 Januari 2018

Seperti judul di atas, pada kesempatan kali ini saya akan memberikan tutorial tentang bagaimana membuat tombol share artikel dan chat langsung ke WhatsApp.

Dalam membuat tombol share dan chat ini kita tidak menggunakan JavaScript dan plugin sosial share pihak ketiga.

Mengapa tidak menggunakan JavaScript atau plugin pihak ketiga?

Alasannya karena dengan cara ini website atau blog tidak tidak akan menjadi berat untuk diakses sebab tidak membutuhkan banyak script dari pihak ketiga.

Oke langsung saja simak tutorialnya.

Tombol Share Artikel WhatsApp

Pernahkah Anda melihat tombol share artikel ke WhatsApp pada sebuah website, contohnya seperti situs "m.tribunnews.com"?

Bagaimanakah cara membuatnya?

Untuk membuat tombol share artikel langsung ke aplikasi WhatsApp caranya sangat mudah. Silakan copy paste kode di bawah ini dan tempatkan pada halaman web Anda.

<a href="whatsapp://send?text=URL Artikel">Bagikan ke WhatsApp</a>

Kemudian ganti URL Artikel dengan URL artikel yang ingin Anda bagikan langsung ke aplikasi WhatsApp.

Hasilnya akan menjadi seperti ini. Klik link di bawah ini untuk mencobanya.

Bagikan ke WhatsApp (hanya berfungsi jika web dibuka dengan smartphone yang terinstall aplikasi WhatsApp).

Tombol Chat WhatsApp

Untuk mempermudah pengunjung situs dalam berinteraksi dengan pemilik website, bisa dilakukan dengan menambahkan tombol klik chat WhatsApp pada halaman web.

Dengan tombol chat, pengunjung yang ingin bertanya atau bertransaksi dengan admin web akan menjadi lebih mudah sehingga tingkat konversi website menjadi tinggi (sangat bermanfaat untuk meningkatkan penjualan khususnya toko online).

Untuk membuat tombol chat, silakan copy paste code di bawah ini dan tempatkan pada halaman web Anda.

<a href="https://api.whatsapp.com/send?phone=6285735501035&text=Isi Pesan">Chat Via WhatsApp</a>

Kemudian ganti 6285735501035 dengan nomor tujuan chat WhatsApp. Nomor tujuan wajib menggunakan awalan kode negara yaitu 62 untuk Negara Indonesia.

Sedangkan Isi Pesan adalah pesan yang akan muncul saat user mengklik link tersebut dan masuk ke aplikasi WhatsApp. Isi pesan tersebut dapat kita tetapkan defaultnya.

Perlu diperhatikan bahwa isi pesan yang kita tetapkan secara default tidak akan tampil sebagaimana mestinya, namun diencode.

Cara Encode Isi Pesan

Agar lebih mudah dalam menetapkan pesan default yang sudah terencode, kita bisa memanfaatkan situs encode online.

  • Lalu copy paste teks yang ingin diencode dan tekan tombol "Encode". Contoh
Assalamu'alaikum, perkenalkan nama saya.....
  • Selanjutnya copy hasil encode tadi
Assalamu%27alaikum%2C%20perkenalkan%20nama%20saya.....
  • Dan paste pada isi pesan link chat WhatsApp tadi sehingga menjadi seperti ini.
<a href="https://api.whatsapp.com/send?phone=6285735501035&text=Assalamu%27alaikum%2C%20perkenalkan%20nama%20saya.....">Chat Via WhatsApp</a>

Klik link di bawah ini untuk mencobanya.

Chat Via WhatsApp (hanya berfungsi jika web dibuka dengan smartphone yang terinstall aplikasi WhatsApp).

Kustom Format Isi Pesan

Untuk mempermudah kostumer dalam melakukan pemesanan produk melalui chat WhatsApp pada toko online, kita bisa membuat kustom format pesan order.

Untuk membuat kustom format pesan caranya mudah, silakan tulis format pesan yang diinginkan misalnya,

Nama:
No. HP:
Alamat:
Pesanan:
Jumlah:

Lalu encode pesan tersebut seperti pada tutorial sebelumnya. Kemudian copy hasil encode tadi dan paste pada isi pesan. Hasilnya seperti ini.

<a href="https://api.whatsapp.com/send?phone=6285735501035&text=Nama%3A%0ANo.%20HP%3A%0AAlamat%3A%0APesanan%3A%0AJumlah%3A">Order Via WhatsApp</a>

Untuk demonya silakan klik link di bawah ini.

Order Via WhatsApp (hanya berfungsi jika web dibuka dengan smartphone yang terinstall aplikasi WhatsApp).

Penutup

Untuk membuat share artikel, chat dan order via WhatsApp sangat mudah. Anda bisa mencobanya sendiri pada website atau toko online yang Anda miliki. Dengan memanfaatkan WhatsApp kita dapat meningkatkan konversi dan penjualan.

Perlu diketahui bahwa tutorial yang saya sampikan di atas masih sangat sederhana karena hanya berupa link teks saja untuk setiap tombolnya. Anda bisa mempercantiknya dengan menambahkan kode CSS dan logo ikon WhatsApp seperti yang saya lakukan pada contoh di bawah ini.

Selesai sudah tutorial membuat tombol share artikel, chat dan order via WhatsApp kali ini. Jangan lupa untuk share artikel ini jika dirasa bermanfaat.

Tutorial lain yang mungkin Anda suka: Mengubah Warna Address Bar Website pada Browser Smartphone

Gambar utama: https://whatsapp.com/
Gambar kustom format: http://kasurnet.com/

Disqus Comments