Some text some message..
Some text some message..
Some text some message..
Some text some message..
  • Beranda
  • »
  • Artikel
  • »
  • Membuat Tombol Contact Us Dan Share Whatsapp Pada Website

Membuat Tombol Contact Us Dan Share Whatsapp Pada Website

previous Previous Page

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.

Membuat Tombol Contact Us Whatsapp

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 :

tombol contact us whatsapp

Saat tombol Contact Us ditekan akan memanggil aplikasi Whatsapp disertai contoh teks untuk dikirim.

tombol contact us whatsapp

Cara Meng-encode Pesan Whatsapp Via URL

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.

Encode Teks Pesan Via PHP dan Javascript

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>

Encode Teks Pesan Via Situs Online

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.

situs url encoder decoder

Membuat Share Artikel Ke Whatsapp

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 :

share this whatsapp

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.

share this whatsapp

Source Code

Silahkan download source code beserta file pendukung pada tutorial ini.

Demikian artikel bagaimana membuat tombol Contact Us dan Share Whatsapp pada website. Semoga bermanfaat.

   0   217

Kategori : tag iconhtml - tag iconjavascript - tag iconphp - tag icontech

facebooktwitterwhatapplinkedinpinterest

previous Previous Page

Tinggalkan Balasan

Nama Pengguna* :

Email* :

 

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.

News Letters

Silahkan masukkan email Anda untuk berlangganan informasi kami

Polling

1. Apakah website ini menambah pengetahuan Anda?
 Ya
 Tidak
 Tidak Tahu
2. Seberapa sering Anda mengunjungi website ini?
 Sering
 Jarang
 Tidak Pernah
3. Apakah penilaian Anda terhadap website ini, jika melihat dari segi konten/isi?
 Sangat Bagus
 Bagus
 Cukup Bagus
 Kurang Bagus
4. Apakah penilaian Anda terhadap website ini, jika melihat dari segi tampilan?
 Sangat Bagus
 Bagus
 Cukup Bagus
 Kurang Bagus
5. Untuk meningkatkan kualitas website ini, Apakah saran Anda?

 


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.

Visitor Name
Email

 I'm not a robot