Hướng dẫn cài đặt LiveChat Facebook cho Website

Vnraovat.net - Diễn đàn rao vặt chất lượng - miễn phí - hiệu quả - link dofollow - Hướng dẫn bạn đọc cách cài đặt và tạo LiveChat Facebook vào Website hiển thị tốt trên Mobile, iPad và PC. Bài viết có cung cấp bộ mã nguồn PHP giúp bạn tự tạo Box Chat chuyên nghiệp!

Tải về máy tính​

Download về máy tính và làm theo hướng dẫn sử dụng dưới đây
(Xem Demo sẽ thấy 1 Box chat mới ở cuối màn hình)​

LiveChat của Facebook không thực sự chuyên nghiệp như các phần mềm Chat như Zopim, LiveChat, vChat… nhưng nó có một lợi thế giúp bạn tương tác trực tiếp được với khách hàng qua hệ thống Chat Fanpage không hỗ trợ với Group và trang cá nhân. Điểm yếu của tính năng này rất đơn giản nếu khách hàng không có tài khoản Facebook không thể chat được. Và không biết khách hàng đang xem tài liệu gì trên trang đến từ đâu, điều này cũng ảnh hưởng không nhỏ tới việc tư vấn cho khách hàng. Tuy nhiên tính năng này sẽ hữu dụng với khách hàng đa phần từ Facebook, vậy bạn là chủ Website hãy làm theo hướng dẫn của tôi để tự tích hợp LiveChat Facebook vào web của mình nhé.
Bước 1: Hướng dẫn tích hợp vào website
Có 2 cách tích hợp trực tiếp hoặc gián tiếp.

Cách 1: Tích hợp trực tiếp
Sử dụng mã nguồn dưới đây đưa vào file footer.php nếu bạn Sử dụng WordPress bằng cách Vào bằng phần mềm FTP hoặc qua hệ thống quản lý file của Cpanel host -> wp-content -> themes -> theme của web -> footer.php sau đó chèn đoạn mã trên vào trước thẻ đóng body và thay bkasoft.luyen bằng tên Fanpage Facebook của bạn-> Lưu lại và xem kết quả.

Mã nguồn 1 (nhiều người dùng)

Mã:

<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>
<style>
    #cfacebook{
        position: fixed;
        bottom: 0px;
        right: 8px;
        z-index: 999999999999999;
        width: 250px; height: auto;
        box-shadow: 6px 6px 6px 10px rgba(0,0,0,0.2);
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        overflow: hidden;
    }
    #cfacebook .fchat{float: left; width: 100%; height: 295px; overflow: hidden; display: none; background-color: #fff;}
    #cfacebook .fchat .chat-single{float: left; line-height: 25px; line-height: 25px; color: #333; width: 100%;}
    #cfacebook .fchat .chat-single a{float: right; text-decoration: none; margin-right: 10px; color: #888; font-size: 12px;}
    #cfacebook .fchat .chat-single a:hover{color: #222;}

    #cfacebook .fchat .fb-page{margin-top: -130px; float: left;}
    #cfacebook a.chat_fb{
        float: left;
        padding: 0 25px;
        width: 250px;
        color: #fff;
        text-decoration: none;
        height: 40px;
        line-height: 40px;
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);       
   
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAqCAMAAABFoMFOAAAAWlBMV…8/UxBxQDQuFwlpqgBZBq6+P+unVY1GnDgwqbD2zGz5e1lBdwvGGPE6OgAAAABJRU5ErkJggg==);
        background-repeat: repeat-x;
        background-size: auto;
        background-position: 0 0;
        background-color: #F77213;
        border: 0;
        border-bottom: 1px solid #F77213;
        z-index: 9999999;
        margin-right: 12px; font-size: 18px;}
   #cfacebook a.chat_fb:hover{color: yellow; text-decoration: none;}
</style>
<script>
    function fchat()
    {
            var tchat= document.getElementById("tchat").value;
            if(tchat==0 || tchat=='0')
            {               
                document.getElementById("fchat").style.display = "block";
                document.getElementById("tchat").value=1;
            }else{
                document.getElementById("fchat").style.display = "none";
                document.getElementById("tchat").value=0;
            }            
    }
    setTimeout(function() {document.getElementById("fchat").style.display = "block";}, 6000);
</script>
<div id="cfacebook">
    <a href="javascript:;" class="chat_fb" onclick="javascript:fchat();"><i class="fa fa-comments"></i> Hỗ trợ trực tuyến</a>
    <div id="fchat" class="fchat">
        <div class="fb-page" data-tabs="messages" data-href="https://www.facebook.com/bkasoft.luyen" data-width="250" data-height="400" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"></div>
        <div class="chat-single"><a target="_blank" href="https://www.facebook.com/bkasoft.luyen"><i class="fa fa-facebook-square"></i> Fanpage Hoàng Luyến</a></div>
    </div>
    <input type="hidden" id="tchat" value="0"/>
</div>

Kết quả

Box LiveChat Facebook đã được tích hợp vào web


Bước 2: Hướng dẫn kết nối LiveChat với điện thoại
Để kết nối phần mềm LiveChat Facebook với điện thoại di động có 3 điều kiện bắt buộc:

Thứ 1: Điện thoại phải kết nối với Internet Wifi hoặc 3G

Thứ 2: Điện thoại phải cài đặt ứng dụng trình quản lý trang facebook (trên Android) , trên Apple store bạn cài trình quản lý trang facebook này hoặc nếu bạn dùng Window Phone thì Download và cài đặt trình quản lý trang Facebook tại đây.

Thứ 3: Bạn chỉ có thể tích hợp LiveChat với Fanpage của Facebook không chấp nhận trang cá nhân và Group.

Hướng dẫn: Sau khi bạn đã tạo mã nhúng xong ở bước 1, bạn hãy cài đặt trình quản lý trang phù hợp với dòng điện thoại mình vừa nêu ở trên và đăng nhập. Mỗi lần có khách gửi câu hỏi chat trên Web lập tức trên điện thoại của bạn sẽ rung chuông như vậy rất tiện nắm bắt và trao đổi. Nếu bạn muốn phân quyền cho nhiều người hỗ trợ Chat với bạn vì lượng Chat lớn bạn có thể cấp quyền Admin cho 1 nick facebook khác nhé. Như thế là xong rồi ạ, các bạn có thể cài cho web cần support nhiều support nhanh và chủ yếu khách hàng trên Facebook và nhớ cho mình ý kiến về trải nghiệm nhé.

Kết luận
Đây là một thủ thuật tích hợp và tạo livechat Facebook vào website miễn phí, bạn hãy cân nhắc sử dụng nó nhé bởi tính năng này cũng có những hạn chế nhất định. Nhưng rất nhiều người cần nên mình chia sẻ trong bài viết này, chúc bạn cài đặt thành công!

 

cài đặt livechat này thì có tự động mời chat ko ạ?

 

hy vọng chức năng này sớm dc xây dựng thì ăn đứt các hệ thống live chat hiện nay

 

Bài viết rất hữu ích, giờ mới biết. trước giờ toàn dùng live chat
Thanks bạn nha

 

Muốn sử dụng nhưng không áp dụng cho IOS đúng ko chủ thớt !
Tính năng của nó rất hay ! tiếc là ko có con nào Android

 

Rất tiện lợi nhưng mình dùng IOS rồi tiếc quá không có android nào

 

LiveChat của Facebook không thực sự chuyên nghiệp như các phần mềm Chat như Zopim, LiveChat, vChat

 

Công nhận là không chuyên nghiệp, nhưng nó có cái tiện hơn là tương tác với người dùng tốt hơn