Tích hợp Zalo chat và Zalo comment vào website [wordpress] chi tiết từng bước

Chào mọi người, lâu lắm rồi mình chưa viết bài hướng dẫn nào.

Hôm nay mình sẽ hướng dẫn cho các bạn cách tích hợp Zalo Chat, Comment vào Website từng bước đơn giản nhé. Hiện tại Zalo đang rất phát triển và hầu như 90% sử dụng Smartphone đều có cài Zalo, vậy không có lý do gì chúng ta ko cài phần hỗ trợ Chat của Zalo vào website để support một cách nhanh chóng nhất.

Hoàn toàn miễn phí và có thể thay thế các ứng dụng chat khác như  liveChat hoặc uchat…

Hiện tại Zalo hỗ trợ các Plugin: Nút Chia sẻ, Nút Quan tâm, Widget Quan tâm, Widget Chat, Widget Bình luận

Mình sẽ hướng dẫn chi tiết tích hợp từng nút, bạn nào sử dụng nhu cầu nào thì cài đặt cái đó thôi, mình thì sử dụng 2 cái chính nhất đó là Widget Chat và Widget Comment

Bước đầu tiên để Setup những thứ này, bạn sẽ phải tạo 1 Office Account Zalo, nó như là 1 Page bên Facebook

Hướng dẫn tạo Office Account Zalo

Vào đây  https://oa.zalo.me/manage/oa?option=create

Ở đây mình chọn Loại tài khoản Nội dung, làm để Test thôi mà, sau đó bấm Tiếp tục

Screen Shot 2018 06 11 at 5.25.07 PM 1024x497

 

Chọn tiếp Danh mục Cộng Đồng và bấm Tiếp tục

Screen Shot 2018 06 11 at 5.26.53 PM 1024x719

 

Các bạn điền tiếp Tên Office và Thông tin mô tả, sau đó bấm Tiếp tục

Screen Shot 2018 06 11 at 5.29.58 PM 962x1024

Tiếp theo là chọn Ảnh bìa và Avatar, sau đó bấm Hoàn tất

Screen Shot 2018 06 11 at 5.34.48 PM 1024x838

 

Ok vậy là xong bước tạo Office Account Zalo rồi nhé, sau khi tạo xong thì sẽ được chuyển vào trang quản lý, nó như trang quản lý Page của Facebook vậy thôi, các bạn có thể vào tự vọc thêm.

Sau khi tạo xong Office Account Zalo, chúng ta có thể dễ dàng nhúng Chat và Comment của Zalo vào website như hướng dẫn sau:

1/ Cài đặt Widget Chat Zalo vào website:

Bước 1: Để cài Chat Zalo, bạn vào thẳng link sau: https://developers.zalo.me/docs/social/zalo-chat-widget

Sau đó cấu hình như bên dưới, Office Account là cái lúc nãy mình vừa tạo phía trên đó, cái dãy số đằng sau là id của Office Account

Screen Shot 2018 06 11 at 5.38.51 PM 1024x579

 

Bước 2: Bấm vào nút Lấy mã, sau đó copy đoạn mã và dán vào code website.

Nếu bạn dùng WordPress có thể dán ngay trước thẻ đóng </head> trong file header.php ở trong theme, kiểu như vậy, ngay chỗ mình bôi đen đó.

Screen Shot 2018 06 11 at 5.43.17 PM 1024x590

 

Sau đó bấm Update File, rồi ra ngoài kiểm tra thử đã xuất hiện hay chưa

Oh man!!! đã xuất hiện rồi, vậy là thành công rồi nhé

 

Screen Shot 2018 06 11 at 5.44.54 PM 1024x784

2/ Cài đặt Widget Comment Zalo vào website:

Bước 1: Cũng tương tự như cách làm với widget Chat Zalo, các bạn vào link sau

https://developers.zalo.me/docs/social/zalo-comment-widget

Bấm tạo 1 ứng dụng có tên  Quocbb’s Blog

Screen Shot 2018 06 11 at 5.53.37 PM 1024x460

 

Bước 2: Sau đó Click vào cái App mới tạo để cài đặt ứng dụng

Screen Shot 2018 06 11 at 5.56.15 PM 1024x418

 

Các bạn cài đặt theo như sau, nhớ thêm tên miền mà muốn đặt bình luận vào, mình điền quocbb.com, và bấm vào nút Kích hoạt ứng dụng mới được nhé.

Screen Shot 2018 06 11 at 5.57.49 PM 1024x590

 

Bước 3: Ok, sau đó thì quay trở lại link này

https://developers.zalo.me/docs/social/zalo-comment-widget

