Tích hợp live chat Facebook hỗ trợ trực tuyến cho Blooger

Live chát là một phương pháp thông minh giúp chủ trang web / blog có thể chát và trò chuyện trực tiếp với khách hàng mà không cần rời khỏi website, không những đem lại sự tiện lợi Live chát còn tạo nên sự chuyên ngiệp giúp chăm sóc và tư vấn khách hàng một cách hiệu quả. Hiện nay tích hợp live chát là một điều cần thiết, nếu như một khách hàng truy cập vào website của bạn trước khi mua hay đăng ký một dịch vụ nào đó mà bạn cung cấp, họ đều muấn biết rất kỹ lưỡng về sản phẩm , dịch vụ mà họ sắp mua nó. Nếu như không chủ động tư vấn và và chăm sóc khách hàng rất có thể họ sẽ quay trở lại và tìm đến một web khác phục vụ họ tốt hơn
Hướng dẫn tích hợp livechat cho website / blooger
Facebook là một website dịch vụ mạng xã hội và truyền thông xã hội do công ty Facebook, Inc điều hành với trụ sở tại Menlo Park, California. Theo The Next Web, Việt Nam nằm trong Top 10 quốc gia có nhiều người dùng Facebook nhất thế giới. Việt Nam xếp thứ 7 với 64 triệu người dùng, chiếm 3% tổng số tài khoản Facebook toàn cầu. Một con số khá ấn tượng phải không nào. 

Để tích hợp Live chát với nền tảng mạng xã hội Facebook trước tiên bạn cần đăng nhập vào blooger theo địa chỉ https://www.blogger.com ở menu phía bên tay trái chọn phần Chủ đề tiếp theo ta chọn Chỉnh sửa HTML hãy kiểm tra xem HTML có mã SDK Facebook chưa bằng cách bấm phím Ctrl + F để tìm https://connect.facebook.net nếu bạn tìm thấy 1 trong 2 đoạn code dưới đây có ngĩa HTML này đã có SDK Facebook nếu không tìm thấy bạn hãy dãn dán 1 trong 2 đoạn code dưới trước thẻ </body> .Nếu bạn dùng Mã SDK Facebook chuẩn bị lỗi không lưu lại được thì hãy dùng Mã SDK Facebook đã Converter nhé. Chú ý thay your-app-id thành mã ID ứng dụng của bạn bạn,Nếu bạn chưa có ứng dụng Facebook mời bạn xem bài viết Hưỡng dẫn đăng ký và tạo ứng dụng Facebook dành cho nhà phát triển

Mã SDK Facebook chuẩn

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'your-app-id',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v2.12'
    });
  };

  (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 = "https://connect.facebook.net/vi_VN/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>



Mã SDK Facebook đã Converter


&lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;
&lt;script&gt;(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 = &#39;https://connect.facebook.net/vi_VN/sdk.js#xfbml=1&amp;version=v2.11&amp;appId=your-app-id&#39;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));&lt;/script&gt;

Tiếp theo bạn vui lòng chọ cho mình 1 trong 2 phương pháp dưới sem đâu là phù hợp với Blog của mình nhé.

1.Nền tảng Mesenger livechat của Facebook

Bước đầu tiên ta truy cập vào Page Facebook sẽ nhận tin nhắn mà khách hàng gửi đến, bấm vào Cài đặt tiếp theo ta chọ Nền tảng Mesenger và thêm url trang web / blog của bạn như hình dưới. Và bấm Save để lưu lại.
Tổng hợp các công cụ Tạo một hộp chat miễn phí gắn vào trang web / blooger

Để tích hợp Mesenger livechat cho Blooger hãy coppy và dán đoạn code dưới đây vào ngay phía dưới thẻ <body>  thay your-app-id thành mã ID ứng dụng của bạn bạn,Nếu bạn chưa có ứng dụng Facebook mời bạn xem bài viết Hưỡng dẫn đăng ký và tạo ứng dụng Facebook dành cho nhà phát triểnThay your-page-id thành ID Page của bạn nếu chưa có ID Page bạn vào Đây để lấy nhé

Lưu ý Mesenger livechat chỉ xuất hiện trên giao diện điện thoại. Nếu bạn muấn xuất hiện trên tất cả các giao diện như điện thoại, máy tính để bàn, máy tính bảng bạn chỉ cần xóa đoạn

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'> và xóa </b:if> là song

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<script> window.fbMessengerPlugins = window.fbMessengerPlugins || {init: function () { FB.init({ appId: 'your-app-id', autoLogAppEvents : true,xfbml: true,  version: 'v2.6' }); }, callable: [] }; window.fbAsyncInit = window.fbAsyncInit || function () { window.fbMessengerPlugins.callable.forEach(function (item) { item(); }); window.fbMessengerPlugins.init(); }; setTimeout(function () { (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/xfbml.customerchat.js'; fjs.parentNode.insertBefore(js, fjs);} (document, 'script', 'facebook-jssdk'));}, 0); </script> <div class='fb-customerchat' page_id='your-page-id' ref=''></div>
</b:if>


2.Nền tảng Page Facebook chat

Để tích hợp Facebook livechat cho Blooger hãy coppy và dán đoạn code dưới đây trước thẻ </body> thay https://www.facebook.com/maytroi.fashion  Thành link link fanpage bạn muấn nhận tin nhắn

Điều chỉnh thông số sao cho phù hợp width="250" là chiều cao / height="300" là chều rộng / right:2px là khoảng cách từ lề trái đến khung chát / bottom:20px là khoảng cách từ lề dưới đến khung chát hãy căn chỉnh cho phù hợp.


Lưu ý.  Page Facebook chat chỉ xuất hiện trên giao diện máy tính, nếu bạn muấn nó xuất hiện trên giao diện di động bạn vui lòng xóa bỏ đoạn Code


<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>  và xóa bỏ   </b:if>


<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'><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#x...";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script><div style="position:fixed; z-index:9999999; right:2px; bottom:20px;" class="fb-page" data-tabs="messages" data-href="https://www.facebook.com/maytroi.fashion" data-width="250" 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>
</b:if>

Có phần nào không hiểu hãy đặt câu hỏi dưới phần bình luận mình sẽ hỗ trợ mọi người.

Đăng nhận xét

0 Nhận xét