Tạo live chat Facebook Hỗ Trợ Khách Hàng

Nếu để ý vào góc phải bên dưới bạn sẽ thấy nhiều website ,Blog có khung chat. Đây được gọi facebook Chat hoặc Livechat Facebook khác với Facebook Messenger của Facebook nhé vì nó tích hợp được trên Website.

Ưu điểm livechat Facebook:

Sẽ có thể chat lại với khách hàng bất cứ lúc nào miễn là khách hàng đang dùng Facebook

Nhược điểm livechat Facebook:

- Bắt buộc KH phải có Facebook và đăng nhập vào facebook để chat
- Sẽ không chat trực tiếp được trong khung chat mà phải chuyển qua Facebook để trò chuyện

Nào chúng ta cùng thực hiện để tạo tiện ích này nào.

Hướng dẫn cài đặt Facebook Chat vào Blogger

Chèn tất cả đoạn code bên dưới vào trên thẻ đóng </body> nằm trong mẫu

[Code]:

var f_chat_vs = "Version 2.1";

var f_chat_domain = "http://starthao-it.blogspot.com"; /* Thay Domain của bạn */

var f_chat_name = "Tư vấn khách hàng";

var f_chat_star_1 = "Chào bạn!";

var f_chat_star_2 = "Bạn sẽ được tư vấn về các dịch vụ Facebook không tên, thủ thuật Facebook, máy tính, MMO? Yêu cầu tại chatbox này!<br/><em>Gửi vài giây trước</em>";

var f_chat_star_3 = "<a href='javascript:;' id='f_bt_start_chat' onclick='f_bt_start_chat()'>Bắt đầu Chat</a>";

var f_chat_star_4 = "Chú ý: Bạn phải đăng nhập <a href='http://facebook.com/' rel='nofollow' target='_blank'>Facebook</a> mới có thể trò chuyện.";

var f_chat_fanpage = "Blog-Star-NVT-It-669097806629546"; /* Thay lại địa chỉ Fanpage*/

var f_chat_background_title = "#F77213";

var f_chat_color_title = "#fff";

var f_chat_cr_vs = 21; /* Version ID */

var f_chat_vitri_manhinh = "right:10px;";

</script>

window.jQuery || document.write('<script src="http://jquery.com/jquery-wp-content/themes/jquery/js/jquery-1.11.2.min.js"><\/script>');

(function (d, s, a) {

var b, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(a)) return;

b = d.createElement(s);

b.id = a;

b.src = '//connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.5';

fjs.parentNode.insertBefore(b, fjs)

} (document, 'script', 'facebook-jssdk'));

var $ = jQuery.noConflict();

