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>
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>
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>
mình thử ok hết nhưng nhắn tin lại yêu cầu xác nhận ảnh nhỉ. có cách nào ko phải xác nhận ko
ReplyDeleteChỉ những tài khoản fb bị nghi spam thì mới bị xác nhận thôi bác
DeleteEm hỏi chút bác
ReplyDeleteKhi thay vào web khác thì sẽ phải thay a href="http://blog.maxo.vn/" + fanpage bằng tên web đó + fanpage khác phải không ạ
Vậy cái img src="https://3.bp.blogspot.com/-8i-WFZLewUU/V1aXkyDUDhI/AAAAAAAADsw/b__TLNnfu-A43b09M5FpFg4ZYZSknYLtQCLcB/s1600/logo_qc.png"> thì sao ạ. Em không rõ nó là cái gì ạ. Có phải thay ảnh này không ạ
a href="http://blog.maxo.vn" // thay bằng website của bạn
Deleteimg src="https://3.bp.blogspot.com/-8i-WFZLewUU/V1aXkyDUDhI/AAAAAAAADsw/b__TLNnfu-A43b09M5FpFg4ZYZSknYLtQCLcB/s1600/logo_qc.png" // thay cũng được , k thì để nguyên nếu thích.
----------------------
Là cái icon hình tròn khi ẩn box sẽ thấy đó bác, đổi thành website của bạn, nếu thích thì đổi link logo đó luôn không ảnh hưởng gì cả (nhớ kích thước logo là 20x20)
cho em hỏi làm sao để cái messenger nó không tự load lên khi mới vào web vậy ạ?
ReplyDeleteDạ cho em hỏi làm sao để cái messenger nó không tự load lên khi mới vào trang web ạ?
ReplyDeletechèn vào đâu ở trong hosting vậy bác ? header hay footer hay index ??
ReplyDeletebác hướng dẫn chỗ chèn ngay góc đó đc ko ?
footer nha bạn
Delete