6/4/16

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

3:57 PM

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.

Người viết

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

8 comments:

  1. 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

    ReplyDelete
    Replies
    1. Chỉ những tài khoản fb bị nghi spam thì mới bị xác nhận thôi bác

      Delete
  2. Em hỏi chút bác

    Khi 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 ạ



    ReplyDelete
    Replies
    1. a href="http://blog.maxo.vn" // thay bằng website của bạn

      img 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)

      Delete
  3. 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 ạ?

    ReplyDelete
  4. Dạ cho em hỏi làm sao để cái messenger nó không tự load lên khi mới vào trang web ạ?

    ReplyDelete
  5. chèn vào đâu ở trong hosting vậy bác ? header hay footer hay index ??
    bác hướng dẫn chỗ chèn ngay góc đó đc ko ?

    ReplyDelete

 

© 2016 MAXO. All rights resevered. Designed by Templateism

Back To Top