Tổng hợp những cách tích hợp chat Facebook vào Website - Thanh'sBlog - Blog công nghệ, chia sẻ niềm đam mê!

Tổng hợp những cách tích hợp chat Facebook vào Website Không rõ

23/05/2016 Đăng bởi: Lover Admin , Nhận xét(0) , Đọc(705) Lớn | Vừa | Nhỏ

Click quảng cáo giúp Website có kinh phí để duy trì!


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ố?

Highslide JS


Trong bài viết này, chúng tôi chia sẻ với mọi người 1 phương pháp hoàn toàn mới, sử dụng Fanpage message làm livechat trên website.

Một vài ưu điểm của phương pháp này:

1. Khách hàng dùng tài khoản Facebook để gửi tin và nhận phản hồi ngay cả khi đã thoát khỏi website.

2. Quản lý tin nhắn của khách hàng thông qua hộp thư của fanpage, không cần cài đặt ứng dụng riêng.

3. Thích hợp với các shop bán hàng cả trên kênh fanpage, muốn thống nhất 1 kênh chăm sóc khách hàng.

Hướng dẫn cách cài đặt:

Đối với web site code html các bạn làm như sau:

– Bước 1: Truy cập vào mã nguồn code của website. Nếu bạn không am hiểu về kĩ thuật web, hãy nhờ nhân viên đang quản lý website thực hiện công việc này giúp bạn.

– Bước 2: Chèn đoạn code dưới đây vào thẻ của website, thay đoạn link được bôi xanh bằng link fanpage của bạn muốn nhận tin nhắn từ người ghé thăm website:

<div style=”position:fixed; z-index:9999999; right:10px; bottom:10px;” class=”fb-page” data-tabs=”messages” data-href=”https://www.facebook.com/blog3d” data-width=”250″ data-height=”300″ data-small-header=”true” data-adapt-container-width=”true” data-hide-cover=”false” data-show-facepile=”true” data-show-posts=”false”></div>


– Bước 3: quay lại trang web để kiểm tra. Bạn phải đăng nhập Facebook trên trình duyệt đó mới hiển thị khung chat này.

Cách cài khung chát Facebook Fanpage trên web/blog

Đoạn code trên đã được chúng tôi tùy chỉnh để khung chat hiển thị ở góc phải màn hình, chạy theo cuộn chuột của người dùng. Các bạn có thể chỉnh sửa trực tiếp đoạn code trên để tùy biến khung chat phù hợp hơn (cần có kiến thức về HTML/CSS/JS).

Phương pháp này cũng có 1 số điểm hạn chế so với các phần mềm livechat chuyên nghiệp như: chỉ hiển thị khung chat khi người dùng đăng nhập Facebook trên trình duyệt đó, khả năng tùy biến giao diện còn kém…

Một đoạn code khác đẹp mắt không ké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:270px;overflow:hidden;display:none;background-color:#fff;}#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:#3a5795;border:0;border-bottom:1px solid #133783;z-index:9999999;margin-right:12px;font-size:18px;}#cfacebook a.chat_fb:hover{color:yellow;text-decoration:none;}</style> <script> jQuery(document).ready(function () { jQuery(“.chat_fb”).click(function() { jQuery(‘.fchat’).toggle(‘slow’); }); }); </script> <div id=”cfacebook”> <a href=”javascript:;” class=”chat_fb” onclick=”return:false;”><i class=”fa fa-facebook-square”></i> Hỗ trợ trực tuyến</a> <div class=”fchat”> <div class=”fb-page” data-tabs=”messages” data-href=”https://www.facebook.com/in3dplus/” 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> </div>


Đối với web site dùng mã nguồn Wordpress các bạn làm như sau:
Chèn đoạn mã chat vào file footer.php  trên hà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="https://www.facebook.com/thanhblog"
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 facebook ở trên, 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. Chèn đonạ script sau vào file footer.php
<script>  $(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();   }); }); </script>


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

.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;
}


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


Nhấn Like và +1 nếu thấy bài viết có ý nghĩa!

  • Đăng lên ZingMe
  • Đăng Lên Facebook
  • Đăng Lên Twitter
  • LinkedIn
  • Đăng lên ZingMe
  • Đăng Lên Google Buzz
  • Đăng Lên FriendFeed
  • Đăng Lên Reddit
  • Đăng Lên MySpace
  • Đăng Lên Yahoo! Bookmarks
  • Đăng Lên Digg
  • Đăng Lên Yahoo Buzz
  • Đăng Lên Baidu
Đăng bình luận lên Facebook của bạn:
Khuyến cáo: Không hổ trợ comment bằng facebook nhé!

Viết nhận xét

Tên gọi

Facebook của bạn

Email

You can also login with your OpenID:
HTML code BBcode Mặt cười Ẩn giấu Hãy nhớ [Đăng nhập] [Đăng ký. ]
               
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot

Bạn muốn hình đại diện hiển thị ngay bên cạnh lời bình luận của bạn không?
Hãy tham gia vào Gravatar và thiết lập hình đại diện hoàn toàn miễn phí!
Gravatar là gì? Avatar hình đại diện toàn cầu, bạn đã có avatar chưa? click đăng ký ngay!
TÌNH HÌNH WEBSITE

Thống kê Online trên website.

Hiện có 95 người đang online
(0 thành viên và 95 khách)

Tổng quan tình hình trên ThanhBlog.InFo

Thống kê đến thời điểm hiện tại số lượt khách ghé thăm blog là: 3018518
Số người đã ghé thăm blog trong ngày là: 3409
Số bài viết: 6562 Số comment hiện tại là: 2843 Số trích dẫn 1
Số thành viên đã đăng ký là: 23653
Nào cùng nâng ly chào mừng bạn daythoichu đến với ThanhBlog. Chúc các bạn có những giây phút bổ ích và hạnh phúc !