AppID là cái ứng dụng mình vừa tạo. Quocbb’s Blog

Url bài viết: là cái url cần đặt comment

Số bài viết: để 5 hay 10 tùy bạn

sau đó bấm Lấy mã như hình

Screen Shot 2018 06 11 at 6.03.43 PM 1024x458

 

Các bạn lưu ý chỗ Url bài viết, ở đây là link cứng, nếu sử dụng WordPress thì thay lại như code sau:

Screen Shot 2018 06 11 at 6.06.52 PM 1024x447

 

Thay cái chỗ data-href thành    data-href=”<?php%20the_permalink()%20?>”

Screen Shot 2018 06 11 at 6.06.52 PM 1 1024x447

 

Vậy là xong rồi nhé, bây giờ muốn Comment nó hiện ở bài viết thì vào File Single.php trong theme WordPress để thêm cái code Bước 2 vào, ở đây mình chỉ thêm code Bước 2 vì code Bước 1 (Javascript SDK) mình đã add vào ở phần trên rồi nên ko cần thêm lại nữa, thêm ngay trước cái comment_template(”, true); thì nó sẽ hiện trước cmt của wordpress nha các bạn.

Screen Shot 2018 06 11 at 6.15.20 PM 1024x602

 

Sau đó các bạn bấm Update

Và tiếp tục ra ngoài xem nó hiện chưa, Oh man hiện rồi hên quá

Screen Shot 2018 06 11 at 6.18.23 PM 1024x579

 

Vậy là xong rồi nhé các bạn, nếu bạn nào ko làm đc cứ pm hoặc để lại bình luận ở đây mình sẽ hướng dẫn cho bạn nhé.

Summary
Review Date
Reviewed Item
Tích hợp Zalo chat và Zalo comment vào website [wordpress] chi tiết từng bước
Author Rating
51star1star1star1star1star

CÓ THỂ BẠN QUAN TÂM

Thiết kế website máy móc công nghiệp
Link Demo : Website máy móc công nghiệp Det Tadalafil gjør det er at det hemmer PDE5 eg nærmere bestemt testosteron ...
Dich Vu SEO
Dịch Vụ SEO Đồng Tháp
Dịch vụ SEO Đồng Tháp, chúng tôi sẽ giúp bạn phát triển doanh nghiệp của bạn lên một tầm cao mới.
Báo động nền tảng website WordPress bị hacker tấn công lừa đảo
Báo động nền tảng website WordPress bị hacker tấn công lừa đảo
Vượt qua cơ chế bảo vệ của Wordfence (“tường lửa” của WordPress), các hacker sẽ lợi dụng tấn công thay đổi ...
wordpress hosting
[HOT ] 8 Lưu Ý Cách Chọn (WORDPRESS HOSTING) | TRANHAIT.COM
WordPress đang là mã nguồn mở được sử dụng nhiều nhất trên thế giới. Nắm bắt được xu thế đó, nhiều ...
cost
Thiết Kế Website Quảng Bình
Khi gõ từ khóa “thiết kế website”, hoặc “công ty thiết kế web” trên Google, khách hàng dễ bị bối rối ...
Cong Ty Thiet Ke Web Tai Dong Thap
Công Ty Thiết Kế Website Tại Đồng Tháp
Kính gửi: Quý Khách hàng Thiết kế website đồng tháp là một trong những doanh nghiệp đứng đầu về ứng dụng công nghệ ...
Thiết kế website nội thất tại Đồng Tháp
Thiết kế website nội thất tại Đồng Tháp – Tặng Tên Miền, Hosting, Miễn phí Traffic ĐƠN VỊ THIẾT KẾ WEBSITE NỘI ...
website ban thuc pham sach 1
Giao diện website bán thực phẩm sạch
Vifonic xin giới thiệu đến Quý khách mẫu giao diện website mới: website bán hàng thực phẩm sạch với đầy đủ các tính năng của một ...
xquang cao facebook 001.jpg.pagespeed.ic .7 yVD6ereC
Cách chèn facebook comment bên dưới sản phẩm
Chèn facebook comment bên dưới sản phẩm làm gì khi đã có tab review mặc định của woo? Đơn giản vì ...
Làm website tại Đồng Tháp
Hướng dẫn thiết kế website cho người không chuyên www.thietkewebsitedongthap.com – Chuyên thiết kế – làm website tại Đồng Tháp, Website chuẩn ...
WiFi Marketing là gì? Lợi ích WiFi Marketing là gì?
WiFi Marketing là gì? Lợi ích WiFi Marketing là gì? Với sự phát triển bùng nổ và không ngừng nghỉ của ...