$(document).ready(function () {

$("#f_chat_name").html(f_chat_name);

$("#f_enter_1").html(f_chat_star_1);

$("#f_enter_2").html(f_chat_star_2);

$("#f_enter_4").html(f_chat_star_4);

$("#f_chat_source").html(".<i class='fa fa-question-circle'></i> LiveChat Facebook<label>" + f_chat_vs + "</label>");

setTimeout(function () {

f_ck_chat()

100)

});

function fb_e_html(a, b) {

try {

document.getElementById(a).innerHTML = b

} catch(err) {}

}

function fb_e_style(a, b) {

try {

document.getElementById(a).style.display = b

} catch(err) {}

}

function check_fist_vist_f() {

var _ = f_read_cki("check_fist_vist_f");

(0 == _ || "" == _) && (fb_eshow("f-chat-conent"), f_create_cki("check_fist_vist_f", "1", 1), f_create_cki("f_chat_open", "1", 1))

}

function chat_f_close() {

fb_ehide('b-c-facebook'),

f_create_cki('chat_f_close', 1, 1),

$('body').find('.zopim').remove(),

fb_eshow('chat_f_b_smal'),

on_playsound('click')

}

function chat_f_show() {

f_create_cki('chat_f_close', '0', 1),

fb_eshow('b-c-facebook'),

fb_eshow('f-chat-conent'),

fb_ehide('chat_f_b_smal')

}

function f_bt_start_chat() {

f_create_cki('f_bt_start_chat', '1', 10),

fb_ehide('fb_chat_start'),

fb_ehide('fb_alert_num'),

on_playsound('click')

}

function f_c_start_chat() {

var t = f_read_cki('f_bt_start_chat');

0 == t || '' == t ? (fb_eshow('fb_chat_start'), fb_eshow('fb_alert_num'), f_chat_step()) : (fb_ehide('fb_chat_start'), fb_ehide('fb_alert_num'))

}

function b_f_chat() {

var t = f_read_cki('f_chat_open');

0 == t || '' == t ? (fb_eshow('f-chat-conent'), f_create_cki('f_chat_open', '1', 1)) : (fb_ehide('f-chat-conent'), f_create_cki('f_chat_open', '0', 1)),

on_playsound('click')

}

function f_ck_chat() {

check_fist_vist_f();

f_c_start_chat();

var t = f_read_cki('chat_f_close');

if ('' == t || 0 == t || '0' == t) {

fb_eshow('b-c-facebook'),

fb_ehide('chat_f_b_smal');

var e = f_read_cki('f_chat_open');

(1 == e || '1' == e) && fb_eshow('f-chat-conent')

} else fb_eshow('chat_f_b_smal'),

fb_ehide('b-c-facebook')

}

function f_chat_step() {

f_enter_chat('1', 3500),

f_enter_chat('2', 5500),

f_enter_chat('3', 6e3),

f_enter_chat('4', 7e3)

}

function f_enter_chat(t, e) {

setTimeout(function () {

fb_eshow('f_enter_' + t)

e),

setTimeout(function () {

on_playsound('door_bell')

e),

setTimeout(function () {

fb_e_html('fb_alert_num', t)

}

function fb_eshow(t) {

fb_e_style(t, 'block')

}

function fb_ehide(t) {

fb_e_style(t, 'none')

}

function f_create_cki(t, e, n) {

if (n) {

var o = new Date;

o.setTime(o.getTime() + 24 * n * 60 * 60 * 1e3);

var c = '; expires=' + o.toGMTString()

} else var c = '';

document.cookie = t + '=' + e + c + '; path=/'

}

function f_read_cki(t) {

for (var e = t + '=', n = document.cookie.split(';'), o = 0; o < n.length; o++) {

for (var c = n[o];

' ' == c.charAt(0);) c = c.substring(1, c.length);

if (0 == c.indexOf(e)) return c.substring(e.length, c.length)

}

return ''

}

function on_playsound(t) {

1 == web_sound && $.ionSound.play(t)

}

function ionSound() {

1 == web_sound && $.ionSound({

sounds: ['click', 'door_bell'],

path: f_chat_domain + '/livechat/sounds/',

multiPlay: !0,

volume: '1.0'

})

}

var web_sound = !0;

jQuery(document).ready(function (t) {

t(window).scroll(function () {

var e = t(window).width();

680 >= e ? f_create_cki('f_chat_open', '0', 1) : f_create_cki('f_chat_open', '1', 1)

})

}),

setTimeout(function () {

f_ck_chat()

100);

var $ = jQuery.noConflict(); !

function (t) {

if (!t.ionSound) {

var e, n, o, c, _ = {},

f = {},

a = !1,

i = function (e) {

var c, a; - 1 !== e.indexOf(':') ? (c = e.split(':')[0], a = e.split(':')[1]) : c = e,

f[c] = new Audio,

n = f[c].canPlayType('audio/mp3'),

o = 'probably' === n || 'maybe' === n ? _.path + c + '.mp3': _.path + c + '.ogg',

t(f[c]).prop('src', o),

f[c].load(),

f[c].preload = 'auto',

f[c].volume = a || _.volume

u = function (t) {

var e, n, o, c;

if ( - 1 !== t.indexOf(':') ? (n = t.split(':')[0], o = t.split(':')[1]) : n = t, e = f[n], 'object' == typeof e && null !== e) if (o && (e.volume = o), _.multiPlay || a) {

if (_.multiPlay) if (e.ended) e.play();

else {

try {

e.currentTime = 0

} catch(i) {}

e.play()

}

} else e.play(),

a = !0,

c = setInterval(function () {

e.ended && (clearInterval(c), a = !1)

250)

l = function (t) {

var e = f[t];

if ('object' == typeof e && null !== e) {

e.pause();

try {

e.currentTime = 0

} catch(n) {}

}

r = function (t) {

var e = f[t];

if ('object' == typeof e && null !== e) {

try {

f[t].src = ''

} catch(n) {}

f[t] = null

}

};

t.ionSound = function (n) {

if (_ = t.extend({

sounds: ['water_droplet'],

path: f_chat_domain + '/livechat/sounds/',

multiPlay: !0,

volume: '0.5'

n), e = _.sounds.length, 'function' == typeof Audio || 'object' == typeof Audio) for (c = 0; e > c; c += 1) i(_.sounds[c]);

t.ionSound.play = function (t) {

u(t)

t.ionSound.stop = function (t) {

l(t)

t.ionSound.kill = function (t) {

r(t)

}

t.ionSound.destroy = function () {

for (c = 0; e > c; c += 1) f[_.sounds[c]] = null;

e = 0,

t.ionSound.play = function () {},

t.ionSound.stop = function () {},

t.ionSound.kill = function () {}

}

} (jQuery),

ionSound();

var fb_vs_new = '2.0';

/* Javascript update 05-11-2015: add small chat click*/

$(document).ready(function () {

$("#f_enter_3").html(f_chat_star_3);

$( "#chat_f_b_smal" ).click(function() {on_playsound('click');});

});

/* Style update 05-11-2015: Fix style chat */

</script>

<a class='chat_f_vt' id='chat_f_b_smal' onclick='chat_f_show()' title='Mở hộp Chat'><i class='fa fa-comments title-f-chat-icon'/> Tư vấn khách hàng</a><div class='chat_f_vt' id='b-c-facebook'><div class='chat-f-b' id='chat-f-b' onclick='b_f_chat()'><i class='fa fa-comments title-f-chat-icon'/><label id='f_chat_name'/><span id='fb_alert_num'>1</span><div id='t_f_chat'><a class='chat-left-5' href='javascript:;' id='chat_f_close' onclick='chat_f_close()'>x</a></div></div><div class='f-chat-conent' id='f-chat-conent'><script>document.write("<div class='fb-page' data-adapt-container-width='true' data-height='310' data-hide-cover='true' data-href='https://www.facebook.com/"+f_chat_fanpage+"' data-show-facepile='true' data-show-posts='true' data-small-header='true' data-tabs='messages' data-width='250'/>");</script><div id='fb_chat_start'><div class='msg_b fb_hide' id='f_enter_1'/><div class='msg_b fb_hide' id='f_enter_2'/><br/><p class='fb_hide' id='f_enter_3'><a href='javascript:;' id='f_bt_start_chat' onclick='f_bt_start_chat()'>Bắt đầu Chat</a></p><br/><div class='fb_hide' id='f_enter_4'/></div><div class='chat-single' id='f_chat_source'/></div></div>

Đoạn code dưới đây mình đã tối ưu bạn. Bạn có thể sử dụng code sau:

<script type='text/javascript'>
var f_chat_vs = "Version 2.1";
var f_chat_domain = "Starthao-it.blogspot.com";
var f_chat_name = "Tư vấn khách hàng";
var f_chat_star_1 = "Chào bạn!";
var f_chat_star_2 = "Bạn sẽ được tư vấn về các dịch vụ Facebook không tên, thủ thuật Facebook, máy tính, MMO? Yêu cầu tại chatbox này!<br/><em>Gửi vài giây trước</em>";
var f_chat_star_3 = "<a href='javascript:;' id='f_bt_start_chat' onclick='f_bt_start_chat()'>Bắt đầu Chat</a>";
var f_chat_star_4 = "Chú ý: Bạn phải đăng nhập <a href='http://facebook.com/' rel='nofollow' target='_blank'>Facebook</a> mới có thể trò chuyện.";
var f_chat_fanpage = "Blog-Star-NVT-It-669097806629546"; /* Đây là địa chỉ Fanpage*/
var f_chat_background_title = "#F77213";
var f_chat_color_title = "#fff";
var f_chat_cr_vs = 21; /* Version ID */
var f_chat_vitri_manhinh = "right:10px;";
</script>
<script>
var $ = jQuery.noConflict();
$(document).ready(function () {
$("#f_chat_name").html(f_chat_name);
$("#f_enter_1").html(f_chat_star_1);
$("#f_enter_2").html(f_chat_star_2);
$("#f_enter_4").html(f_chat_star_4);
$("#f_chat_source").html(".<i class='fa fa-question-circle'></i> LiveChat Facebook<label>" + f_chat_vs + "</label>");
setTimeout(function () {
f_ck_chat()
},
100)
});
function fb_e_html(a, b) {
try {
document.getElementById(a).innerHTML = b
} catch(err) {}
}
function fb_e_style(a, b) {
try {
document.getElementById(a).style.display = b
} catch(err) {}
}
function check_fist_vist_f() {
var _ = f_read_cki("check_fist_vist_f");
(0 == _ || "" == _) && (fb_eshow("f-chat-conent"), f_create_cki("check_fist_vist_f", "1", 1), f_create_cki("f_chat_open", "1", 1))
}
function chat_f_close() {
fb_ehide('b-c-facebook'),
f_create_cki('chat_f_close', 1, 1),
$('body').find('.zopim').remove(),
fb_eshow('chat_f_b_smal'),
on_playsound('click')
}
function chat_f_show() {
f_create_cki('chat_f_close', '0', 1),
fb_eshow('b-c-facebook'),
fb_eshow('f-chat-conent'),
fb_ehide('chat_f_b_smal')
}
function f_bt_start_chat() {
f_create_cki('f_bt_start_chat', '1', 10),
fb_ehide('fb_chat_start'),
fb_ehide('fb_alert_num'),
on_playsound('click')
}
function f_c_start_chat() {
var t = f_read_cki('f_bt_start_chat');
0 == t || '' == t ? (fb_eshow('fb_chat_start'), fb_eshow('fb_alert_num'), f_chat_step()) : (fb_ehide('fb_chat_start'), fb_ehide('fb_alert_num'))
}
function b_f_chat() {
var t = f_read_cki('f_chat_open');
0 == t || '' == t ? (fb_eshow('f-chat-conent'), f_create_cki('f_chat_open', '1', 1)) : (fb_ehide('f-chat-conent'), f_create_cki('f_chat_open', '0', 1)),
on_playsound('click')
}
function f_ck_chat() {
check_fist_vist_f();
f_c_start_chat();
var t = f_read_cki('chat_f_close');
if ('' == t || 0 == t || '0' == t) {
fb_eshow('b-c-facebook'),
fb_ehide('chat_f_b_smal');
var e = f_read_cki('f_chat_open');
(1 == e || '1' == e) && fb_eshow('f-chat-conent')
} else fb_eshow('chat_f_b_smal'),
fb_ehide('b-c-facebook')
}
function f_chat_step() {
f_enter_chat('1', 3500),
f_enter_chat('2', 5500),
f_enter_chat('3', 6e3),
f_enter_chat('4', 7e3)
}
function f_enter_chat(t, e) {
setTimeout(function () {
fb_eshow('f_enter_' + t)
},
e),
setTimeout(function () {
on_playsound('door_bell')
},
e),
setTimeout(function () {
fb_e_html('fb_alert_num', t)
},
e)
}
function fb_eshow(t) {
fb_e_style(t, 'block')
}
function fb_ehide(t) {
fb_e_style(t, 'none')
}
function f_create_cki(t, e, n) {
if (n) {
var o = new Date;
o.setTime(o.getTime() + 24 * n * 60 * 60 * 1e3);
var c = '; expires=' + o.toGMTString()
} else var c = '';
document.cookie = t + '=' + e + c + '; path=/'
}
function f_read_cki(t) {
for (var e = t + '=', n = document.cookie.split(';'), o = 0; o < n.length; o++) {
for (var c = n[o];
' ' == c.charAt(0);) c = c.substring(1, c.length);
if (0 == c.indexOf(e)) return c.substring(e.length, c.length)
}
return ''
}
function on_playsound(t) {
1 == web_sound && $.ionSound.play(t)
}
function ionSound() {
1 == web_sound && $.ionSound({
multiPlay: !0,
volume: '1.0'
})
}
var fb_vs_new = '2.0';
$(document).ready(function () {
$("#f_enter_3").html(f_chat_star_3);
$( "#chat_f_b_smal" ).click(function() {on_playsound('click');});
});
</script>
<div id='fb-root'/>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.8&appId=1491225694450817";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<a class='chat_f_vt' id='chat_f_b_smal' onclick='chat_f_show()' title='Mở hộp Chat'><i class='fa fa-comments title-f-chat-icon'/> Tư vấn khách hàng</a><div class='chat_f_vt' id='b-c-facebook'><div class='chat-f-b' id='chat-f-b' onclick='b_f_chat()'><i class='fa fa-comments title-f-chat-icon'/><label id='f_chat_name'/><span id='fb_alert_num'>1</span><div id='t_f_chat'><a class='chat-left-5' href='javascript:;' id='chat_f_close' onclick='chat_f_close()'>x</a></div></div><div class='f-chat-conent' id='f-chat-conent'><script>document.write("<div class='fb-page' data-adapt-container-width='true' data-height='310' data-hide-cover='true' data-href='https://www.facebook.com/"+f_chat_fanpage+"' data-show-facepile='true' data-show-posts='true' data-small-header='true' data-tabs='messages' data-width='250'/>");</script><div id='fb_chat_start'><div class='msg_b fb_hide' id='f_enter_1'/><div class='msg_b fb_hide' id='f_enter_2'/><br/><p class='fb_hide' id='f_enter_3'><a href='javascript:;' id='f_bt_start_chat' onclick='f_bt_start_chat()'>Bắt đầu Chat</a></p><br/><div class='fb_hide' id='f_enter_4'/></div><div class='chat-single' id='f_chat_source'/></div></div>

Chúc bạn thành công!

THAM GIA TRANH TOP BÌNH LUẬN NGAY!

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy).

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Hãy xem hướng dẫn để bình luận theo đúng ý nhé.

Hướng dẫn bình luận

Tiện ích

Dùng những công cụ ở dưới để viết chữ theo ý muốn, chèn link

Chèn hình ảnh

Nếu muốn chèn hình ảnh, video từ Youtube vào khung bình luận, bạn chỉ việc paste trực tiếp link hình ảnh, link video youtube vào đó

Upload ảnh

Sử dụng công cụ này để upload ảnh nếu bạn chưa upload

Chèn một đoạn Code

Đầu tiên sử dụng công cụ mã hóa code phía dưới để mã hóa đoạn code muốn chèn.
Sau đó dùng thẻ [code] CODE_ĐÃ_MÃ_HÓA [/code] hoặc [pre] CODE_ĐÃ_MÃ_HÓA [/pre] rồi paste vào khung bình luận

Hiện EmoticonsẨn Emoticons Hiện Upload ảnhẨn Upload ảnh

Click vào icon để bôi đen mã, sau đó copy mã
Ctrl + V hoặc Right click chọn Paste vào ô nhận xét để chèn Emoticon
Nếu dùng nhiều Emoticon giữa chúng ngăn cách bằng 1 dấu cách

Mã Hóa Code

Convert &
Convert '
Convert "
Convert <
Convert >

Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link

Cập nhật mới trên Blog StarThảo-IT

Tạo live chat Facebook Hỗ Trợ Khách Hàng

Ưu điểm livechat Facebook:

Nhược điểm livechat Facebook:

Hướng dẫn cài đặt Facebook Chat vào Blogger

Người Phán Xử: StarThảo-IT

BÀI VIẾT CÙNG CHUYÊN MỤC

THAM GIA TRANH TOP BÌNH LUẬN NGAY!

Một số lưu ý khi bình luận

Hướng dẫn bình luận

Tiện ích

Chèn hình ảnh

Upload ảnh

Chèn một đoạn Code