Cách Tạo Nút Gọi Trên Website WordPress

Cách gọn nhất để tạo nút gọi trên website WordPress là gắn số điện thoại vào liên kết tel: trong Button block hoặc thẻ HTML. Chỉ dùng plugin khi bạn cần nút nổi, điều kiện hiển thị theo thiết bị, nhiều kênh liên hệ hoặc cấu hình tracking mà theme không hỗ trợ.

Dù dùng cách nào, nút cần có nhãn rõ, đủ tương phản, dùng được bằng bàn phím, không che nội dung trên mobile và được thử trên thiết bị thật. Nếu website WordPress nền chưa hoàn tất, hãy xử lý theme, plugin, backup và staging theo lộ trình cấu hình WordPress từ đầu trước khi thêm tính năng. Cùng Techvon tìm hiểu thêm

1. Nút gọi trên website WordPress hoạt động như thế nào?

Nút gọi thực chất là một liên kết có URI bắt đầu bằng tel:. Khi người dùng kích hoạt, thiết bị hoặc trình duyệt chuyển yêu cầu cho ứng dụng có thể xử lý cuộc gọi. Trên điện thoại, đó thường là ứng dụng gọi; trên máy tính, hành vi phụ thuộc phần mềm và cấu hình nên có thể hiện hộp chọn ứng dụng hoặc không thực hiện cuộc gọi.

Với số điện thoại công khai, ưu tiên định dạng quốc tế bắt đầu bằng dấu + và mã quốc gia; không dùng khoảng trắng trong giá trị tel:. Phần chữ hiển thị có thể được định dạng dễ đọc, nhưng số đích phải được kiểm tra thủ công.

Click vào nút chỉ cho biết người dùng đã cố mở trình gọi, không chứng minh cuộc gọi được kết nối hoặc tạo khách hàng. Tracking click và đo cuộc gọi là hai lớp dữ liệu khác nhau.

2. Nên dùng plugin hay liên kết tel: với HTML/CSS?

Khi plugin phù hợp

Plugin phù hợp khi người quản trị cần đổi số, vị trí, màu, lịch hoặc thiết bị hiển thị mà không sửa code. Một plugin cần được đánh giá theo khả năng đặt accessible name, kiểm soát mobile/desktop, vị trí, khoảng cách safe area, sự kiện tracking, asset tải thêm, cập nhật và cách gỡ dữ liệu.

Không cần cài plugin chỉ để tạo một link tel:. Tránh các plugin cùng tạo nhiều floating widget, animation hoặc script tracking vì chúng có thể che nhau và làm giao diện khó kiểm thử.

Khi nên dùng giải pháp nhẹ bằng code

Dùng block hoặc HTML/CSS khi bạn chỉ cần một số điện thoại và một vị trí ổn định. Cách này ít phụ thuộc hơn nhưng cần người chịu trách nhiệm cập nhật số, style và kiểm thử sau khi theme đổi.

Nếu nút phải xuất hiện trên toàn site, ưu tiên hook, block pattern, template part hoặc khu vực theme hỗ trợ thay vì dán bản sao vào mọi bài. Chọn phương án đúng với block theme/classic theme đang dùng và thử trên staging.

3. Cách tạo nút gọi WordPress bằng plugin

Bài này không xếp hạng plugin. Hãy tìm loại plugin call button có tính năng vừa đủ, đọc documentation và thử trên staging. Trước khi cài, kiểm tra theme hoặc page builder đã có floating button hay chưa.

Tiêu chí chọn plugin

• Cho nhập số theo định dạng quốc tế và hiển thị nhãn chữ, không chỉ icon.
• Kiểm soát thiết bị, trang, vị trí và khoảng cách với cạnh màn hình.
• Có focus state, hỗ trợ bàn phím và không tạo animation liên tục.
• Không tải tài nguyên không cần thiết trên trang không hiển thị nút.
• Giải thích dữ liệu tracking, quyền riêng tư và cách vô hiệu hóa.
• Có tài liệu, cập nhật và tương thích có thể kiểm tra tại thời điểm dùng.

Cấu hình số, vị trí và thiết bị hiển thị

1. Sao lưu và cài plugin trên staging.
2. Nhập số đã xác minh; không copy số mẫu trong bài.
3. Đặt nhãn như “Gọi tư vấn” hoặc “Gọi cửa hàng” để mục đích rõ.
4. Chọn trang và thiết bị hiển thị theo hành trình người dùng.
5. Đặt vị trí không đè cookie banner, chat, navigation hoặc nút submit.
6. Xóa cache, thử bằng bàn phím và thiết bị thật trước khi public.

Tên menu và tùy chọn khác nhau giữa plugin. Nếu không tìm thấy một khả năng trong documentation, đừng giả định plugin có chỉ vì screenshot quảng cáo.

4. Cách thêm nút gọi bằng HTML và CSS

Tạo link tel: có nhãn rõ nghĩa

1. Thêm block Buttons rồi tạo một Button tại vị trí người đọc đã có đủ thông tin để gọi.
2. Đặt nhãn theo hành động, chẳng hạn “Gọi tư vấn”, thay vì chỉ dùng icon điện thoại.
3. Gắn liên kết dạng tel:+84XXXXXXXXX, thay số mẫu bằng số đã xác minh rồi lưu thay đổi.
4. Mở trang trên điện thoại, nhấn nút và đối chiếu số trong trình gọi trước khi public.

Nếu editor hoặc theme không giữ URI tel:, hoặc khi cần kiểm soát markup, hãy dùng Custom HTML block trên trang thử nghiệm.

<a class="tv-call-button" href="tel:+84XXXXXXXXX" aria-label="Gọi số điện thoại mẫu">
  Gọi tư vấn
</a>

+84XXXXXXXXX là ký hiệu placeholder kỹ thuật, không phải số có thể gọi. Hãy thay nó bằng số doanh nghiệp đã xác minh. Thuộc tính aria-label cung cấp tên truy cập rõ hơn; nếu chữ trong nút đã đầy đủ và giống mục đích, có thể không cần lặp bằng label. Không đặt số bí mật lên frontend vì link hiển thị công khai trong mã trang.

Chèn code an toàn bằng child theme hoặc khu vực được theme hỗ trợ

CSS dưới đây minh họa một nút inline. Thêm nó qua child theme hoặc khu vực CSS được theme hỗ trợ, không sửa trực tiếp parent theme. Tên class có prefix riêng để giảm xung đột.

.tv-call-button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 10px;
  background: #1477F2;
  color: #FFFFFF;
  text-decoration: none;
  font-weight: 700;
}

.tv-call-button:focus-visible {
  outline: 3px solid #06B6D4;
  outline-offset: 3px;
}

Ví dụ không ép nút thành floating. Nếu cần nút nổi, thêm một class riêng với position: fixed, khoảng cách cạnh màn hình và z-index vừa đủ; sau đó kiểm tra safe area, footer, cookie banner và widget khác. Không dùng z-index cực lớn để che mọi thành phần.

5. Tối ưu vị trí, kích thước và khả năng truy cập trên mobile

Nút gọi nên xuất hiện nơi người dùng đã có đủ context để gọi: header mobile, khu vực liên hệ, trang dịch vụ hoặc sau thông tin quan trọng. Một nút nổi toàn site có thể hữu ích với doanh nghiệp phụ thuộc cuộc gọi, nhưng gây nhiễu ở bài kiến thức hoặc luồng checkout.

