Tích hợp Facebook Messenger Live Chat vào Blogger

Hiện nay, hầu hết các website - blogspot đều có trang bị tính năng live chat. Phổ biến nhất là Facebook Messenger, như biểu tượng Messenger góc dưới bên phải của hình trên.

Trong bài viết này, mình sẽ chia sẻ với các bạn 2 cách để chèn Facebook Messenger vào website, và liên kết với tài khoản Facebook, hoặc Fanpage.

Cách 1:

Trước tiên, các bạn nhấp vào tab Trang (Page) trên Facebook. Trên danh sách các trang thuộc quản lý của bạn, chọn trang (fanpage) cần thêm messenger chat vào website.

Tiếp theo chọn mục Cài đặt:

Sau đó chọn tiếp mục tab "Tin nhắn" trong danh sách tab bên trái, và nhấp chọn nút Bắt đầu tại phần "Thêm Messenger vào trang web". 

Chọn Thiết lập tại tab Plugin chat

Khung thiết lập xuất hiện, các bạn thiết lập tuần tự các bước:

• Bước 1: Đặt ngôn ngữ, chọn ngôn ngữ thích hợp xuất hiện trên khung chat.
• Bước 2: Thêm miền, dán đường dẫn trang web hoặc blog vào.
• Bước 3: Sao chép mã, các bạn nhấp vào nút Sao chép mã, đoạn code sẽ được lưu vào bộ nhớ tạm (tương tự như đoạn code bên dưới). Để chắc ăn thì các bạn nên dán vào nơi notepad.
• Bước 4: Dán mã, các bạn nhấp vào nút "Hoàn tất" đê kết thúc quá trình thiết lập.

<!-- Messenger Plugin chat Code -->
<div id="fb-root"></div>

<!-- Your Plugin chat code -->
<div id="fb-customer-chat" class="fb-customerchat"></div>

<script>
    var chatbox = document.getElementById('fb-customer-chat');
    chatbox.setAttribute("page_id", "1597117826986xxx");
    chatbox.setAttribute("attribution", "biz_inbox");

    window.fbAsyncInit = function() {
        FB.init({ 
	    xfbml            : true,
	    version          : 'v11.0'
        });
    };

    (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/xfbml.customerchat.js';
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>

Sau khi hoàn tất quá trình thiết lập trên Facebook, các bạn vào trình quản lý Blogger. Trên giao diện quản lý Blogger, các bạn nhấp chọn Bố cục (Layout) và sau đó nhấp vào Thêm tiện ích (Add a Gadget). 

Khung Thêm tiện ích xuất hiện, bạn chọn tiếp mục "HTML/JavaScript". Trên cửa sổ định cấu hình HTML/JavaScript phần tiêu đề để trống, phần nội dung thì các bạn dán đoạn code chép từ Facebook vào. Cuối cùng các bạn chọn Lưu lại, load lại trang web/blog để xem kết quả nhé.

Ngoài ra giao diện mặc định của khung chat Messenger, chúng ta cũng có thể thay đổi:

• Lời chào trên khung chat
• Vai trò chat của khách
• Màu tuỳ chỉnh cho nút chat
• Căn chỉnh vị trí xuất hiện (bên trái, bên phải) của khung chat trên web/blog
• Canh khoảng cách từ lề dưới đến vị trí xuất hiện của nút chat
• Thay đổi độ nổi bật

Chi tiết các tuỳ chỉnh các bạn xem trong video hướng dẫn nhé.

Cách 2:

Cách này đơn giản hơn cách 1, sử dụng đoạn code đã được tạo sẵn để thêm vào web/blog. Đầu tiên các bạn tải file code về tại link bên dưới:

Link download code Messenger Chat

Trong file code tải về có 3 vị trí chúng ta cần thay đổi đường dẫn fanpage. 

Ngoài ra, còn có một số vị trí được đánh dấu để thay đổi các thuộc tính của khung chat. Nếu các bạn không thể thay đổi xin hãy comment bên dưới để mình hỗ trợ nhé.

Sau khi đã tải về, thay đổi đường dẫn đến trang fanpage xong. Các bạn vào phần quản lý Blog \ Bố cục \ Thêm tiện ích và làm các bước thêm vào tương tự như ở cách 1 nhé.

Chúc các bạn thành công!

Thursday, September 13, 2018