2 Cara Membuat Dan Memasang Widget Live Chat WhatsApp Di Website

Zona Internetku 8 Comments November 24, 2018

Cara Membuat Dan Memasang Widget Live Chat WhatsApp Di Website. Seperti yang kalian ketahui bahwa aplikasi whatsapp merupakan aplikasi sosial media yang sangat populer di berbagai macam perangkat smartphone, seperti di OS Android, IOS, Windows Phone, dan Tizen.

Karena itu menurut saya whatsapp (WA) merupakan aplikasi wajib yang harus dimiliki oleh setiap orang karena kegunaannya yang sangat membantu kebutuhan sehari hari, baik itu hanya untuk beriteraksi dengan teman ataupun untuk berbisnis.

Pada kesempatan kali ini saya akan menunjukkan kepada kalian untuk memanfaatkan aplikasi yang satu ini supaya lebih menguntungkan lagi, yaitu menggunakan fitur direct message yang dimana seseorang yang akan menghubungi kita melalui WhatsApp mereka tidak perlu menyimpan nomor kita lagi, sehingga mereka hanya perlu mengakses link yang sudah kita siapkan.

Jadi hal ini akan sangat membantu sekali untuk kalian yang memiliki bisnis jualan online di web, membuka jasa secara online dan lain lain, jadi mereka bisa langsung menghubungi kalian dengan mudah.

Untuk membuat direct message atau pesan langsung di aplikasi WhatsApp saya sudah menyiapkan beberapa metode yang bisa kalian gunakan dan kalian bisa memilih metode mana yang menurut kalian lebih mudah untuk digunakan.

Baca juga :
Cara Membuat Tombol Demo Dan Download Keren Di Blog
3 Cara Memasang Widget Tombol Media Sosial Pada Blog
6 Cara Memasang Social Media Share Button Pada Blog

Cara Membuat Dan Memasang Widget Fitur Live Chat WhatsApp (WA) Di Website

1. Menggunakan Tools Widget Live Chat Whatsapp Di Website WhatsHelp

1. Pertama, silahkan masuk kedalam situs WhatsHelp

2. Kedua, pilih ikon WhatsApp
3. Ketiga, Masukkan nomor telphone whatsapp kalian beserta kode negaranya (+62 untuk indonesia)
4. Selanjutnya kalian atur dengan opsi yang ada, jika sudah klik "Get Button Code" untuk mendapatkan kode secara langsung
Kira kira kodenya akan muncul seperti ini

<!-- WhatsHelp.io widget -->
<script type="text/javascript">
    (function () {
        var options = {
            whatsapp: "+628383XXXXXXX", // WhatsApp number
            call_to_action: "Message us", // Call to action
            position: "right", // Position may be 'right' or 'left'
        };
        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 -->

5. Kemudian kalian salin kode tersebut dan letakkan di blog kalian dengan menggunakan widget HTML/JavaScript

2. Cara Membuat Tombol Dan Icon Whatsapp Di Website Sendiri Secara Manual

1. Salin kode HTML dan CSS dibawah ini

<style>
.mybuttonWA{margin:0;padding:0;text-align:center;position:fixed;bottom:35px;right:45px}
.buttonWA{font-size:17px;color:#f0e2dd;background:#1fe76e;padding:10px;margin:0;overflow:hidden;border-radius:3px;text-decoration:none}
.mybuttonWA .buttonWA:hover{background:#62abd0}
</style>
<div class="mybuttonWA">
<a class="buttonWA" href="https://api.whatsapp.com/send?phone=6283832XXXXXX&amp;text=Halo%20Admin%20Apa%20Kabar" rel="nofollow" target="_blank"><i class="fa fa-whatsapp"> </i> WhatsApp</a></div>

2. Ubah beberapa opsi berikut ini

• Kalian ubah nomor 6283832XXXXXX menjadi nomor WhatsApp kalian
• Ubah juga isi textnya menjadi yang kalian inginkan, untuk membuat spasi kalian hanya perlu menambahkan kode %20

3. Setelah itu kalian letakkan kode tersebut kedalam blog kalian menggunakan widget HTML/JavaScript

Jika kalian merasa tidak nyaman karena link tersebut terlalu panjang maka kalian bisa memotongnya menggunakan situs bitly supaya lebih terlihat singkat

Apabila ikon whatsapp tersebut tidak tampil maka solusinya adalah kalian harus menambahkan plugin font awesome berikut ini kedalam template blog kalian
Masuk kedalam blog kalian
1. Pilih menu "Tema" dan pilih "Edit HTML"
2. Cari kode <head> dan letakkan kode berikut ini tepat dibawahnya

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

3. Jika sudah klik "Simpan Perubahan" pada template anda maka masalah tersebut akan teratasi

Baca juga :

• Cara Ampuh Menghapus Riwayat Pencarian Di Browser
• 4 Aplikasi Android Terbaik Untuk Menyalin Tulisan Menjadi Teks Digital
• Cara Mengatasi Kontak WA Tidak Terbaca

Itulah tutorial singkat tentang Cara Memasang Widget WhatsApp Di Website Yang Bisa Dipasang Di Blog Kalian, semoga saja bermanfaat untuk kita semua, selamat mencoba.

Promo Menarik

Diskon Barang Elektronik Di Lazada Hingga 80%

Cek disini

Promo Cuci Gudang, Diskon Sampai 50%

Cek disini

Murah Pol - Barang Murah Berkualitas Mewah

Cek disini

Tampil Cantik Gak Perlu Mahal - Diskon 50%

Cek disini

Kumpulan Barang Untuk Kesehatan - Diskon 50%

Cek disini

SHARE