[Hướng dẫn] Thêm box gửi tin nhắn facebook trên website

Bài viết sẽ hướng dẫn cách tạo box tư vấn khách hàng bằng cách tích hợp facebook messenger vào website, đặc biệt hữu ích cho các website bán hàng hay tư vấn dịch vụ.

Tin nhắn của khách sẽ được gửi trực tiếp đến inbox fb của bạn mà không phải truy cập vào trang thứ 3 như zopim hay subiz trước kia.

Dưới đây mình sẽ hướng dẫn các bạn tạo 1 box tư vấn như thế , xem demo: vay tiêu dùng Fecredit

HƯỚNG DẪN TẠO BOX TƯ VẤN FACEBOOK MESSENGER

Như các bạn đã xem ở trang demo http://vaytieudung.maxo.vn/ , Maxo đã thêm một chút hiệu ứng và css cho đẹp hơn. Chatbox sẽ trượt lên xuống ở góc phải, có nút ẩn hiện để tránh làm phiền và chiếm diện tích, hiệu ứng text chạy tùy chỉnh và logo nhỏ.

Box tư vấn ẩn hiện & hiệu ứng chữ chạy.

Đầu tiên là code css cho box, các bạn có thể tùy chỉnh lại theo ý mình:

CSS box tư vấn facebook

<style>
#maxo_container {background-color: #fd0b1d;-moz-user-select: none;-khtml-user-drag: element;cursor: move;cursor: -moz-grab;cursor: -webkit-grab;overflow: hidden;transition-property: height;transition-duration: 0.4s;-webkit-transition: height 0.4s ease-in-out;transition: height 0.4s;z-index: 9990;position: fixed;bottom: 0;right: 5px;-webkit-box-shadow: rgba(50, 50, 50, 0.17);-moz-box-shadow: rgba(50, 50, 50, 0.17);box-shadow: rgba(50, 50, 50, 0.17);-webkit-border-radius: 5px 5px 0 0;-moz-border-radius: 5px 5px 0 0;border-radius: 0 0 0 0; padding: 1px;}#maxo_iframe_container {width:300px;border-radius: 3px;overflow: hidden;line-height: normal;}#maxo_minimize{width: 89%;padding: 7px 0px 0 0px;background: none;float:left; border-radius: 3px;}.status-icon{display: block;line-height: normal;}.status-icon a{ text-decoration:none;margin-right:10px;color: #ffffff;font-size: 13px;}#maxo_logo{float:left;margin: 5px 0 0 0px;width: 30px; text-align: center}
.float-ck { position: fixed; bottom: 0px; z-index: 9000}
* html .float-ck {position:absolute;bottom:auto;top:expression(eval (document.documentElement.scrollTop+document.docum entElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))) ;}
#float_content_right {border: 1px solid #dddfe2;}
#hide_float_right {text-align:right; font-size: 14px;}
#hide_float_right a {background: #fd0b1d; padding: 2px 4px; color: #FFF;font-size: 14px;}
.fb-page {
    height: 300px;
    width: 300px;
}
</style>

Tiếp theo là đoạn js để đóng/mở chatbox

Javascript box tư vấn facebook

<script type="text/javascript">
function hide_float_right() {
    var content = document.getElementById('float_content_right');
    var hide = document.getElementById('hide_float_right');
    if (content.style.display == "none")
    {content.style.display = "block"; hide.innerHTML = '<a href="javascript:hide_float_right()">[X]</a>'; }
        else { content.style.display = "none"; hide.innerHTML = '<div id="maxo_container"><div id="maxo_iframe_container"><div id="maxo_logo"><a href="http://blog.maxo.vn/"><img src="https://3.bp.blogspot.com/-8i-WFZLewUU/V1aXkyDUDhI/AAAAAAAADsw/b__TLNnfu-A43b09M5FpFg4ZYZSknYLtQCLcB/s1600/logo_qc.png"></a></div><div id="maxo_minimize" onclick="return td_inst.showWidget()"> <div style="display: block;" class="status-icon"><marquee onmouseover="this.stop();" onmouseout="this.start();" scrollamount="4"><a href="javascript:hide_float_right()">BẠN MUỐN LIÊN HỆ VỚI MAXO ?</a><a href="javascript:hide_float_right()">Nhấn vào đây để gửi tin nhắn, chúng tôi sẽ trả lời bạn trong vòng 24h.</a></marquee></div></div></div>';}}
(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>

Cuối cùng là đoạn HTML , các bạn nhớ thay đổi link facebook nha!

HTML box tư vấn facebook

<div class="float-ck" style="right: 0px" >
<div id="hide_float_right">
<a href="javascript:hide_float_right()">[X]</a></div>
<div id="float_content_right">
<div id="fb-root"></div>
<div class="fb-page" data-tabs="messages"
data-href="https://www.facebook.com/maxo.panotour/" data-width="300" data-height="300"
data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"></div>

Chỉ đơn giản vậy thôi, chúc các bạn thành công và chia sẻ bài này nếu thấy hay nha.

XEM THÊM

Tweet

Người viết Dương Thanh Phong

Nếu thích mấy thứ tớ viết , nhớ nhắn mấy chú, mấy thím với mấy chế, ghé đến ngó mấy cái đó, nhé mấy bác! :v