---

Tutorial Memasang Widget Aplikasi Chating Populer di Website Anda

Jika anda pelaku usaha yang memanfaatkan website sebagai fasilitas untuk usaha anda, anda dapat memakai widget ini untuk pengganti kontak yang tertera langsung di halaman anda. Dengan widget ini pengguna website akan dialihkan ke aplikasi yang bersangkutan sesuai dengan jenis aplikasi apa yang ingin digunakan oleh pelanggan anda untuk terhubung dengan anda. Widget ini bisa berjalan dengan baik di desktop ataupun di mobile.

Widget ini memiliki kelebihan dimana jika pembeli menekan kontak dengan mengakses melalui perangkat yang telah terinstal aplikasi chat seperti telegram, whatsapp, line, messenger maka secara otomatis akan langsung membuka melalui aplikasi tersebut dan bisa langsung mengirimkan pesan. Begitupun dengan sms dan telepon akan menyesuaikan dengan aplikasi yang dipilih.

Instalasi widget ini cukup mudah dan juga gratis, kita hanya diharuskan memasukkan email dan script widget pun dapat dicopy dan diaplikasikan pada website anda.

Anda penasaran dengan widget ini? Silakan anda lihat tombol yang berada di pojok kanan bawah pada setiap halaman di website ini.

Untuk lebih jelasnya anda dapat mengikuti langkah berikut:

1. Kunjungi website https://whatshelp.io/widget
2. Selanjutnya silakan klik Get Your Button atau bisa langsung scroll ke bawah.
3. Pada bagian Choose messaging apps, silakan pilih aplikasi apa yang anda gunakan untuk chating atau anda dapat dihubungi melalui media apa. Kemudian isikan kontak sesuai dengan aplikasi yang ingin anda gunakan.
4. Pada bagian Customize your button anda dapat mengelola logo perusahaan, pesan pembuka, warna, posisi widget, dan pesan yang tampil di sebelah tombol widget. Anda akan melihat tampilan dari widget yang anda buat langsung sesuai dengan posisi yang anda pilih. Jadi apabila sudah sesuai dengan keinginan anda maka anda dapat langsung ke langkah selanjutnya.
5. Pada bagian Add the code to your website, silakan masukkan alamat email anda dan tekan tombol Get Button Code. Maka anda akan mendapat script untuk widget yang anda buat, kurang lebih seperti berikut:
   

   <!-- WhatsHelp.io widget -->
   <script type="text/javascript">
       (function () {
           var options = {
               whatsapp: "+6281234567", // WhatsApp number
               telegram: "coba", // Telegram bot username
               company_logo_url: "//static.whatshelp.io/img/flag.png", // URL of company logo (png, jpg, gif)
               greeting_message: "Hello, how may we help you? Just send us a message now to get assistance.", // Text of greeting message
               call_to_action: "Message us", // Call to action
               button_color: "#E74339", // Color of button
               position: "right", // Position may be 'right' or 'left'
               order: "whatsapp,telegram" // Order of buttons
           };
           var proto = document.location.protocol, host = "whatshelp.io", url = proto + "//static." + host;
           var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = url + '/widget-send-button/js/init.js';
           s.onload = function () { WhWidgetSendButton.init(host, proto, options); };
           var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);
       })();
   </script>
   <!-- /WhatsHelp.io widget -->

   pada bait program di atas saya hanya memakai whatsapp dan telegram sebagai kontak yang bisa dipakai pengunjung website untuk terhubung dengan saya. Apabila anda memakai aplikasi lain dan konfigurasi lain pada form maka script akan sedikit berbeda. Jadi silakan copy script yang tampil setelah anda memasukkan email pada bagian add code to your website.

6. Tempatkan script yang sudah anda copy di akhir tag body, lihat coding di bawah ini:
   

   <!-- letakkan script di sini -->
   </body>
   </html>

   Tujuan penempatan script ini di akhir tag body agar script di load di akhir sehingga ketika koneksi lambat tidak muncul blank page atau halaman terpotong karena script ini lumayan lama untuk di load. Hasil dari langkah 6 akan seperti ini.
   

     <!-- WhatsHelp.io widget -->
     <script type="text/javascript">
       (function () {
           var options = {
               whatsapp: "+6281234567", // WhatsApp number
               telegram: "coba", // Telegram bot username
               company_logo_url: "//static.whatshelp.io/img/flag.png", // URL of company logo (png, jpg, gif)
               greeting_message: "Hello, how may we help you? Just send us a message now to get assistance.", // Text of greeting message
               call_to_action: "Message us", // Call to action
               button_color: "#E74339", // Color of button
               position: "right", // Position may be 'right' or 'left'
               order: "whatsapp,telegram" // Order of buttons
           };
           var proto = document.location.protocol, host = "whatshelp.io", url = proto + "//static." + host;
           var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = url + '/widget-send-button/js/init.js';
           s.onload = function () { WhWidgetSendButton.init(host, proto, options); };
           var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);
       })();
     </script>
     <!-- /WhatsHelp.io widget -->
     </body>
   </html>

7. Simpan dan perbaharui script web anda, maka dengan hal tersebut widget sudah berhasil terinstal.

Anda dapat memasang dengan cara yang sama baik itu di Blogger, Wordpress, mapun web yang anda buat sendiri. Sekian tutorial yang dapat saya berikan, semoga dapat berguna untuk  anda.

---