• Dùng nhãn hành động rõ; không dựa vào icon điện thoại đơn độc.
• Vùng bấm đủ lớn, có khoảng cách với nút chat, menu và điều hướng hệ thống.
• Giữ focus state, tương phản và thứ tự tab hợp lý.
• Không rung, nhấp nháy hoặc phóng to liên tục để ép chú ý.
• Trên desktop, cân nhắc hiển thị số dạng text để người dùng có lựa chọn khác.
• Nếu chỉ mở trong giờ làm việc, nói rõ giờ thay vì để người dùng gọi mà không có người nhận.

Kiểm tra nhiều kích thước màn hình, cả khi zoom và khi bàn phím ảo mở. Đặc biệt xem nút có che nội dung cuối trang, nút chấp nhận cookie, thanh mobile của theme hoặc thông báo hệ thống hay không.

6. Kiểm thử, theo dõi và khắc phục lỗi thường gặp

Nếu cần tracking, tạo event cho click vào link tel: qua hệ thống analytics/tag manager đã được site phê duyệt. Đặt tên sự kiện nhất quán, không gửi số điện thoại hoặc dữ liệu cá nhân không cần thiết và kiểm tra consent. Xem hướng dẫn kết nối Google Analytics trước khi cấu hình đo click.

Checklist test nên gồm iOS/Android nếu đối tượng dùng cả hai, trình duyệt desktop, bàn phím, screen reader, chế độ zoom, trang có cookie banner và trang có chatbot. Sau cập nhật theme/plugin hoặc cache, chạy lại luồng.

7. Khi nào nên dùng chatbot, form hoặc popup thay cho nút gọi?

Nút gọi phù hợp khi nhu cầu cần trao đổi đồng bộ, người trực có thể trả lời và số điện thoại là kênh đã công bố. Chatbot phù hợp câu hỏi lặp hoặc thu thập thông tin theo luồng; xem cách tích hợp chatbot cho website nếu đó là nhu cầu chính.

Form phù hợp khi người dùng cần gửi yêu cầu ngoài giờ, đính kèm thông tin hoặc muốn được gọi lại; hướng dẫn tạo form liên hệ và đăng ký xử lý phần đó. Popup chỉ nên dùng khi thời điểm và nội dung thật sự phù hợp; bài thiết kế popup không gây khó chịu giải thích riêng cách triển khai.

Website có thể kết hợp các kênh, nhưng không nên hiển thị nút gọi, chat, popup và form nổi cùng lúc trên màn hình nhỏ. Chọn một hành động chính cho từng trang và để kênh phụ ở vị trí ít cạnh tranh hơn.

8. Câu hỏi thường gặp

Link tel: có hoạt động trên máy tính không?

Có thể mở ứng dụng gọi hoặc hộp chọn handler nếu máy đã cấu hình. Hành vi không đồng nhất như điện thoại, nên hãy hiển thị số hoặc kênh liên hệ thay thế khi phù hợp.

Nên dùng plugin hay tự thêm HTML/CSS cho nút gọi?

Dùng HTML/CSS cho nhu cầu đơn giản và có người bảo trì code. Dùng plugin khi cần nút nổi, điều kiện hiển thị hoặc cấu hình không code, nhưng phải kiểm tra compatibility và asset.

Làm sao để nút gọi không che nội dung trên điện thoại?

Dành khoảng trống với cạnh màn hình, kiểm tra safe area và footer, điều chỉnh breakpoint, đồng thời giới hạn số floating widget. Thử cả khi cookie banner và bàn phím ảo xuất hiện.

Có nên làm nút gọi rung liên tục không?

Không nên. Animation liên tục gây mất tập trung, có thể ảnh hưởng accessibility và không chứng minh tăng chuyển đổi. Nếu dùng chuyển động, phải tiết chế và tôn trọng tùy chọn giảm chuyển động.

Có thể đo lượt nhấp vào số điện thoại bằng Google Analytics không?

Có thể ghi event click cho link tel: nếu analytics/tag manager và consent được cấu hình đúng. Event chỉ đo click, không xác nhận cuộc gọi kết nối hoặc kết quả kinh doanh.