2 Cara Membuat Live Chat WhatsApp Di Website

Cara Membuat 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 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

2 Cara Mudah Untuk Menambahkan Fitur Live Chat Di Website

1. Menggunakan Situs 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. Membuat Tombol Sendiri Link Chat WhatsApp 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 Membuat Link Direct Message Pada WhatsApp Yang Bisa Dipasang Di Blog Kalian, semoga saja bermanfaat untuk kita semua, selamat mencoba.

Share this post