Membuat Tombol Live Chat ke Facebook Messenger di Blogger dan WordPress

Cara Membuat Tombol Live Chat ke Facebook Messenger di Blogger dan WordPress

Plugin chat box Facebook Messenger ini membuat pengunjung blog bisa langsung berinteraksi dengan kamu sebagai admin karena langsung menghubungkan antara blog dengan fitur chat di Facebook. Dia bersifat real time, artinya kedua belah pihak bisa langsung saling membalas pesan satu sama lain tanpa harus menunggu.

Widget ini termasuk ke dalam fitur Fanspage (halaman). Jadi kalau kamu mau memasang plugin yang langsung chat ke Facebook Messenger maka wajib mempunyai Fanspage. Semua isi chat tadi akan masuk ke dalam inbox Fanspage ya, bukan ke akun pribadi.

Fitur ini tergolong penting bagi yang berjualan produk atau jasa secara online. Pengunjung yang membuka website akan bisa langsung menghubungi Customer Service ketika mereka membuka online shop kamu. Sangat memudahkan komunikasi antara penjual dan calon pembeli.

Contohnya bisa kamu coba sendiri di artikel ini. Cek di sebelah kiri bawah, disana ada sebuah tombol dengan icon Facebook Messenger. Coba klik dan kirim pesan pada saya.


Cara Memasang Plugin Live Chat Facebook Messenger di Website

Kali ini saya membuat tutorial untuk dua buah platform, yaitu Versi Blogger dan versi Versi WordPress. Tapi sebelum menjelaskan untuk masing-masing platform, kita kupas dulu pengaturan yang harus dilakukan di Facebook.

1. Buka Fanspage yang mau diintergasikan ke blog / web.
2. Masuk ke Pengaturan » Platform Messenger.
Atau untuk singkatnya bisa masukkan URL ini ke address bar browser.
https://www.facebook.com/ignielcom/settings/?tab=messenger_platform
Ganti ignielcom dengan username Fanspage masing-masing.
Cara Memasang Plugin Live Chat Facebook Messenger di Blog

3. Scroll sampai bawah dan temukan bagian Plugin Obrolan Pelanggan dan klik tombol Menyiapkan.
Cara Memasang Kotak Chat Langsung ke Messenger Facebook di Blogger

4. Akan muncul sebuah jendela pop-up. Klik saja Selanjutnya.
Cara Pasang Tombol Langsung Chat Ke Inbox Fanspage Untuk Online Shop

5. Pilih bahasa yang diinginkan. Dalam contoh saya pakai Bahasa Indonesia, lalu tentukan salam pembuka. Untuk mengubahnya klik tombol Ubah. Jika sudah klik tombol Simpan lalu Selanjutnya.
Cara Membuat Widget Chat ke Messenger Facebook di Blogspot

6. Berikan informasi berapa lama biasanya kamu membalas pesan. Info itu akan otomatis berada di bagian header chat box. Kamu juga bisa mengubah warna tombol live chat Facebook Messenger untuk online shop agar sesuai dengan layout blog masing-masing dengan klik toggle Warna khusus. Ini akan memengaruhi warna tombol, bubble chat, dan icon like (jempol). Jika tidak mau diganti, biarkan saja.
Cara Buat Plugin Langsung Chat ke Fanspage Facebook Di Blogspot

7. Tuliskan domain atau URL website / blog yang akan dipasangi plugin live chat box Facebook Messenger ini. Domain bisa ditambahkan lebih dari satu. Disana akan terdapat kode yang nantinya akan kita gunakan. Simpan dulu di notepad komputer agar tidak hilang. Terakhir klik tombol Simpan lalu Selesai.
Membuat Icon Messenger di Blog yang Bisa Langsung Chat Ke Fanspage Facebook


1. Versi Blogger

Sekarang saatnya untuk memasang di Blogger. Buka pengaturan template masing-masing dan simpan kode yang sudah didapatkan tadi tepat "SESUDAH / DI BAWAH" tag <body>. Jika terjadi error, parse dulu kodenya di website berikut:
http://www.blogcrowds.com/resources/parse_html.php
Bagaimana Membuat Kotak Yang Langsung Mengirim Chat ke Facebook

2. Versi WordPress

1. Buka dashboard dan akses menu Appearance » Editor.
Cara Memasang Plugin Live Chat ke Facebook di Wordpress

2. Pada menu Templates di sebelah kanan, pilih Theme Header (header.php).
3. Simpan kode "SESUDAH / DI BAWAH" tag <body>. Setelahnya klik tombol Update File.
Membuat Kotak Chat ke Halaman Facebook Untuk Wordpress

3. Pengaturan Lanjutan

Ini bersifat opsional, artinya boleh dilakukan boleh tidak. Tujuannya agar tampilan live chat Facebook Messenger lebih variatif.

3.1. Mengubah Posisi Tombol

Secara default, posisi tombol akan berada di kanan bawah. Ini mungkin akan menjadi masalah karena biasanya tombol back to top pun berada di posisi yang sama sehingga menutupi satu sama lain. Solusinya: pindahkan posisi tombol live chat ke sebelah kiri. Tambahkan kode CSS ini "SEBELUM / DI ATAS" </style>.
.fb_dialog, iframe.fb_customer_chat_bounce_in_v2, iframe.fb_customer_chat_bounce_out_v2 {
  right: 0px !important;
  left: 18px !important;
}


