Hướng dẫn tích hợp Chat Facebook vào website rất đơn giản

Bạn đang tìm 1 công cụ chat để hỗ trợ khách hàng cho Website của mình? Bạn đã từng dùng qua Zopim Chat, vChat, Subiz chat,…nhưng tất cả đều bắt phải trả phí mới có thể chat với nhiều người và sử dụng thêm nhiều tiện ích và bạn không thích điều đó. Bạn đã từng nghĩ đến giải pháp tích hợp Chat Facebook vào website nhưng lại không biết làm sao để chèn vào. Vậy nên trong bài viết này, BlogCongDong.Com sẽ giúp bạn cách để thêm Chat Facebook vào website đơn giản nhất.

NHỮNG ƯU ĐIỂM CỦA FACEBOOK CHAT CHO WEBSITE

• Ưu điểm lớn nhất so với các công cụ chat khác là bạn có thể chat với rất nhiều người 1 lúc.
• Bạn có thể biết tên khách hàng, có thể xem thông tin về khách hàng qua facebook của họ.
• Khách hàng không phải khai báo thông tin hay đăng ký tài khoản để chat trên web của bạn.
• Lưu trữ tin nhắn của khách hàng không giới hạn, bạn có thể tìm lại tin nhắn bất cứ khi nào cần.
• Điểm đặc biệt là bạn có thể support khách hàng mọi lúc mọi nơi chỉ cần 1 chiếc smartphone có cài đặt trình quản lý Fanpage Facebook là có thể chat như khi online facebook chat với bạn bè.
• LiveChat Facebook cho website hiển thị tốt trên Mobile, iPad và PC.

NHƯỢC ĐIỂM CỦA CHAT FACEBOOK CHO WEBSITE

• Khách hàng của bạn phải có tài khoản Facebook và phải đăng nhập FB để có thể chat. Nhưng đây chỉ là 1 nhược điểm nhỏ vì đa số người dùng hiện nay đều có tài khoản facebook.
• Bạn không biết được khách hàng đang xem sản phẩm gì, đã xem những sản phẩm nào như trình chat Zopim.

HƯỚNG DẪN TÍCH HỢP CHAT FACEBOOK VÀO WEBSITE

 Để tích hợp Chat Facebook vào web thì bạn chỉ cần làm theo hướng dẫn đơn giản dưới đây.

Bạn chỉ cần copy và paste code dưới đây vào file footer.php cho website WordPress của bạn. Bạn sử dụng phần mềm FTP tìm sửa file footer.php trong đường dẫn /public_html/wp-content/themes/theme-cua-ban/footer.php hoặc chỉnh sửa trực tiếp trong trang quản trị WordPress bằng cách vào Appearance (Giao diện) -> Editor (Sửa) rồi tìm file footer.php. Sau khi mở được file footer.php lên bạn chỉ cần chèn code vào trước thẻ đóng </body> và sửa trong code đoạn https://www.facebook.com/blogcongdongcom bằng link fanpage của bạn. Sau khi sửa xong file footer.php xong thì lưu lại và xem kết quả nhé.

CODE TÍCH HỢP CHAT FACEBOOK VÀO WEBSITE WORDPRESs

<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: #0065BF;
border: 0;
border-bottom: 1px solid #0065BF;
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/blogcongdongcom" 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/blogcongdongcom"><i class="fa fa-facebook-square"></i> Fanpage BlogCongDong.Com</a></div>
</div>
<input type="hidden" id="tchat" value="0"/>
</div>

sau khi thêm code tích hợp Facebook chat vào web bạn sẽ thấy giao diện chat như sau:

HƯỚNG DẪN HỖ TRỢ LIVECHAT FACEBOOK TRÊN ĐIỆN THOẠI

Để có thể hỗ trợ khách hàng của bạn từ điện thoại di dộng thì bạn cần có đủ các điều kiện sau:

• Điện thoại phải được kết nói Internet bằng Wifi hoặc 3G.
• Điện thoại phải được cài đặt ứng dụng trình quản lý trang Facebook

Sau khi đã cài đặt đủ những thứ trên bạn truy cập vào ứng dụng để chat như khi bạn chat trên facebook. Vậy là bạn có thể hỗ trợ khách hàng qua facebook chat trên website.

Để cài ứng dụng trình quản lý trang Facebook cho điện thoại bạn chọn ứng dụng phù hợp với hệ điều hành của bạn để cài đặt.

Cài đặt ứng dụng trình quản lý trang Facebook

Bấm vào các link bên dưới để cài đặt  Android  IOS (Iphone/Ipad) Windows Phone

Lời kết

Với cách này bạn có thể hỗ trợ khách hàng của mình qua facebook chat cực tốt. Hi vọng với bài viết chia sẻ cách tạo khung Chat Facebook cho website này bạn có thể tạo cho website của mình khung support giúp khách hàng dễ dàng tương tác với bạn và bạn có thể bán được nhiều hàng hơn nhé. Chúc các bạn thành công!