Hướng dẫn cách tích hợp Zalo Chat vào website WordPress đơn giản

Lý do nên tích hợp Zalo Chat vào website

Zalo là một trong những ứng dụng phổ biến nhất tại Việt Nam, cung cấp các tính năng như nhắn tin, gọi điện, chia sẻ hình ảnh, video, video, thanh toán và giao dịch, v.v... hoàn toàn miễn phí.

Hiện nay, Zalo đã trở thành một phần trong cuộc sống kỹ thuật số của nhiều người dân tại Việt Nam, từ việc kết nối với gia đình và bạn bè đến việc thực hiện các giao dịch trực tuyến và làm việc.

Chính vì thế, việc lựa chọn Zalo làm phương tiện hỗ trợ trực tuyến và chăm sóc khách hàng trên các website là điều hết sức hữu dụng. Nhất là khi Facebook không còn hỗ trợ Chat Plugin để kết nối ứng dụng Messenger với website nữa

Trong bài viết này, BrandKey.pro sẽ hướng dẫn bạn những cách tích hợp Zalo chat vào website WordPress một cách nhanh chóng và dễ dàng, cũng như ưu nhược điểm của từng phương pháp.

Hiện nay, có 3 cách phổ biển để admin nhúng Zalo Chat vào website, mỗi phương pháp đều có những ưu nhược điểm riêng.

1. Hướng dẫn cách tích hợp Zalo Chat vào website WordPress bằng cách cài Plugin

Sử dụng Plugin có sẵn trong kho Plugin miễn phí của WordPress được xem là cách làm dễ dàng và nhanh chóng nhất.

Ở trong giao diện quản trị của website, admin chỉ cần nhấp vào menu "Plugins", bấm chọn "Add New Plugin" (Cài Plugin), nhập từ khóa "Zalo" trong "Search Plugin" (Tìm kiếm gói mở rộng) để tìm kiếm Plugin về Zalo.

Tại đây, admin sẽ tìm thấy một số Plugin có thể đáp ứng được yêu cầu. Hãy lựa chọn cho mình một Plugin phù hợp.

Trước khi cài Plugin, cần chú ý các điểm sau:

• Đọc kỹ mô tả để hiểu tác dụng của Plugin
• Nên lựa chọn những Plugin có nhiều lượt tải về nhiều
• Xem những đánh giá, phản hồi của người dùng để hiểu qua về ưu điểm và nhược điểm (nếu có)
• Không cài các Plugin từ những nguồn không rõ ràng, đa số trong số đó đều bị chèn thêm mã độc.

Ở đây, BrandKey.pro sẽ hướng dẫn sử dụng Plugin Button contact VR của tác giả VirusTran để làm ví dụ (Nhìn cái tên tác giả thôi cũng đã có phần cảm thấy bất an).

1. Ấn vào "Install Now" để cài đặt và "Active" để kích hoạt Plugin.
2. Nhấn F5 để "Refresh" lại website, bạn sẽ thấy trong giao diện quản trị website, có thêm phần "Button Contact"
3. Ở tab "Button Contact", nhập số điện thoại Zalo của bạn vào mục Zalo. Nếu muốn, bạn có thể chèn thêm số Hotline và tùy biến màu sắc hiển thị, hay chèn thêm các mạng xã hội khác vào.
4. Kéo xuống phía dưới, bấm "Save Changes" để lưu phần tùy chỉnh.

Vậy là xong. Bạn có thể trở lại Trang chủ để nhìn thành quả.

Ưu điểm khi sử dụng Plugin để cài Zalo Chat

• Cài đặt dễ dàng và nhanh chóng
• Cách thực hiện khá đơn giản, gần như admin nào cũng có thể làm được.

Nhược điểm khi cài Zalo Chat bằng Plugin

• Việc cài thêm Plugin sẽ khiến cho website bị nặng hơn
• Vì một lý do gì đó mà nhà phát triển dừng cập nhật các phiên bản Plugin mới khiến cho chúng không còn tương thích với những phiên bản nâng cấp của mã nguồn WordPress, điều này có thể sẽ khiến cho Plugin không hoạt động.
• Các Plugin (nhất là miễn phí) luôn có thể tồn tại nguy cơ dính mã độc, mã theo dõi từ nhà phát triển, hoặc lỗ hổng bảo mật, ngay cả đối với những Plugin trong kho ứng dụng của WordPress.

2. Hướng dẫn cách nhúng Plugin Zalo Chat vào website WordPress thông qua Widget

Để nhúng Plugin Zalo Chat vào website WordPress thông qua Widget, điều kiện bắt buộc là người dùng phải đăng ký tài khoản Official Account (OA) của Zalo. Tuy nhiên, để đăng ký tài khoản OA, yêu cầu người dùng phải có giấy phép kinh doanh.

Bước 1: Đăng ký tài khoản OA của Zalo

Truy cập vào website: https://oa.zalo.me/home

Bấm vào nút "Tạo Official Account". Sau đó đăng nhập tài khoản Zalo trên Website để kết nối với ứng dụng Zalo Offical Account bằng 1 trong 2 cách: Quét mã QR Code trên điện thoại, hoặc Đăng nhập bằng số điện thoại của bạn và mật khẩu.

Bước 2: Thiết lập mã nhúng Zalo Widget Chat

Mã Zalo Widget Chat sẽ cho phép mọi người dễ dàng cá nhân hóa và nhúng cửa sổ chat với Official Account trên website. Khách truy cập của bạn có thể trò chuyện trực tiếp với Official Account.

Sau khi tài khoản Zalo OA của bạn được xác thực thành công (thường là sau 24h). Bạn cần truy cập theo đường link sau để thiết lập và lấy mã Zalo Widget Chat nhúng vào website.

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

