Hướng dẫn tạo live chat bằng Fanpage facebook

Hỗ trợ cho khách hàng trên website

Ưu điểm là tất cả các tin nhắn đều được lưu trong inbox của Fanpage của bạn.

Nhược điểm là khách hàng phải đăng nhập facebook mới có thể chat được.

livechat

Cách 1: Hướng dẫn cơ bản:

Quẵng cục này vô Footer, Header, Single hay đâu đó trong web của bạn. (nhớ đổi url fanpage)

<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.5";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div style="position:fixed; z-index:9999999; right:10px; bottom:10px;" class="fb-page" data-tabs="messages" data-href="https://www.facebook.com/dienlanhsodo" data-width="250" data-height="300" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"></div>

Hướng dân nâng cao:

Chỉ hiển thị trên Desktop, ẩn đối với điện thoại hoặc máy tính bảng.
Thêm đoạn css này:

@media screen and (min-width: 0px) and (max-width: 720px) {
.fb-page {
display: none;
}
.mobile-hide {
display: none;
}
}

Chỉ load javascript trên máy bàn không load với smatphone:

if (screen && screen.width >= 720) {
(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.5";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
}

Cách 2: Ẩn hiện thanh hỗ trợ bên góc trái màn hình

Giống như: http://dienlanhsodo.com

<script>
jQuery(document).ready(function(){jQuery(".togglec").hide();jQuery(".togglet").click(function(){jQuery(this).toggleClass("toggleta").next(".togglec").slideToggle("normal");return true;});});</script>
<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.5";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="toggle clearfix" style="position:fixed; z-index:9999999; right:5px; bottom:0px;">
<div class="togglet">Hỗ trợ trực tuyến</div>
<div class="togglec clearfix" style="display: none;">
<div id="fb-root"></div>
<div class="fb-page" data-tabs="messages" data-href="https://www.facebook.com/dienlanhsodo" data-width="250" data-height="300" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"></div>
</div>
</div>

Chú ý: hiện tại không chat trực tiếp trên website được nữa, có thể do FaceBook update.

Tham khảo: hisella.com

Dương Triều Blog © 2016