Cara Pasang Widget Live Chat Di Blogger

Hallo sobat blog!!
Pada kesempatan kali ini, CS akan membahas tentang Cara Pasang Widget Live Chat Di Blogger yang didalamnya ada beberpa pilihan Fitur seperti Chat WhatsApp, Join Group whatsApp, email dan massagger facebook.
Sobat mungkin pernah berkunjung ke website atau toko online yang menampilkan sebuah menu dengan tulisan "Live Chat" dan jenis lainnya.  
Adanya internet sangat membantu pembisnis untuk memudahkan segala transaksi, pertanyaan, keluhan dan berinteraksi secara langsung tanpa menunggu lama dengan pelanggan atau pengunjung.

Hal ini tentu sangat berguna sekali bagi setiap pengunjung situs atau blog sobat. Biasanya pengunjung akan lebih senang jika mendapatkan respons cepat. Bagi sobat yang menggunakan platform dari wordpress.org, mungkin sangat mudah karena banyaknya plugin Live chat yang tersedia secara gratis dengan instalisasi yang mudah. 

Nah, tutorial ini CS khususkan untuk para blogger-blogger kesayangan CS yang selalu setia..he he he. Baiklah sobat, tanpa basa-basi lagi mari ikutin langkah-langkah dibawah ini:

Perhatian:
Sebelum melakukan pemasangan widget ini, diwajibkan sobat untuk backup template blog sobat terlebih dahulu, untuk antisipasi terjadinya eror.

1. Login ke akun blogger sobat - Tata Letak - Tambahkan widget - Html/Javascript.

2. Copy kode dibawah ini, tempel/pastekan pada kolom konten. Untuk judul kosongkan saja.

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

<div class="forMobile wtsp " style="position:fixed;bottom:10px;right:250px;z-index:99999">
  <div class="nessa-container pulse-button" data-delay-time="0" data-inactive-time="0" data-scroll-length="0" data-auto-display-on-mobile="on">

            <div class="nessa-box" pulse-button> 
                <div class="nessa-wrapper ">                     
                    <div class="nessa-description ">
            <img src=" https://1.bp.blogspot.com/-KtXcKC2FcpY/XUvXZc3wbVI/AAAAAAAAAXw/SniH-HQ274QdZvHXeb9H4NQkhrvtTQVsACLcBGAs/s1600/20190808_150242.png" style="max-width:30px;float:left;margin-right: 5px;margin-top: 10px;">
                                    <p style="font-size: 18px;"> Calon SEO LiveChat</p>
                    </div>                    
                                        <span class="nessa-close"></span>
                    <div class="nessa-people">                                                
                        <a href="https://api.whatsapp.com/send?phone=0813166XXXX&amp;text=hallo..." target="_blank" class="nessa-account" data-number="905546654400" data-auto-text="Nessa Febrianti">
                            <div class="nessa-face"><img src="https://www.shareicon.net/download/2015/09/16/102091_call_512x512.png" onerror="this.style.display='none'"></div>
                            <div class="nessa-info">                                
                                                                <span class="nessa-title">Live Chat Via WhatsApp</span>                                                                                                
                                <span class="nessa-name">Ada yang bisa saya bantu?</span> 
                            </div>
                            <div class="nessa-clearfix"></div>
                        </a>
            <a href="https://m.me/nessafechat" target="_blank" class="nessa-account" data-number="905546654400" data-auto-text="Nessa Febrianti">
                            <div class="nessa-face"><img src="https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/facebook_circle-512.png" onerror="this.style.display='none'"></div>
                            <div class="nessa-info">    
                                                                <span class="nessa-title">Live Chat Via Facebook</span>                                            
                                <span class="nessa-name">Ada yang  bisa saya bantu ?</span>
                            </div>
                            <div class="nessa-clearfix"></div>
                        </a>
            <a href="https://chat.whatsapp.com/kodegroupwhatsapp" target="_blank" class="nessa-account" data-number="905546654400" data-auto-text="Nessa Febrianti">
                            <div class="nessa-face"><img src="https://1.bp.blogspot.com/-CM6PXWMLACs/XUvdfgfzRtI/AAAAAAAAAX8/HI4d18SzPVUTOQKapP7tQAUhAVUepvB4ACLcBGAs/s320/20190808_152928.png" onerror="this.style.display='none'"></div>
                            <div class="nessa-info">
                                <span class="nessa-title">Group WhatsApp</span>                                
                                <span class="nessa-name">Bergabung Bersama Kami.</span>                     
                            </div>
                            <div class="nessa-clearfix"></div>
                        </a>
            <a href="mailto:calonseo.mail@gmail.com" target="_blank" class="nessa-account" data-number="905546654400" data-auto-text="Nessa Febrianti">
                            <div class="nessa-face"><img src="https://cdn4.iconfinder.com/data/icons/happily-colored-snlogo/512/gmail-email-mail-logo-circle-material.png" onerror="this.style.display='none'"></div>
                            <div class="nessa-info">
                                                                <span class="nessa-title">Live Chat via E-mail</span>                                
                                <span class="nessa-name">Ada  yang bisa saya bantu ?</span>
                                
                            </div>
                            <div class="nessa-clearfix"></div>
                        </a>
            </div>
                </div>
            </div> 
            <span class="nessa-handler">
                <span class="text" style="font-size: 16px;"><img src="https://1.bp.blogspot.com/-KtXcKC2FcpY/XUvXZc3wbVI/AAAAAAAAAXw/SniH-HQ274QdZvHXeb9H4NQkhrvtTQVsACLcBGAs/s1600/20190808_150242.png" style="max-width:20px;float:left;margin-right: 5px;margin-top: -3px;"> Live Chat</span>            </span> 
        </div>
