Fanpage và Website có thể coi là 2 kênh bán hàng chính của các shop online thời điểm hiện tại. Vậy làm cách nào liên kết 2 kênh này lại với nhau nhằm nâng cao chất lượng chăm sóc khách hàng và cải thiện doanh số? Trong bài viết này, mình sẽ chia sẻ với mọi người một phương pháp mới, sử dụng Tin nhắn Fanpage làm Facebook LiveChat trên website.

Tích hợp Tin nhắn Fanpage làm Facebook LiveChat vào website

Xem demo Tải về

Các bài viết tham khảo:

Cấu trúc cơ bản

<!doctype html>
<html class="no-js" lang="vi">
<head>
<meta charset="utf-8">
<title>Init HTML</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
 integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
 integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<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.9&appId=xxx";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</body>
</html>

Trong đó, xxx là ID ứng dụng Facebook của bạn. Cấu trúc trên bao gồm:

  • Bootstrap 3.3.7
  • jQuery 1.12.4
  • Animate.css
  • Facebook SDK JavaScript

Có nghĩa là website bạn cần sử dụng Bootstrap, nhúng Animate.css (có thể bỏ nếu không muốn hiệu ứng), jQuery và SDK JavaScript thì gần như website nào cũng có.

HTML của Facebook LiveChat

Chúng ta sẽ tùy chỉnh lại phần Modal của Bootstrap để làm giao diện Facebook LiveChat.

<div id="fb-livechat" class="fb-livechat animated bounceInUp hidden-xs">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" aria-label="Close" title="Đóng" onclick="removeFacebookLiveChat();"><span aria-hidden="true">×</span></button>
            <h5 class="modal-title">Gửi tin nhắn</h5>
        </div>
        <div class="modal-body">
            <div class="fb-page" data-href="https://www.facebook.com/inithtml/" data-tabs="messages" data-width="300" data-height="300" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
                <blockquote cite="https://www.facebook.com/inithtml/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/inithtml/">Init HTML</a></blockquote>
            </div>
        </div>
    </div>
</div>

Với bounceInUp là hiệu ứng xuất hiện.

CSS

Class .fb-livechat như sau.

.fb-livechat {
    width: 300px;
    height: 383px;
    position: fixed;
    bottom: 15px;
    right: 15px;
}

Facebook LiveChat

jQuery

Xây dựng hàm removeFacebookLiveChat() để đóng Facebook LiveChat.

function removeFacebookLiveChat() {
    $('#fb-livechat').addClass('bounceOutDown');
    $('#fb-livechat').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
        $(this).remove();
    });
}

Với bounceOutDown là hiệu ứng biến mất.

Nếu bạn không dùng hiệu ứng Animate.css, hàm removeFacebookLiveChat() chỉ cần như sau.

function removeFacebookLiveChat() {
    $('#fb-livechat').remove();
}

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

5/5 (1 bình chọn)
Chia sẻ
Series: Facebook Marketing