3.2. Mengubah Pesan Pembuka Bagi Yang Belum Login Facebook

Kamu bisa membuat pesan pembuka yang berbeda bagi pengunjung yang sudah dan belum login di akun Facebooknya masing-masing. Perhatikan potongan kode berikut:
logged_in_greeting: Isi pesan bagi yang "SUDAH" login.
logged_out_greeting: Isi pesan bagi yang "BELUM" login.

Jika ingin dicustom, ubah menjadi seperti ini:
logged_in_greeting="Halo. Apa yang bisa kami bantu untuk memenuhi kebutuhan Anda?"
logged_out_greeting="Halo. Agar bisa mengobrol dengan kami, pastikan Anda sudah login ke akun Facebook."


Sekian tutorial lengkap tentang cara membuat dan memasang plugin live chat Facebook Messenger untuk Blogger dan WordPress. Semoga toko online kamu makin laris dengan adanya bantuan script yang memudahkan komunikasi antara penjual dan pembeli ini.

Artikel Terkait

20 komentar

Ikuti format penulisan berikut untuk menyisipkan elemen tambahan.
  • Menulis kode gunakan <i>kode</i>
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em>
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong>
  • KarawangPortal
    5/8/20
    Profil: https://www.blogger.com/profile/04680892434149064335
    mbak igniel kok sekarang tombol pindah ke kanan lagi ya apa ada pembaharuan dari pihak fbnya padahal punya saya sudah di kiri dan saat ini pun punya mbak ada di kanan terimakasih www.karawangportal.com
  • IT Barbar
    20/7/20
    Profil: https://www.blogger.com/profile/09542290253485661929
    mba kalau pengen munculnya sebelah kiri gimana ya kaya punya igniel ini
    • Igniel
      20/7/20
      Profil: https://www.blogger.com/profile/09199170379661896200
      Di atas ada penjelasannya mas. Buat mengubah posisi tombol.
  • Hilman Mr
    11/12/19
    Profil: https://www.blogger.com/profile/03818571749411170812
    thankz infonya jangan lupa berkunjung https://www.hilmanmr.my.id
  • Riza Pinandita
    8/10/19
    Profil: https://www.blogger.com/profile/03685002514100777991
    Mbak Igniel, kalau biar tampil hanya di halaman tertentu saja seperti punya mbak gimana caranya?
  • APD
    26/9/19
    Profil: https://www.blogger.com/profile/09681932066187640035
    kalau untuk ingin menampilkan tombol chat fb melayang nya sebelah kiri bagaimana gan?
    • Igniel
      26/9/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Apa udah dibaca semua gan? Di atas udah ada caranya, di nomor 3.1
  • iFabrix
    13/9/19
    Profil: https://www.blogger.com/profile/10657083603275788972
    ini kalau bisa dikasih lazyload bagus kayaknya
  • Taufik Nurhasan
    23/3/19
    Profil: https://www.blogger.com/profile/04144797334994122498
    biar posisinya di sebelah kiri bagaimana?
    • Igniel
      14/9/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Kan di atas udah ada caranya. Di nomor 3.1
  • Rakor Blog
    4/3/19
    Profil: https://www.blogger.com/profile/08828126341084806989
    mantap gan artikelnya bermnafaat banget nihh

    mampir https://hilbrakurnia3.blogspot.com
  • Tokoshopedia
    11/2/19
    Profil: https://www.blogger.com/profile/13462505068058686857
    makasih mbak, udah bisa ternyata harus jadi admin di halaman nya karena saya cuma editor. dan awal nya error saat di terapkan di HTML lalu saya pharse dulu seperti diatas dan berhasil
  • Tokoshopedia
    11/2/19
    Profil: https://www.blogger.com/profile/13462505068058686857
    Apa cuma ane yang gak ada Plugin Obrolan Pelanggan di menu Setting, Platform Messenger ? jadi gak bisa masukin Domain Web buat menampilkan Plugin nya di blog
  • ดี ต่อ ใจ
    3/2/19
    Profil: https://www.blogger.com/profile/11563704812690245981
    Kok di blog saya tidak muncul ya kak. Ini salah kode scriptnya apa salah template saya ya ??
    Pencerahan dong.

    • Igniel
      3/2/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Scriptnya bener. Kalo pasangnya sesuai tutor pasti work.
    • ดี ต่อ ใจ
      17/2/19
      Profil: https://www.blogger.com/profile/11563704812690245981
      Capek kak, berkali2 edit template, masang nih widget. Gak work.. :(

      Salahnya di mana T_T
  • Muhammad Yamin
    29/1/19
    Profil: https://www.blogger.com/profile/05900714147479199419
    Makasih banyak gan !
  • blogoads
    17/11/18
    Profil: https://www.blogger.com/profile/04600568469747069765
    sangat membantu.
  • Yus Yulianto
    5/9/18
    Profil: https://www.blogger.com/profile/05922413362091946434
    Kalau untuk WhatsApp gimana, Igniel?
    • Igniel
      5/9/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Ada disini https://www.igniel.com/2017/12/tombol-chat-langsung-ke-aplikasi.html