Cách tùy chỉnh cửa sổ Zalo Chat như sau:

• Official Account: Đây là tên tài khoản Official Account của bạn.
• Chọn câu chào: Đây là tin nhắn chào khi khách truy cập vào trang web của bạn. Bạn có thể thay đổi lời chào này.
• Thời gian hiển thị cửa sổ chat (giây): Đây là thời gian cửa sổ chat mở lên, mặc định là 0 giây, bạn có thể thay đổi tùy ý.
• Width: Đây là chiều rộng hiển thị của box chat trên trang web.
• Height: Đây là chiều dài hiển thị của box chat trên trang web.

Sau khi điền tùy chỉnh click vào nút "Lấy mã". Một cửa sổ mở lên, cho phép bạn copy toàn bộ đoạn mã code để nhúng.

(Lưu ý: Bạn cần phải được xác thực tài khoản Zalo OA xong mới sử dụng được tính năng này).

Bước 3: Nhúng mã Zalo Widget Chat vào website WordPress

Có thể nhúng mã Zalo Widget Chat vào bất cứ phần nào của body, nhưng cách đơn giản nhất là nhúng trong Widget (đúng với tên gọi của Zalo Widget Chat). Cách làm như sau:

Từ giao diện bảng điều khiển "Dasboard" của WordPress, chọn "Appearance" vào "Widgets", tiếp đến "Add Block".

Search tìm Block "Custom HTML" rồi Paste mã Zalo Widget Chat vào

Bấm "Update" để cập nhật thay đổi là được.

(Lưu ý: Tùy vào cách hiển thị của Theme mà bạn có thể chọn ví trí Widget muốn nhúng mã code Zalo Widget Chat cho phù hợp).

Ưu điểm của việc nhúng Zalo Chat vào website WordPress qua Widget

• Plugin được nhúng vào thường xuyên được cập nhật cho tương thích với từng phiên bản của mã nguồn WordPress.
• Sử dụng tài khoản OA chat với khách hàng, nên có nhiều tính năng hữu dụng.

Nhược điểm

• Bắt buộc người dùng phải có tài khoản OA Doanh nghiệp mới sử dụng được. Để xác thực được tài khoản OA cần phải có Giấy chứng nhận Đăng ký kinh doanh
• Việc nhúng mã code từ bên ngoài vào sẽ khiến cho website bị nặng hơn

3. Hướng dẫn cách tích hợp Zalo Chat vào website WordPress bằng phương pháp tự Code

Nếu không phải dân IT, nói đến "tự code" chắc nhiều bạn sẽ bỏ dở.

Nhưng chớ vội hoang mang, cách cài Zalo Chat vào website WordPress này vô cùng dễ, vừa nhanh, vừa tối ưu cho tốc độ của website.

Để thực hiện, bạn làm như sau:

Copy đoạn HTML này, bỏ vào Widget bằng cách vào "Appearance" -> "Widgets" -> "Add Block". Search tìm Block "Custom HTML" rồi Paste đoạn Code dưới đây vào.

<a href="https://zalo.me/YourPhone" id="zalo-link" target="_blank" rel="noopener noreferrer"><div id="zalo-icon">Zalo</div></a>

Lưu ý quan trọng: Cần phải thay "YourPhone" bằng số điện thoại của bạn vào (Trong hình ad ví dụ là số 0912345678). Sau đó bấm "Update" để cập nhật thay đổi (Tương tự như cách thứ 2).

Tiếp đến, vào "Appearance" -> "Customize" -> Chọn "Additional CSS" để Paste đoạn CSS dưới đây vào. Cuối cùng bấm vào nút "Published" ở góc gần trên cùng bên tay trái để lưu lại Style là được.

#zalo-link {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 999;
    text-decoration: none;
    transition: transform 0.3s ease-in-out;
}

#zalo-icon {
    color: #fff;
    background-color: #0068ff;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 45px;
    font-weight: bold;
    font-size: 16px;
}

#zalo-link:hover #zalo-icon {
    background: #004de8;
}

Với cách này, bạn chỉ cần sử dụng tài khoản Zalo cá nhân, không cần đăng ký Zalo AO. Đây là đoạn code đơn giản được chính admin của BrandKey.pro viết. Bạn chỉ cần copy và paste đúng vị trí đã hướng dẫn là sẽ hoạt động.

Nếu muốn thay đổi vị trí, bạn chỉ cần thay đổi thông số của right (bên phải) và bottom (bên dưới) trong phần #zalo-link. Giá trị mặc định đang để là 20px (Nghĩa là: vị trí của biểu tượng Zalo sẽ cách lề bên phải và bên dưới của màn hình 20px).

Ưu điểm

• Chỉ thêm một đoạn code ngắn gọn, gần như không ảnh hưởng đến tốc độ website
• Dễ thực hiện, copy và Paste đúng nơi hướng dẫn là sẽ hoạt động.
• Có thể dễ dàng tùy biến cách hiển thị, màu sắc và hiệu ứng theo ý mình nếu biết CSS.

Nhược điểm

• Không kết nối với tài khoản Zalo OA được

Kết luận

Như vậy, thông qua bài viết này, các bạn đã có thể tự mình chèn Zalo Chat vào website WordPress.

Việc sử dụng phương pháp nào tùy thuộc vào sở thích và mục đích của các bạn.

• Nếu bạn là người Low-tech, hãy chọn cách 1 (Cách này không khuyến khích).
• Nếu bạn muốn kết nối với khách hàng bằng tài khoản Zalo OA và hay chạy Zalo Ads, hãy chọn cách 2.
• Nếu bạn không muốn dùng tài khoản Zalo OA, chỉ đơn giản chat để trao đổi với khách hàng, có thể chọn cách 3.