Cách Tích Hợp Chat Facebook Vào Website Đơn Giản

Có rất nhiều cách tích hợp chat Facebook vào website, trong đó đơn giản nhất là cài plugin hỗ trợ. Tuy nhiên việc này thường làm website load “khổ sở hơn”. Bên cạnh đó việc sử dụng plugin không “chính chủ” nên hoạt động khá chập chờn. Chưa kể đến việc lộ thông tin khách hàng hoặc dịch vụ, sản phẩm.

Hôm nay, EPAL Blog sẽ hướng dẫn các bạn cách tích hợp chat Facebook vào website (Cách cài livechat Facebook vào website) mà không cần sử dụng plugin. Các bạn cùng theo dõi nhé:

À quên! trước khi thực hiện các bạn cần phải có những yêu cầu sau để thực hiện nhé! Thiếu 1 cái cũng không được đâu.

Yêu cầu cần có để tích hợp chat Facebook vào website.

1. Fanpage:

Các bạn buộc phải có fanpage (Fanpage đang hoạt động nhé) và cần phải có quyền quản trị fanpage để cài đặt liên kết ứng dụng App ID Facebook.

Nếu bạn chưa có Fanpage thì có thể tạo Fanpage tại link sau: https://www.facebook.com/pages/create

2. App ID Facebook:

App ID phải được kích hoạt và liên kết với website: Phần này mình sẽ hướng dẫn cụ thể ngay trong bài này.

3. Website:

Website dùng để cài đặt để hiển thị icon livechat.

Các bước tích hợp Chat Facebook vào website.

Tạo ứng dụng chat Facebook (Facebook App).

1. Tạo ứng dụng facebook chat.

Đầu tiên, các bạn truy cập vào trang Facebook for Developers để tạo cho mình 1 ứng dụng facebook chat, các bạn click vào nút Tạo ứng dụng.

2. Nhập thông tin khởi tạo ứng dụng facebook chat

Ngay sau đó, một pop-up hiện lên, bạn hãy điền các thông tin được yêu cầu như sau:

• Tên hiển thị (1): Tên của ứng dụng. Lưu ý không đặt tên trùng với thương hiệu “Facebook” như hình dưới sẽ không hợp lệ.

• Email (2): Nhập email liên hệ.

Sau đó bạn click vào nút Tạo ID ứng dụng.

Sau khi tạo ứng dụng facebook chat xong chúng ta tiến hành cài đặt thông tin cơ bản cho ứng dụng.

3. Cài đặt thông tin cho ứng dụng chat facebook.

Trong trường hợp bạn có nhiều ứng dụng được tạo thì cần chọn đúng ứng dụng chat facebook để thiết lập thông tin như sau:

• Chọn ứng dụng (3): Chọn đúng ứng dụng cần thiết lập thông tin.
• Thông tin cơ bản (4): Chọn Cài đặt  > Thông tin cơ bản.

4. Khai báo thông tin ứng dụng chat facebook.

• ID ứng dụng(5): Copy lại ID ứng dụng để thực hiện ở các bước sau.
• URL chính sách quyền riêng tư(6): Nhập tên domain muốn tích hợp chat facebook. Trong trường hợp này mình demo trang Blog EPAL luôn thì mình nhập là: https://blog.epal.vn/
• Hạng mục(7): Chọn hạng mục phù hợp cho doanh nghiệp hoặc trang muốn tích hợp chat.

Trên đây là những thông tin cần khai báo, ngoài ra các bạn có thể thêm biểu tượng ứng dụng, miền ứng dụng, vùng tên…

Sau khi hoàn thành chúng ta chọn: Lưu thay đổi để lưu thông tin.

5. Kích hoạt ứng dụng chat Facebook.

Ở phần trên cùng chúng ta thấy ứng dụng đang ở chế độ “Tắt” để kích hoạt chúng ta chọn vào “tắt” để bật kích hoạt ứng dụng chat facebook.

• Tắt (8): Chọn tắt để “Bật” ứng dụng chat facebook.
• Chuyển chế độ (9): Chọn chuyển chế độ để đồng ý bật kích hoạt ứng dụng.

Khi ứng dụng bật sẽ hiển thị màu xanh.

Kết nối ứng dụng Facebook với Fanpage.

