Tạo Form Hỗ trợ trực tuyến Facebook cho website

Chào các bạn, hôm nay mình sẽ giới thiệu một kiểu Chat mới, dựa trên nền tảng Facebook. Ở phiên bản này thì bất cứ khách truy cập nào đã đăng nhập Facebook đều có thể gửi tin nhắn đến Fanpage của bạn mà không cần phải like Fanpage.

Và nhìn nó khá chuyên nghiệp và giống như những Form hỗ trợ phổ biến khác. Nó sẽ hiển thị ở góc dưới bên phải màn hình.
Ok, các bạn dùng đoạn code sau nhé:

<!-- Begin chatbox facebook Form -->
<div id='fb-root'/>
  <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 = &quot;//connect.facebook.net/vi_VN/sdk.js#xfbml=1&amp;version=v2.5&quot;;
  fjs.parentNode.insertBefore(js, fjs);
  }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
  <style>#cfacebook{position:fixed;bottom:0px;right:8px;z-index:999999999999999;width:250px;height:auto;box-shadow:5px rgba(0,0,0,0.2);overflow:hidden;}#cfacebook .fchat{float:left;width:100%;height:270px;overflow:hidden;display:none;background-color:#f2f2f2;}#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;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:#ccc;text-decoration:none;}</style>
  <script>
  jQuery(document).ready(function () {
  jQuery(&quot;.chat_fb&quot;).click(function() {
jQuery(&#39;.fchat&#39;).toggle(&#39;slow&#39;);
  });
  }); 
  </script>

Và đoạn code này:

<div id='cfacebook'>
  <a class='chat_fb' href='javascript:;' onclick='return:false;'><i class='fa fa-facebook-square'/>Hỗ trợ trực tuyến</a>
  <div class='fchat'>
  <div class='fb-page' data-adapt-container-width='true' data-height='400' data-hide-cover='false' data-href='https://www.facebook.com/NCCSuport/' data-show-facepile='true' data-show-posts='false' data-small-header='false' data-tabs='messages' data-width='250'/>
  </div>
  </div>

Thay link đánh dấu màu xanh thành link Fanpage facebook của bạn là được
Các bạn có thể đặt đoạn code 1 ở trong phần Header của website, còn đoạn code 2 thì cho vào trước thẻ </body> là được.

Hi vọng tính năng này có ích đối với bạn.

Xem thêm : Updating ...