Tích Hợp Chat Live Facebook Vào Website

Chào các bạn, hôm nay mình hướng dẫn các bạn một đoạn code ngắn tích hợp Chat Live Facebook vào Website mã nguồn wordpress!

• Giúp website của các bạn tương tác với khách hàng chuyên nghiệp, hiệu quả cao
• Để tích hợp khung chat facebook lên website bạn cần thêm những dòng code vào những file sau:
• Chèn đoạn mã chat vào file footer.php trên hàm <?php wp_footer(); ?>

Mã:

<div class="support-icon-right">
<h3><i class="fa fa-hand-o-right"></i> Chat Live Facebook</h3>
<div class="online-support">
<div
class="fb-page"
data-href="[COLOR=#ff0000]https://www.facebook.com/***[/COLOR]"
data-small-header="true"
data-height="300"
data-width="250"
data-tabs="messages"
data-adapt-container-width="false"
data-hide-cover="false"
data-show-facepile="false"
data-show-posts="false">
</div>
</div>
</div>

Lưu ý: thay link màu đỏ, thành link page của các bạn!

Tiếp theo bạn chèn đoạn js xử lý ẩn hiện khung chat

Mã:

$(document).ready(function(){
  $('.online-support').hide();
  $('.support-icon-right h3').click(function(e){
    e.stopPropagation();
    $('.online-support').slideToggle();
  });
  $('.online-support').click(function(e){
    e.stopPropagation();
  });
  $(document).click(function(){
    $('.online-support').slideUp();
  });
});

Và cuối cùng trang trí khung cho nó đẹp xíu, các bạn chèn đoạn sau vào file style.css

Mã:

.support-icon-right {
    background: #F0F3EF;
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 9;
    overflow: hidden;
    width: 250px;
    color: #fff!important;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.support-icon-right h3 {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 13px!important;
    font-family: Arial;
    color: #fff!important;
    margin: 0!important;
    background-color: #5CB85C;
    cursor: pointer;
}

.support-icon-right i {
    background-color: #D9534F;
    padding: 15px 15px 12px 15px;
}
.online-support {
    display: none;
}

Đây là hình ảnh sau khi các bạn đã add xong! Chúc các bạn thành công, và tương tác với khách hàng tốt!


Nguồn : http://***/threads/tich-hop-chat-live-facebook-vao-website.2472/