Sau khi tạo xong ứng dụng Facebook chúng ta tiếp tục kết nối ứng dụng Facebook với Fanpage.

1. Thiết lập cài đặt nền tảng Messenger.

Bạn truy cập vào trang quản trị Fanpage sau đó thực hiện theo các bước sau:

• Cài đặt (10) > Nền tảng Messenger (11).

2. Chia sẻ thuộc tính và thêm tên miền cần hiên thị chat facebook.

Trong phần nền tảng Messenger chúng ta tìm đến 2 phần sau:

• Chia sẻ thuộc tính (12): Nhập (Copy và Paste cho chính xác) ID ứng dụng mình đã copy ở bước 5.
• Miền được đưa vào danh sách hợp lệ (13): Copy và Paste tên miền cần tích hợp chat Facebook.

Lưu ý: Bước này rất quan trọng. Vì khi quên thực hiện 2 bước này thì sẽ không hiển thị được icon chat trên website. Vì thế! bạn nào sau khi hoàn thành mà không thấy icon hiển thị trên website thì nên kiểm tra lại 2 bước này.

3. Thiết lập Icon Chat hiển thị trên website.

Tiếp theo chúng ta tìm đến phần Plugin chat với khách hàng: Nếu bạn không có quyền quản trị thì sẽ không hiển thị phần này đâu. Vì thế mình cần phải có quyền quản trị Fanpage.

Plugin chat với khách hàng (14) > chọn Thiết lập.

4. Thiết lập ngôn ngữ và lời chào.

• Chọn ngôn ngữ (15): Các bạn chọn ngôn ngữ để hiển thị thông tin trên website. Ở đây mình chọn Tiếng Việt vì website mình phục vụ người Việt.
• Lời chào (16): Chọn Thay đổi để sửa lời chào mặc định hiển thị khi khách hàng truy cập vào website.

Sau khi hoàn thành chúng ta chọn: “Tiếp” để tiếp tục.

5. Điều chỉnh màu sắc cho Icon Livechat

Màu tùy chỉnh (18): Chọn “On” hoặc “Off” để bật chế độ thay đổi màu và các bạn nhập mã màu tùy thích để hiện thị.

Sau khi hoàn thành chúng ta chọn: “Tiếp” để tiếp tục.

6. Lấy code để tích hợp chat vào website.

Thêm tên miền trang web (19): Lưu ý phần này phải đúng tên miền muốn hiển thị nhé. Phải khai báo trùng với bước (13) và bước (6). Mình thấy rất ít người để ý phần này và sau khi hoàn thành thì bị lỗi là không hiển thị được icon live chat.

Đoạn mã (20): Copy đoạn mã để chèn vào website. Chỉ cần Click vào khung đoạn mã (khung xanh) là tự động copy.

Chọn “Hoàn thành” để hoàn thành bước kết nối ứng dụng Facebook và Fanpage

Gắn code vào website.

Phần này các bạn chỉ cần gửi đoạn code vừa copy cho kỹ thuật để gắn vào trong thẻ <body> của website là hoàn thành.

Trường hợp bạn là khách hàng thiết kế website của EPAL Solution thì chỉ cần gửi code nhân viên kỹ thuật sẽ hỗ trợ quý khác gắn vào website.

Hình ảnh hoàn thành tích hợp chat facebook vào website.

Đây là hình ảnh mà mình đã thực hiện thành công tích hợp chat Facebook vào website của mình.

Lưu ý: Có 2 phần chúng ta cần lưu ý kiểm tra trước khi chèn code vào thẻ <body> website:

1. Thay id=”fb-root“> bằng ID ứng dụng được tạo ở bước 5 với định dạng như sau: id=”ID-ứng-dụng“>.
2. Kiểm tra page ID có chính xác là Fanpage của mình không với cú pháp đơn giản như sau: Truy cập: http://facebook.com/”Page ID“. Ví dụ đối với Fanpage của EPAL Solution như sau: https://www.facebook.com/844395182255287. Phần này sau khi liên kết thì code đã tự động lấy Page ID, nhưng quá trình làm có sự cố thì các bạn có thể kiểm tra lại.

Thật tuyệt vời phải không nào? Chúc các bạn thành công!