Thứ Năm, 21 tháng 9, 2017

Tích hợp Live Chat Facebook vào website

Thành quả mà bạn có được là website của bạn có thêm khung chat như ở website https://nicklmht.vn này đây.


Bước 1: Dán đoạn mã sau vào thẻ body của website bạn.

<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.10";
  fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

<div class="fbchatbox hidden-xs" style="position:fixed;right:10px;bottom:0;z-index:9999">
    <div class="fb-page" data-href="LinkFanpage" data-small-header="true" data-adapt-container-width="false" data-height="300" data-width="300" data-hide-cover="true" data-show-facepile="true" data-show-posts="false" data-tabs="messages"><div class="fb-xfbml-parse-ignore"><blockquote cite="LinkFanpage"><a href="LinkFanpage">LinkFanpage</a></blockquote></div></div>
    <span class="hide" id="closefbchat" style="right:0px;white-space: nowrap;position:absolute;bottom:299px;width:300px;padding:7px; background: #44619D;color: #fff;cursor: pointer;">Tắt Hỗ Trợ</span>
</div>

Tiếp đó bạn thay LinkFanpage thành địa chỉ Fanpage của bạn vào nhé.

Bước 2: Thêm thẻ style sau vào trong thẻ head:

    <style>
        .hide{
            display:none;
        }
    </style>

Bước 3: Thêm 2 thẻ script sau vào trong thẻ head:

<script src= "https://code.jquery.com/jquery-3.2.1.min.js"
            integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="

            crossorigin="anonymous"></script>

<script>
    if (localStorage.getItem("fbchatclose") == 1) {

        jQuery('.fb-page').toggleClass('hide');

        jQuery('#closefbchat').html('<i class="fa fa-comments fa-2x"></i> Hỗ Trợ Khách Hàng').css({ 'bottom': 0 });
    }

    setTimeout(function () {
        $("#closefbchat").removeClass("hide");
    }, 1000);


    jQuery('#closefbchat').click(function () {
        jQuery('.fb-page').toggleClass('hide');
        if (jQuery('.fb-page').hasClass('hide')) {
            localStorage.setItem("fbchatclose", 1);
           
            jQuery('#closefbchat').html('<i class="fa fa-comments fa-2x"></i> Hỗ Trợ Khách Hàng').css({ 'bottom': 0 });
        }
        else {
            localStorage.setItem("fbchatclose", 0);
            jQuery('#closefbchat').text('Tắt Hỗ Trợ').css({ 'bottom': 299 });
        }
    });
    </script>

Và đây là thành quả của mình.



Chúc bạn tích hợp thành công nhé. 


EmoticonEmoticon