</div>

Keterangan :
             Ganti dengan url icon atau gambar sobat.
             Ganti dengan kata yang sesuai sobat sendiri.
             Ganti dengan alamat email sobat.
             Ganti dengan url group whatsApp sobat.
             Ganti dengan nama pengguna masagger sobat.
             Ganti dengan nomor whatsApp sobat.

3. Pada sidebar kiri klik theme/tema - Edit HTML. Kemudian cari kode </head> gunakan fungsi CTRL+F supaya cepat. Setelah ketemu, Download dan copy kedo CSS dibawah ini, lalu tempelkan tepat sebelum kode </head> .


4. Setelah itu, sobat harus memasang kode JS dibawah ini, tanpa kode ini, widget LiveChat tidak akan berjalan. Caranya sobat cari kode </body>  kemudian copy kode JS nya dibawah ini, lalu tempel tepat sebelum kode </body> . Selanjutnya sobat simpan template atau simpan tema dan lihat hasilnya.
<script type="text/javascript">
    
     var nessa = $("body").find('.nessa-container'), nessaBox = nessa.find('.nessa-box'), nessaToggleBox = function(e) { nessaBox.toggleClass('show');};
$(".nessa-handler").on("click",function(){
nessaToggleBox(); 
});
$(".nessa-close").on("click",function(){
nessaToggleBox();
});

</script>


5. Jika terjadi eror atau hal yang tidak diharapkan, hubungi CS melalui contact atau bisa juga tinggalkan jejak sobat pada kolom komentar dibawah.
Mungkin sampai disini saja Cara Pasang widget Live Chat di Blogger. Mohon agar menggunakan widget ini dengan bijak. Jika memang tidak diperlukan, jangan dipasang yah sobat.

Baiklah, semoga informasi tutorial diatas bisa bermanfaat buat sobat. Selamat mencoba yah..
DEMO
Widget LiveChat
Calon SEO

Terima kasih.



8 Responses to "Cara Pasang Widget Live Chat Di Blogger"

  1. wah.. informasi yang sangat inspiratif..

    ReplyDelete
  2. Replies
    1. Sama" kak Arif , terima kasih juga sudah berkunjung...

      Delete
  3. Eh ini ada contoh demonya? kalau dari kode html yang atas ini seperti link ya? nnti dibuka di aplikasi masing2 link tersebut?

    ReplyDelete
    Replies
    1. terima kasih kak sudah mampir. Untuk demonya ada kok kak

      https : //s . codepen . io/calonseo/debug/zgWRPO/vWkRwRbwXqyM

      Delete
  4. gan demonya expired nih ?
    Nujinwo1.blogspot.com

    ReplyDelete
  5. biar gk numpuk sama tombol ke atas gmn ya ka?

    ReplyDelete

Berkomentarlah dengan bijak dan sesuai artikel yang anda baca.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel