Wednesday, April 24, 2024
spot_imgspot_imgspot_imgspot_img
HomeWordpressKiến Thức WordpressCách fix lỗi click vào nút zalo trên Website

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

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.

img-2

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.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments