Nút gọi điện rung lắc cho website có tác dụng tạo thuận tiện cho người dùng khi muốn liên hệ trực tiếp từ trang web. Bài viết này sẽ “Hướng dẫn tạo nút gọi điện rung lắc cho website” bằng mã code phục vụ cho website viết code thuần hoặc dùng mã nguồn wordpress.
Tạo nút gọi điện rung lắc cho website bằng mã code
Để tạo một nút gọi điện rung lắc cho website, bạn cần sử dụng HTML và JavaScript. Dưới đây là hướng dẫn chi tiết:
Hãy tạo một nút gọi điện trên trang web của bạn bằng cách thêm đoạn mã HTML sau vào vị trí bạn muốn hiển thị nút này:
<button id=”callButton”>Gọi điện rung lắc</button>
Tiếp theo, vào phần JavaScript của trang web (hoặc tạo một tệp .js riêng) và thêm đoạn mã sau để xử lý việc gọi điện:
// Lắng nghe sự kiện nhấp chuột vào nút gọi điện
document.getElementById(“callButton”).addEventListener(“click”, function() {
// Kiểm tra xem trình duyệt có hỗ trợ chức năng gọi điện hay không
if (‘contacts’ in navigator) {
// Tìm kiếm danh bạ trong trình duyệt
navigator.contacts.select([‘name’, ‘tel’], { multiple: false })
.then(function(contacts) {
// Kiểm tra xem đã chọn số điện thoại nào hay chưa
if (contacts.length > 0) {
// Gọi điện với số điện thoại được chọn
window.location.href = ‘tel:’ + contacts[0].tel[0].value;
}
})
.catch(function(error) {
// Xử lý lỗi nếu có
console.error(‘Lỗi khi truy cập vào danh bạ:’, error);
});
} else {
// Xử lý trường hợp trình duyệt không hỗ trợ chức năng gọi điện
console.error(‘Trình duyệt không hỗ trợ chức năng gọi điện.’);
}
});
Lưu và tải lại trang web của bạn. Bây giờ, khi người dùng nhấp chuột vào nút “Gọi điện rung lắc,” trình duyệt sẽ yêu cầu quyền truy cập danh bạ, sau đó cho phép chọn số điện thoại để thực hiện cuộc gọi.
Click NGAY NHẬN Hỗ Trợ Tư Vấn MIỄN PHÍTạo nút gọi điện rung lắc cho website wordpress bằng mã code
- Đăng nhập vào trang quản trị WordPress của bạn.
- Tạo hoặc chỉnh sửa một trang hoặc bài viết mà bạn muốn hiển thị nút gọi điện rung lắc.
- Trong trình soạn thảo Gutenberg hoặc trình soạn thảo cổ điển, chèn khối Text (văn bản) vào nơi bạn muốn hiển thị nút gọi điện rung lắc.
- Trong khối văn bản, gõ đoạn mã HTML sau:
<button id=”callButton”>Gọi điện rung lắc</button>
Lưu và cập nhật trang hoặc bài viết của bạn.
Tiếp theo, bạn cần thêm một đoạn mã JavaScript để xử lý việc gọi điện khi người dùng nhấp vào nút. Có thể thêm đoạn mã JavaScript này trong một tệp JavaScript riêng hoặc trong trình soạn thảo chủ đề của WordPress. Dưới đây là ví dụ về việc thêm đoạn mã JavaScript trực tiếp vào trình soạn thảo Gutenberg:
- Chọn “Chỉnh sửa” trên trang hoặc bài viết chứa nút gọi điện.
- Chọn biểu tượng “Điểm ba chấm” và chọn “Chỉnh sửa HTML”.
- Chèn đoạn mã JavaScript sau vào cuối đoạn mã HTML:
<script>
document.getElementById(“callButton”).addEventListener(“click”, function() {
if (‘contacts’ in navigator) {
navigator.contacts.select([‘name’, ‘tel’], { multiple: false })
.then(function(contacts) {
if (contacts.length > 0) {
window.location.href = ‘tel:’ + contacts[0].tel[0].value;
}
})
.catch(function(error) {
console.error(‘Lỗi khi truy cập vào danh bạ:’, error);
});
} else {
console.error(‘Trình duyệt không hỗ trợ chức năng gọi điện.’);
}
});
</script>
4. Lưu và cập nhật trang hoặc bài viết của bạn.
Bây giờ, trên trang hoặc bài viết của bạn, nút “Gọi điện rung lắc” sẽ được hiển thị và khi người dùng nhấp vào nút đó, trình duyệt sẽ yêu cầu quyền truy cập danh bạ và cho phép chọn số điện thoại để thực hiện cuộc gọi.
Click NGAY NHẬN Hỗ Trợ Tư Vấn MIỄN PHÍTạo nút gọi điện rung lắc cho website wordpress bằng plugin
Để tạo một nút gọi điện rung lắc cho website WordPress bằng plugin, bạn có thể sử dụng plugin “Call Now Button”. Dưới đây là hướng dẫn chi tiết:
- Đăng nhập vào trang quản trị WordPress của bạn.
- Trong menu bên trái, điều hướng đến “Plugins” và chọn “Thêm mới”.
- Tìm kiếm plugin “Call Now Button” trong cửa sổ tìm kiếm ở góc trên cùng bên phải.
- Khi tìm thấy plugin “Call Now Button” của Jerry Rietveld, nhấp vào “Cài đặt ngay” và sau đó chọn “Cài đặt” để bắt đầu cài đặt plugin.
- Sau khi cài đặt xong, chọn “Kích hoạt” để kích hoạt plugin.
- Trong menu bên trái, bạn sẽ thấy mục “Call Now Button”. Nhấp vào đó để truy cập vào cấu hình plugin.
- Trong trang cấu hình, bạn có thể tùy chỉnh các tùy chọn hiển thị của nút gọi điện rung lắc, bao gồm vị trí, màu sắc, biểu tượng và số điện thoại hiển thị.
- Sau khi tùy chỉnh xong, nhớ nhấn nút “Lưu thay đổi” để áp dụng cấu hình.
- Bây giờ, nút gọi điện rung lắc sẽ được hiển thị trên trang web của bạn theo cấu hình đã chọn trong plugin.
Lưu ý: rằng các bước trên chỉ áp dụng cho plugin “Call Now Button”.
Có thể bạn quan tâm: Tối ưu website chuẩn seo, cài nút gọi điện rung lắc có bị ảnh hưởng.
Click NGAY NHẬN Hỗ Trợ Tư Vấn MIỄN PHÍ
