Whatsapp sebagai aplikasi sosial media untuk berkirim pesan, panggilan telpon, panggilan video dan informasi lainnya memiliki potensi besar untuk digunakan sebagai jalur promosi produk dan jasa. Walaupun saluran telepon dan email masih banyak digunakan sebagai saluran resmi dalam merespon masukkan customer, namun belakangan keduanya mulai ditinggalkan dan tergantikan oleh pesan whatsapp sebagai layanan bagi suatu perusahaan kepada customernya.
Pada suatu website, sering dijumpai tombol klik Contact Us yang ditambahkan pada halaman web. Tombol tersebut berfungsi sebagai layanan dan respon yang cepat untuk mempermudah pengunjung dalam berinteraksi dengan administrator ataupun pemilik website. Dengan adanya tambahan tombol tersebut, pengunjung dapat leluasa bertanya tentang seputar produk ataupun konten pada suatu web. Jika web tersebut merupakan web e-commerce, diharapkan dapat membantu transaksi produk yang akan dijual.
Berbeda halnya dengan layanan dalam bentuk saluran telepon yang lebih terkesan formal. Pengunjung akan lebih enggan untuk berinteraksi jika bukan hal yang mendesak. Ditambah lagi jika layanan melalui panggilan telepon, akan membutuhkan biaya atau ongkos panggilan telepon yang tidak murah untuk panggilan di luar kota.
Untuk membuat tombol Contact Us ke Whatsapp, hal pertama yang perlu disiapkan adalah nomor telepon yang sudah terdaftar pada aplikasi Whatsapp. Nomor ini nantinya digunakan sebagai nomor tujuan saat pengguna mengklik tombol Contact Us.
Pengiriman pesan dilakukan via redirect URL https://wa.me/{phone_number}?text={isi_pesan} dengan menyertakan parameter nomor telepon dan juga text yang berisi pesan untuk dikirimkan via pesan Whatsapp. Anda juga bisa melakukan redirect ke URL Whatsapp lainnya pada https://api.whatsapp.com/send?phone={phone_number}&text={text}. Keduanya akan menghasilkan output yang sama.
Untuk memanggil aplikasi Whatsapp via browser cukup dengan menggunakan hyperlink anchor tag <a> dengan hyperlink referensinya adalah https://wa.me.
<a href="https://wa.me/62123456789?text=contoh%20isi%20pesan%20dikirim%20via%20whatsapp"><img src="contact_us.png" style="height:44px;width:auto;"></a>
Berikut ini contoh halaman index untuk menampilkan link chat Whatapps :
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta name="viewport" content="width=device-width, initial-scale=1">
5. <meta charset="utf-8">
6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
7. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
8. <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
9. <style>
10. body{
11. font-family: 'Roboto', sans-serif;
12. }
13. .tombol_contact_us{
14. position:fixed;right:10px;bottom:44px;
15. }
16. </style>
17. <title>Membuat Tombol Contact Us Whatsapp Pada Website</title>
18. </head>
19. <body>
20. <h1>Membuat Tombol Contact Us Whatsapp Pada Website</h1>
21. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
22.
23. <p>Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet.</p>
24. <a href="https://wa.me/62123456789?text=contoh%20isi%20pesan%20dikirim%20via%20whatsapp" class="tombol_contact_us"><img src="contact_us.png" style="height:44px;width:auto;"></a>
25. </body>
26. </html>
Jika dijalankan pada browser akan menghasilkan tampilan :
Saat tombol Contact Us ditekan akan memanggil aplikasi Whatsapp disertai contoh teks untuk dikirim.
Metoda pengiriman data pada tombol Contact Us adalah melalui URL address dan data teks yang dikirimkan harus diencode terlebih dahulu. Jika tidak dilakukan encode teks terlebih dahulu, data teks yang mengandung karakter diluar karakter ASCII alphanumeric dan beberapa karakter aman, maka akan terjadi kesalahan. Dan pada akhirnya data teks tersebut tidak akan ditampilkan secara keseluruhan.
Karakter aman yang bisa dilewatkan via URL seperti hype (-), underscore (_), tidle (~), dan dot (.). Sedangkan karakter yang tidak boleh dilewatkan pada url seperti karakter spasi, tanda petik (") single maupun double, karakter persen (%) dan lainnya.
Proses encoding URL pada data teks yang akan dilewatkan pada URl dapat mengunakan PHP dan juga javascript. Pada PHP dapat menggunakan fungsi urlencode(); dengan parameter data yang dimasukkan berupa string. Pada javascript, dapat menggunakan fungsi encodeURI(); dengan data string sebagai inputan.
1. <?php
2. $teks = urlencode('contoh isi pesan yang akan dikirim via whatsapp');
3. echo "<a href='https://wa.me/62123456789?text=" . $teks . "' class='tombol_contact_us'><img src='contact_us.png' style='height:44px;width:auto;'></a>";
4. ?>
5. <script>
6. var teks = encodeURI("contoh isi pesan yang akan dikirim via whatsapp");
7. document.write( "<a href='https://wa.me/62123456789?text=" + teks + "' class='tombol_contact_us'><img src='contact_us.png' style='height:44px;width:auto;'></a>");
8. </script>
Jika Anda enggan untuk melakukan proses encode URL melalui program secara langsung, anda dapat memanfaatkan berbagai situs online. Situs URL encoder decoder dapat membantu dalam melakukan proses encode url.
Membagikan konten website melalui aplikasi Whatsapp, caranya hampir sama. Yang membedakan adalah parameter nomor telepon harus dihilangkan terlebih dahulu, sedangkan parameter konten teks tetap diikutkan sebagai teks yang akan dibagikan pada Whatsapp. URL yang dituju masih sama yaitu https://wa.me/?text={isi_pesan} atau https://api.whatsapp.com/send?phone=&text={text}
Saat pengguna menekan tombol Share Article, maka aplikasi Whatsapp akan terbuka. Pengguna bebas melakukan checklist pada berbagai nomor telepon Whatsapp sebagai kontak untuk membagi konten.
<a href="Contoh%20Text%20Membuat%20Tombol%20Share%20Artikel%20Ke%20Whatsapp" class="share_this"><img src="share_this.png" style="height:66px;width:auto;></a>
Berikut ini contoh halaman index untuk membagikan konten website pada Whatsapp :
HTML
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta name="viewport" content="width=device-width, initial-scale=1">
5. <meta charset="utf-8">
6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
7. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
8. <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
9. <style>
10. body{
11. font-family: 'Roboto', sans-serif;
12. }
13. </style>
14. <title>Membuat Tombol Share Artikel Ke Whatsapp</title>
15. </head>
16. <body>
17. <h1>Membuat Tombol Share Artikel Ke Whatsapp</h1>
18. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
19.
20. <p>Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet.</p>
21. <a href="Contoh%20Text%20Membuat%20Tombol%20Share%20Artikel%20Ke%20Whatsapp" class="share_this"><img src="share_this.png" style="height:66px;width:auto;"></a>
22. </body>
23. </html>
Jika dijalankan pada browser akan menghasilkan tampilan :
Saat gambar Share This Article ditekan akan memanggil aplikasi Whatsapp, jika nomor telepon yang dichecklist hanya 1 buah akan menghasilkan tampilan dibawah ini. Jika multiple tampilannya berbeda.
Source Code
Demikian artikel bagaimana membuat tombol Contact Us dan Share Whatsapp pada website. Semoga bermanfaat.
0 
217
Kategori : 
html - javascript - php - tech
Halaman Terkait
 | Upload Multiple File Dengan Tambahan Tombol Add Dan Remove File artikel |
| Merubah Tampilan Tombol File Upload HTML artikel |
Belum terdaftar? silahkan Daftar disini.
Mengirim Komentar
Setiap pengunjung situs ini dapat memposting komentar disini, namun tidak semua komentar dapat ditampilkan. Gunakan kalimat baku bahasa Indonesia yang mudah dimengerti. Dilarang memposting kalimat yang berisi ujaran kebencian, SARA, pornografi, perjudian dan spam. Komentar harus sesuai dengan topik. Untuk bahasan lainnya yang lebih mendalam dapat menggunakan sarana forum. Anda dapat mengirimkan suatu pertanyaan dan member lainnya akan menjawab pertanyaan Anda.Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
Polling
Belum terdaftar? silahkan Daftar disini.
Visitor Live Chat
admin
(04 Mar 2021 at 10:52 am)
Silahkan anda memberikan masukkan chat (obrolan) pada fasilitas chat ini. Konten bebas, sopan dan menghargai pendapat orang lain..
_Dicky (06 Mar 2021 at 03:24 pm)
Said : Oops, It's nice content
billy_123 (06 Mar 2021 at 03:26 pm)
Said : Anyone, can you explain about HTMl.. what is it???
_Dicky (06 Mar 2021 at 03:27 pm)
Said : HTML is abbreviation ..
_Dicky (06 Mar 2021 at 03:28 pm)
Said : It's Stand for Hyper text mark up language..
billy_123 (06 Mar 2021 at 03:28 pm)
Said : It's so clear right now..
billy_123 (06 Mar 2021 at 03:29 pm)
Said : and what about CSS
_Dicky (06 Mar 2021 at 03:29 pm)
Said : css for styling sheet guys..
rizky yuda (07 Mar 2021 at 12:30 pm)
Said : Konten cukup menambah wawasan...
suryadi (13 Mar 2021 at 06:46 pm)
Said : Boleh request artikel cara koneksi database msyql ke php..
Nettie Rutherfo (08 Apr 2021 at 12:30 pm)
Said : Auto
Tedy (29 Mei 2021 at 12:09 pm)
Said : nice blog and articles..
Ms. Doyle Mann (02 Jun 2021 at 09:56 pm)
Said : card
flowrie_skylee (12 Jun 2021 at 01:24 pm)
Said : nice content
Nelson Schaefer (12 Jul 2021 at 04:01 pm)
Said : JSON
ooppp (18 Jul 2021 at 11:44 pm)
Said : 000popooppi
Mrs. Jeff Boehm (01 Agt 2021 at 11:01 am)
Said : fuchsia
dharma (07 Sept 2021 at 05:16 pm)
Said : ini support PHP 8?
admin (12 Sept 2021 at 12:50 pm)
Said : #dharma masih dalam ruang lingkup PHP versi 7.
Namun untuk ke depannya akan dipertimbangkan agar support PHP 8, jika perubahan dari PHP 7 ke PHP 8 memang dirasa sangat signifikan.
sadas (13 Jan 2022 at 09:48 am)
Said : Hello
sutiyono (15 Jan 2022 at 09:36 am)
Said : konten cukup menarik.
Fuad (08 Mar 2022 at 05:00 pm)
Said : Maksih bang kontennya, sangat membantu.
admin (10 Mar 2022 at 12:18 pm)
Said : #Fuad Sama sama bang.. terima kasih sudah mampir di blog ini..
Ferdian (09 Mei 2022 at 11:31 pm)
Said : bang bisa tolong buatkan contoh tamplate kirim email verifikasi gak?
admin (10 Mei 2022 at 09:44 pm)
Said : Bang #Ferdian, artikelnya belum dibuat. Tapi ada kesamaan konsep yang dapat ditemukan pada halaman : Membuat Form Newsletters Interaktif Dengan Kode Verifikasi Dikirim Via Email,
Silahkan download source code dan file penunjangnya di sana. dan coba kembangkan untuk mengirimkan verifikasi via email untuk penggunaan yang lainnya.
Previous Page 
HTML
Peringatan!
Apakah ingin menghapus komentar ini?