Wp OneKit Plugin liên hệ trong WordPress – Cách sử dụng bản Free & Pro

Hướng Dẫn Cấu Hình Cụm Nút Liên Hệ (Hotline, Zalo, Messenger) Chuẩn Chuyển Đổi Trong WordPress Bằng WP OneKit (Free & Pro)

• Nạp kèm thư viện biểu tượng bên ngoài cồng kềnh (như FontAwesome nặng từ 100KB – 300KB).
• Nhúng nhiều file JavaScript chạy ngầm gây cản trở chỉ số TBT (Total Blocking Time) và INP (Interaction to Next Paint) trong Core Web Vitals.
• Dễ phát sinh xung đột CSS với các theme hiện đại, khiến nút bị méo mó trên giao diện điện thoại hoặc che khuất các thành phần quan trọng khác.

1. So Sánh Tính Năng Cụm Nút Liên Hệ: Bản Free vs Bản Pro

2. Hướng Dẫn Cấu Hình Cụm Nút Liên Hệ Trên WP OneKit Pro

Bước 1: Mở Tab Cấu Hình Nút Liên Hệ

1. Đăng nhập vào bảng điều khiển quản trị WordPress (wp-admin).
2. Nhìn vào thanh menu điều hướng bên trái, bấm vào WP OneKit Pro.
3. Trên thanh tab ngang, chọn mục Nút liên hệ (biểu tượng ống nghe điện thoại màu xanh ngọc).

Bước 2: Kích Hoạt Module & Thiết Lập Vị Trí Hiển Thị

• Bật cụm nút liên hệ: Gạt công tắc [PRO] Bật cụm nút liên hệ sang trạng thái BẬT (màu xanh lá) để cho phép cụm nút xuất hiện ngoài Frontend website.
• Vị trí hiển thị: Trong menu thả xuống, bạn có 2 lựa chọn:
  • Hiện bên phải (Khuyên dùng): Đây là vị trí thuận tay nhất của hơn 85% người dùng smartphone (ngón tay cái dễ bấm nhất). Vị trí này phù hợp với hầu hết website doanh nghiệp, tin tức hoặc blog.
  • Hiện bên trái: Thích hợp khi website của bạn đã có sẵn các widget khác ở góc phải (ví dụ: nút Cuộn lên đầu trang – Back to Top, hoặc khung chat LiveChat/Tawk.to) nhằm tránh tình trạng các nút xếp chồng chéo lên nhau.

Bước 3: Cấu Hình Kênh Facebook Messenger

