Trang chủ
Top Hosting
Cửa Hàng
Giao Diện Mẫu
BlogWordpress
Cách fix lỗi click vào nút zalo trên Website
Thời gian vừa qua thì lỗi kết nối tới Zalo trên website đã xuất hiện rất nhiều ở đa số tài khoản. Mình có thử nhắn nhờ bên Zalo support thì họ chỉ bảo đang bảo trì tính năng này và bảo mình đợi thêm. Nhưng mà đã qua hơn nửa năm rồi vẫn chưa thấy tiến triển gì. Nên nay mạo muội lang thang trên mạng và các group WordPress để học hỏi từ các anh lớn chia sẻ cách fix lỗi này và nay mình chia sẽ lại với các bạn. Mong sẽ phần nào đó giúp được các bạn trong vấn đề này nhé.
Bảng nội dung
Hướng giải quyết:
- Tận dụng mã qr code của zalo
- Truy cập trực tiếp tới zalo app qua Deep link chứ không thông qua web zalo nữa
Ưu điểm của code này:
- Tương thích với mọi button/link zale.me/{sđt} trên website đang có
- Không cần sửa lại code của button/link zalo đang có của website
- 1 hay nhiều sđt zalo trên website đều được
- Không cần tạo trang trung gian
- Hỗ trợ iOs, android, pc và trình duyệt nếu pc chưa cài phần mềm zalo
Ví dụ cụ thể:
- Link zalo gốc bị lỗi: https://zalo.me/0354562443
- Vẫn link đó trên website https://eragant.com/ bạn click vào vẫn chat được như thường nhé.
- Và đặc biệt là không phải sửa lại code button đó.
Code sửa lỗi link zalo.me/{sđt}
Chú ý là bạn không cần sửa gì ở button/link chat zalo của mình cả. Cứ để nguyên như cũ dạng zalo.me/{sđt} nhé
Code này cần thay lại sđt và mã qr code cho đúng. Có thể thêm 01 hoặc nhiều số zalo tuỳ vào web của bạn nha
Các lấy mã qrcode xem hướng dẫn cuối bài nha
Bạn mở file functions.php của theme đang kích hoạt và thêm đoạn code này vào nhé/
/*
* Code sửa lỗi link zalo.me/{sđt}
*/
add_action('wp_footer', 'devvn_fix_zalome', 999);
function devvn_fix_zalome(){
?>
<script>
var zalo_acc = {
"sdtzalo1" : "mã qr code 1",
"sdtzalo2" : "mã qr code 2",
};
function devvnCheckLinkAvailability(link, successCallback, errorCallback) {
var hiddenIframe = document.querySelector("#hiddenIframe");
if (!hiddenIframe) {
hiddenIframe = document.createElement("iframe");
hiddenIframe.id = "hiddenIframe";
hiddenIframe.style.display = "none";
document.body.appendChild(hiddenIframe);
}
var timeout = setTimeout(function () {
errorCallback("Link is not supported.");
window.removeEventListener("blur", handleBlur);
}, 2500);
var result = {};
function handleMouseMove(event) {
if (!result.x) {
result = {
x: event.clientX,
y: event.clientY,
};
}
}
function handleBlur() {
clearTimeout(timeout);
window.addEventListener("mousemove", handleMouseMove);
}
window.addEventListener("blur", handleBlur);
window.addEventListener(
"focus",
function onFocus() {
setTimeout(function () {
if (document.hasFocus()) {
successCallback(function (pos) {
if (!pos.x) {
return true;
}
var screenWidth =
window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth;
var alertWidth = 300;
var alertHeight = 100;
var isXInRange =
pos.x - 100 < 0.5 * (screenWidth + alertWidth) &&
pos.x + 100 > 0.5 * (screenWidth + alertWidth);
var isYInRange =
pos.y - 40 < alertHeight && pos.y + 40 > alertHeight;
return isXInRange && isYInRange
? "Link can be opened."
: "Link is not supported.";
}(result));
} else {
successCallback("Link can be opened.");
}
window.removeEventListener("focus", onFocus);
window.removeEventListener("blur", handleBlur);
window.removeEventListener("mousemove", handleMouseMove);
}, 500);
},
{ once: true }
);
hiddenIframe.contentWindow.location.href = link;
}
Object.keys(zalo_acc).map(function(sdt, index) {
let qrcode = zalo_acc[sdt];
const zaloLinks = document.querySelectorAll('a[href*="zalo.me/'+sdt+'"]');
zaloLinks.forEach((zalo) => {
zalo.addEventListener("click", (event) => {
event.preventDefault();
const userAgent = navigator.userAgent.toLowerCase();
const isIOS = /iphone|ipad|ipod/.test(userAgent);
const isAndroid = /android/.test(userAgent);
let redirectURL = null;
if (isIOS) {
redirectURL = 'zalo://qr/p/'+qrcode;
window.location.href = redirectURL;
} else if (isAndroid) {
redirectURL = 'zalo://zaloapp.com/qr/p/'+qrcode;
window.location.href = redirectURL;
} else {
redirectURL = 'zalo://conversation?phone='+sdt;
zalo.classList.add("zalo_loading");
devvnCheckLinkAvailability(
redirectURL,
function (result) {
zalo.classList.remove("zalo_loading");
},
function (error) {
zalo.classList.remove("zalo_loading");
redirectURL = 'https://chat.zalo.me/?phone='+sdt;
window.location.href = redirectURL;
}
);
}
});
});
});
//Thêm css vào site để lúc ấn trên pc trong lúc chờ check chuyển hướng sẽ không ấn vào thẻ a đó được nữa
var styleElement = document.createElement("style");
var cssCode = ".zalo_loading { pointer-events: none; }";
styleElement.innerHTML = cssCode;
document.head.appendChild(styleElement);
</script>
<?php
}Trong đoạn code trên bạn cần chú ý tới đoạn sau
var zalo_acc = {
"sdtzalo1" : "mã qr code 1",
"sdtzalo2" : "mã qr code 2",
};Đoạn này chính là sđt zalo của bạn và mã qr code của sđt đó. Ví dụ số zalo lỗi là 0123456 và mã qr lấy dc là abcxyz thì sẽ sửa thành
var zalo_acc = {
"0123456" : "abcxyz"
};Hướng dẫn lấy mã Qr code của zalo
Trên điện thoại bạn vào Zalo -> Nhấn vào Icon Quét mã QR ở góc bên phải màn hình -> Mã Qr của tôi -> Tải xuống.
Sau đó bạn dùng camera điện thoại của mình để quét mã Qr này thì nó sẽ hiện ra link Qr code. Lúc này thì link Qr lấy được có dạng: zalo://zaloapp.com/qr/p/h20x44xyz thì mã cần lấy chính là h20x44xyz
Hy vọng bài viết này sẽ giúp đỡ được bạn trong việc sử lỗi liên kết Zalo này.
