Cách fix lỗi click vào nút zalo trên Website

jakengoc Th10 8, 2023

Minute Read0

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é.

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
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

* Code sửa lỗi link zalo.me/{sđt}

add_action('wp_footer', 'devvn_fix_zalome', 999);

function devvn_fix_zalome(){

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",
    };

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"
    };

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.

huong dan cach fix loi zalo tren website

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.

jakengoc

Xin chào, mình là Ngọc Nguyễn, mình đã có hơn 4 năm kinh nghiệm làm việc với Wordpress. Hiện tại mình đang là Freelancer thiết kế Website. Mình thích chia sẽ và phục vụ cộng đồng, trước đây mình đã từng dành 2 năm để làm công việc tình nguyện. Đối với mình thì gia đình là quan trọng nhất.