1. Tại mục Link hoặc ID Messenger (Facebook), gạt công tắc kích hoạt sang màu xanh.
2. Điền đường dẫn rút gọn của Fanpage theo mẫu chuẩn:

   Plaintext

   https://m.me/ID_FANPAGE_HOAC_USERNAME
   ```
   * *Ví dụ thực tế:* Nếu trang của bạn có ID số, bạn điền dạng `[https://m.me/1330116046855305](https://m.me/1330116046855305)`. Nếu có tên người dùng (username), bạn có thể điền `[https://m.me/atnseo](https://m.me/atnseo)`.
   

3. Khi khách hàng bấm vào biểu tượng này trên điện thoại, hệ thống sẽ tự động kích hoạt ứng dụng Messenger; nếu trên máy tính, trình duyệt sẽ mở thẳng khung chat Facebook trong tab mới.

Bước 4: Cấu Hình Kênh Zalo Chat

1. Tại dòng Số Zalo, gạt công tắc bật tính năng.
2. Nhập chính xác số điện thoại đăng ký tài khoản Zalo cá nhân hoặc Zalo Official Account (OA) của doanh nghiệp (Ví dụ: 0909512866).
3. Cơ chế Deep-Link của plugin sẽ tự động chuyển đổi số điện thoại thành liên kết [https://zalo.me/0909512866](https://zalo.me/0909512866). Khách hàng chỉ cần chạm nhẹ là có thể gửi tin nhắn kết bạn và xem danh mục sản phẩm ngay lập tức.

Bước 5: Cấu Hình Hotline & Hiệu Ứng Bung Số Tự Động

1. Tại dòng Số điện thoại (Hotline), bật công tắc kích hoạt.
2. Nhập số điện thoại tiếp nhận cuộc gọi của bạn (Ví dụ: 0909512866).
3. Cơ chế hoạt động thông minh trên các thiết bị:
   • Trên điện thoại di động: Gắn thẻ giao thức tel:0909512866. Khi khách bấm vào, màn hình điện thoại sẽ tự động mở bàn phím gọi số, người dùng không cần phải nhớ hay chép lại số điện thoại ra giấy.
   • Trên máy tính để bàn (Desktop): Tích hợp hiệu ứng Hover Expand (Bung số khi rê chuột). Khi người dùng di chuột vào biểu tượng ống nghe, một dải băng màu sắc trang nhã sẽ trượt mượt mà sang bên cạnh, hiển thị rõ ràng số điện thoại 0909 512 866 kèm lời kêu gọi “Gọi ngay”. Khách hàng ngồi trước máy tính có thể nhìn thấy số để cầm điện thoại lên bấm gọi ngay lập tức.

Bước 6: Lưu Thiết Lập & Xóa Cache

1. Sau khi hoàn tất các trường dữ liệu, bấm vào nút màu xanh Lưu cài đặt ở góc dưới bên trái.
2. Nếu website có cài đặt plugin bộ nhớ đệm (như LiteSpeed Cache, WP Rocket), hãy bấm Purge All Caches (Xóa toàn bộ cache) trên thanh quản trị để mã CSS mới được cập nhật ngay lập tức ra ngoài trang chủ.

3. Hướng Dẫn Sử Dụng Nút Liên Hệ Trên WP OneKit Free

1. Truy cập vào menu WP OneKit $\rightarrow$ chọn tab Cài đặt (Settings).
2. Cuộn xuống mục Nút liên hệ cơ bản (Contact Widget).
3. Gạt bật tính năng và điền 2 trường thông tin:
   • Số Hotline: Điền số điện thoại nhận cuộc gọi.
   • Số Zalo: Điền số tài khoản Zalo liên hệ.
4. Bấm Lưu thay đổi. Cụm nút liên hệ 2 nút cơ bản sẽ được hiển thị ngay ngắn ở góc dưới bên phải màn hình website của bạn.

Gợi ý: Phiên bản Free đáp ứng tốt các website blog cá nhân hoặc web thông tin đơn giản. Tuy nhiên, nếu bạn vận hành website bán hàng, dịch vụ xây dựng, bất động sản hoặc trang chuyển đổi cần tối ưu thẩm mỹ với hiệu ứng bung số, kênh Facebook Messenger và tính năng đảo vị trí trái/phải, việc nâng cấp lên WP OneKit Pro là khoản đầu tư rất xứng đáng.

4. Tại Sao Cụm Nút Của WP OneKit Tối Ưu Cho SEO & Core Web Vitals?

1. 100% SVG Inline — Loại Bỏ Hoàn Toàn Font Icon

• Dung lượng cực kỳ nhẹ: Toàn bộ cụm nút chỉ tiêu tốn chưa đầy 3.5 KB.
• Độ sắc nét tuyệt đối: Biểu tượng hiển thị rõ nét trên mọi độ phân giải màn hình Retina mà không bị mờ hay răng cưa.
• Không phát sinh thêm bất kỳ truy vấn HTTP (HTTP Request) nào ra bên ngoài hosting.

2. Không Gây Lỗi CLS (Cumulative Layout Shift)

• Cụm nút liên hệ của WP OneKit sử dụng thuộc tính định vị tuyệt đối position: fixed; kết hợp với tọa độ cố định sẵn ở tầng CSS (bottom: 20px; right: 20px;).
• Khi trang web tải xuống, vị trí của nút đã được trình duyệt tính toán trước, hoàn toàn không đẩy lệch bất kỳ dòng chữ hay hình ảnh nào của nội dung chính, giúp điểm số CLS luôn duy trì ở mức 0.000 tuyệt đối.

3. Hiệu Ứng Rung Lắc (CSS Animation) Không Chiếm CPU

5. Những Lưu Ý Quan Trọng Khi Thiết Lập Để Đạt Chuyển Đổi Tối Đa

1. Kiểm tra kỹ định dạng số điện thoại:
   Khi nhập số Hotline và Zalo, hãy nhập chuỗi số liền nhau, không dùng dấu chấm hay dấu gạch ngang (Ví dụ: nhập 0909512866, không nhập 0909.512.866 hay 0909-512-866) để tránh lỗi không tự nhảy cuộc gọi trên một số dòng điện thoại Android cũ.
2. Kiểm tra liên kết Messenger:
   Đảm bảo Fanpage của bạn đã bật chế độ công khai nhận tin nhắn từ người lạ. Luôn thử bấm vào link [https://m.me/](https://m.me/)... từ một tài khoản Facebook cá nhân khác để kiểm tra xem khung chat có mở ra thành công hay không.
3. Phối hợp hài hòa với nút Back to Top:
   Nếu theme website của bạn đang có nút mũi tên cuộn lên đầu trang nằm ở góc dưới bên phải, hãy cân nhắc chuyển cụm nút WP OneKit sang Hiện bên trái[cite: 47]. Sự phân bổ hai bên cân đối sẽ tạo cảm giác thoáng đãng, chuyên nghiệp và người dùng không bao giờ bấm nhầm[cite: 47].
4. Kiểm tra thực tế trên điện thoại thực:
   Sau khi lưu cài đặt và xóa cache máy chủ, hãy dùng chính điện thoại cá nhân của bạn truy cập vào website:
   • Chạm vào nút Gọi điện xem bàn phím gọi có bật lên ngay không.
   • Chạm vào nút Zalo xem ứng dụng Zalo có mở thẳng vào khung chat không.