{"id":14954,"date":"2025-04-14T12:20:03","date_gmt":"2025-04-14T12:20:03","guid":{"rendered":"https:\/\/www.webmaxy.co\/blog\/?page_id=14954"},"modified":"2025-04-29T11:22:40","modified_gmt":"2025-04-29T11:22:40","slug":"free-whatsapp-qr-code-generator","status":"publish","type":"page","link":"https:\/\/www.webmaxy.co\/blog\/free-whatsapp-qr-code-generator\/","title":{"rendered":"free-whatsapp-qr-code-generator"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n    <link rel=\"stylesheet\" href=\"https:\/\/cdn.webmaxy.co\/website\/css\/intlTelInput.css\">\n<\/head>\n\n<body>\n    <div class=\"container-box wrq\">\n        <div class=\"row\">\n            <div class=\"col-md-6 text-center\">\n                <img decoding=\"async\" src=\"https:\/\/img.freepik.com\/free-photo\/teenager-with-reminder-about-using-social-media-with-respect-no-more-bullying_23-2151963922.jpg?semt=ais_hybrid&#038;w=740\" alt=\"User\" class=\"user-photo\" \/>\n            <\/div>\n            <div class=\"col-md-6\">\n                <h4><strong>Create WhatsApp Click to Chat QR Codes<\/strong><\/h4>\n\n                <form id=\"whatsappForm\">\n                    <input type=\"hidden\" name=\"dial_code\" id=\"dial_code\">\n                    <div class=\"mb-3\">\n                        <label for=\"name\" class=\"form-label input-label\">Name<\/label>\n                        <input type=\"text\" class=\"form-control\" id=\"name\" name=\"name\" placeholder=\"Enter name\" required \/>\n                    <\/div>\n                    <div class=\"mb-3\">\n                        <label for=\"name\" class=\"form-label input-label\">Email (Business\/Work)<\/label>\n                        <input type=\"text\" class=\"form-control\" id=\"email\" name=\"email\" placeholder=\"Enter email\" required \/>\n                    <\/div>\n                    <div class=\"mb-3\">\n                        <label class=\"form-label input-label\">Enter your WhatsApp Number<\/label>\n                        <input type=\"tel\" id=\"mobile\" name=\"mobile\" class=\"form-control\" placeholder=\"Enter mobile number\" required>\n                    <\/div>\n                    <div class=\"mb-3\">\n                        <label class=\"form-label input-label\">Welcome Message (Optional)<\/label>\n                        <textarea id=\"message\" name=\"message\" class=\"form-control\" rows=\"2\" placeholder=\"Hi, Can you help?\"><\/textarea>\n                    <\/div>\n                    <button id=\"submit-btn\" type=\"submit\" class=\"btn btn-success mb-3\" style=\"margin-top: 10px;margin-bottom: 10px;\">Generate QR Now<\/button>\n                    <button id=\"loder-btn\" type=\"button\" class=\"btn btn-success mb-3\" style=\"margin-top: 10px;margin-bottom: 10px;display:none;\" disabled>Generating QR&#8230;<\/button>\n                <\/form>\n\n                <div class=\"mb-3\" id=\"qr_div\" style=\"display:none\">\n                    <label class=\"form-label input-label\">Your WhatsApp Click To Chat Link<\/label>\n                    <input type=\"text\" id=\"generatedLink\" class=\"form-control mb-2\" readonly>\n                    <button class=\"btn btn-outline-secondary btn-sm copy-btn\" style=\"margin-top: 10px;display: inline-flex;align-items: center;\" onclick=\"copyLink()\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" fill=\"#4CAF50\" viewBox=\"0 0 24 24\">\n                            <path d=\"M16 1H8C6.9 1 6 .9 6 2v2H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-2V2c0-1.1-.9-2-2-2zm-4 2h4v2h-4V3zm6 16H4V6h2v2h8V6h2v13z\" \/>\n                        <\/svg>\n                        &nbsp;Copy to Clipboard<\/button>\n                    <a href=\"#\" id=\"openLink\" target=\"_blank\" class=\"btn btn-outline-success btn-sm\" style=\"margin-top: 10px; display: inline-flex;align-items: center;\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" fill=\"#25D366\" viewBox=\"0 0 24 24\">\n                            <path d=\"M12.001 2.001a9.935 9.935 0 0 0-9.95 9.94c0 1.757.457 3.38 1.253 4.82L2 22l5.356-1.323a9.958 9.958 0 0 0 4.645 1.18c5.49 0 9.95-4.457 9.95-9.94s-4.46-9.94-9.95-9.94zm.002 18.174c-1.48 0-2.926-.394-4.208-1.14l-.302-.179-3.175.786.847-3.1-.195-.319a8.007 8.007 0 0 1-1.23-4.24c0-4.44 3.615-8.05 8.063-8.05 4.448 0 8.063 3.61 8.063 8.05 0 4.438-3.615 8.05-8.063 8.05zm4.463-5.934c-.244-.122-1.444-.71-1.667-.79-.223-.082-.386-.122-.55.123-.162.244-.63.788-.773.95-.143.163-.285.183-.53.061-.245-.122-1.033-.38-1.966-1.21-.727-.647-1.218-1.448-1.36-1.692-.143-.245-.015-.377.107-.5.11-.11.245-.285.367-.428.122-.143.163-.244.245-.407.082-.163.04-.306-.02-.428-.061-.122-.55-1.325-.755-1.817-.199-.476-.403-.412-.55-.42l-.469-.009c-.163 0-.428.061-.652.285s-.856.837-.856 2.043c0 1.205.877 2.369 1 2.534.122.163 1.728 2.64 4.192 3.699.587.253 1.045.404 1.401.516.588.187 1.122.16 1.545.097.471-.07 1.444-.59 1.647-1.162.203-.571.203-1.06.142-1.162-.061-.102-.224-.163-.469-.285z\" \/>\n                        <\/svg>\n                        &nbsp;Open in WhatsApp\n                    <\/a>\n\n                    <div class=\"qr-container\">\n                        <h6>Your WhatsApp QR Code<\/h6>\n                        <div class=\"qr-preview\" id=\"qrPreview\">\n                            <img decoding=\"async\" id=\"qrCode\" src=\"\" alt=\"QR Code\" width=\"200\">\n                        <\/div>\n                        <br><br>\n                        <a id=\"downloadBtn\" class=\"btn btn-success mt-2\" download=\"whatsapp_qr.png\" style=\"color:white !important\">\u2b07\ufe0f Download QR Code<\/a>\n                    <\/div>\n                <\/div>\n\n            <\/div>\n        <\/div>\n    <\/div>\n<\/body>\n\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/qrcode@1.5.1\/build\/qrcode.min.js\"><\/script>\n<script src=\"https:\/\/cdn.webmaxy.co\/website\/js\/phone\/intlTelInput.min.js\"><\/script>\n<script src=\"https:\/\/www.webmaxy.co\/blog\/wp-content\/plugins\/wpforms\/assets\/lib\/jquery.validate.min.js\"><\/script>\n\n<script>\n    var dialCode = \"\";\n    var iti = \"\";\n    var jq = jQuery.noConflict();\n\n    var publicDomains = [\n        'gmail.com',\n        'yahoo.com',\n        'outlook.com',\n        'hotmail.com',\n        'aol.com',\n        'icloud.com',\n        'mail.com',\n        'zoho.com',\n        'protonmail.com',\n        'yandex.com',\n        'gmx.com',\n        'live.com',\n        'msn.com',\n        'rediffmail.com',\n        'inbox.com',\n        'fastmail.com',\n        'hushmail.com',\n        'mail.ru',\n        'seznam.cz',\n        'yopmail.com'\n    ];\n\n\n    jq(window).load(function() {\n        var input = document.querySelector(\"#mobile\");\n        iti = intlTelInput(input, {\n            initialCountry: \"auto\",\n            geoIpLookup: function(success, failure) {\n                fetch(\"https:\/\/ipapi.co\/json\")\n                    .then(function(res) {\n                        return res.json();\n                    })\n                    .then(function(data) {\n                        success(data.country_code);\n                    })\n                    .catch(function() {\n                        failure();\n                    });\n            },\n            utilsScript: \"https:\/\/cdn.webmaxy.co\/website\/js\/phone\/utils.js\"\n        });\n\n        input.addEventListener('countrychange', function() {\n            var dialCode = iti.getSelectedCountryData().dialCode;\n            if (dialCode) {\n                jq('#mobile').val('+' + dialCode);\n                jq('#dial_code').val(dialCode);\n            }\n        });\n\n        jq.validator.addMethod(\"validMobile\", function(value, element) {\n            if (!iti.isValidNumber()) {\n                jq('.iti__selected-flag').css('padding', '0px 12px 25px 8px');\n            } else {\n                jq('.iti__selected-flag').css('padding', '0px 12px 0px 8px');\n            }\n            return iti.isValidNumber(); \/\/ uses intlTelInput instance\n        }, \"Please enter a valid WhatsApp number\");\n\n        jq.validator.addMethod(\"noPublicEmail\", function(value, element) {\n            var emailDomain = value.split('@')[1]; \/\/ Get domain part of email\n            return !publicDomains.includes(emailDomain); \/\/ Return true if it's not a public domain\n        }, \"Please enter a business\/work email address (public domains are not allowed)\");\n\n        jq(\"#whatsappForm\").validate({\n            rules: {\n                name: {\n                    required: true,\n                    minlength: 2\n                },\n                email: {\n                    required: true,\n                    email: true,\n                    noPublicEmail: true\n                },\n                mobile: {\n                    required: true,\n                    validMobile: true\n                }\n            },\n            messages: {\n                name: {\n                    required: \"Please enter your name\",\n                    minlength: \"Name must be at least 2 characters\"\n                },\n                email: {\n                    required: \"Enter your business email address\",\n                    email: \"Enter your valid business email address\",\n                    noPublicEmail: \"Please enter a business email address (public domains are not allowed)\"\n                },\n                mobile: {\n                    required: \"Please enter your whatsapp number\",\n                }\n            },\n            submitHandler: function(form) {\n\n                const phone = document.getElementById('mobile').value.trim();\n                const message = encodeURIComponent(document.getElementById('message').value.trim());\n\n                if (!phone.match(\/[0-9]{10,15}\/)) {\n                    alert(\"Please enter a valid WhatsApp number (no spaces).\");\n                    return;\n                }\n\n                var request_body = {\n                    \"app_type\": 'WhatsApp Commerce\u00a0',\n                    \"name\": jq(\"#name\").val(),\n                    \"email\": jq(\"#email\").val(),\n                    \"mobile\": jq(\"#mobile\").val(),\n                    \"dial_code\": jq('#dial_code').val(),\n                    \"contact_list_ids\": [\"9b7ecdfd-761b-4b88-8dc7-5a06bd3ecb26\"],\n                    \"custom_attributes\": [{\n                            \"key\": \"Note\",\n                            \"key_type\": \"TEXT\",\n                            \"value\": \"Webmaxy Qr Page\"\n                        },\n                        {\n                            \"key\": \"hearaboutus\",\n                            \"key_type\": \"TEXT\",\n                            \"value\": \"Webmaxy Qr Page\"\n                        }\n                    ],\n                };\n\n                jq('#submit-btn').hide();\n                jq('#loder-btn').show();\n                jq.ajax({\n                        url: \"https:\/\/performanceapi.webmaxy.co\/api\/contact\/import-users\",\n                        type: 'POST',\n                        dataType: \"json\",\n                        headers: {\n                            \"Authorization\": \"NDczZmIwNmMtMzk2Ny00ODA2LWFjYjMtNTEzZTBlYmUwYjY4OjkxZTlhNDEzLTUzMmYtNDZiMi04NTMwLTEyZDdiMDczZTJiMw==\",\n                            \"Content-Type\": \"application\/json\",\n                            \"Accept\": \"application\/json\",\n                            \"x-tenant-id\": \"badf9293-7ca6-48f5-9f03-9f25cbb71250\"\n                        },\n                        data: JSON.stringify(request_body),\n                    })\n                    .done(function(msg) {\n                        jq('#whatsappForm').trigger(\"reset\");\n                        jq('#loder-btn').hide();\n                        jq('#submit-btn').show();\n\n                        jq('#qr_div').css('display', 'block');\n\n                        const form = document.getElementById('whatsappForm');\n                        const linkInput = document.getElementById('generatedLink');\n                        const qrCode = document.getElementById('qrCode');\n                        const openLink = document.getElementById('openLink');\n                        const downloadBtn = document.getElementById('downloadBtn');\n\n                        const baseUrl = `https:\/\/wa.me\/${phone.replace(\/^\\+\/, \"\")}`;\n                        const finalUrl = message ? `${baseUrl}?text=${message}` : baseUrl;\n\n                        \/\/ Set link input and button\n                        linkInput.value = finalUrl;\n                        openLink.href = finalUrl;\n\n                        \/\/ Generate QR Code dynamically based on user input\n                        QRCode.toDataURL(finalUrl, function(err, url) {\n                            if (err) {\n                                console.error(err);\n                                return;\n                            }\n\n                            \/\/ Set QR code image\n                            qrCode.src = url;\n                            qrCode.style.display = 'block';\n\n                            \/\/ Optional: Enable download\n                            downloadBtn.href = url;\n                            downloadBtn.style.display = 'inline-block';\n                        });\n\n                    });\n            }\n        });\n    });\n\n    \/\/ form.addEventListener('submit', function(e) {\n    \/\/     e.preventDefault();\n    \/\/ });\n\n    function copyLink() {\n        const input = document.getElementById(\"generatedLink\");\n        input.select();\n        input.setSelectionRange(0, 99999);\n        document.execCommand(\"copy\");\n    }\n<\/script>\n<style>\n    .modal {\n        background: rgba(0, 0, 0, 0.6) !important;\n        z-index: 9999;\n    }\n\n    .modal-dialog {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%) !important;\n    }\n\n    .error {\n        color: red;\n        font-weight: 400;\n        font-size: 14px;\n    }\n\n    .container-box {\n        max-width: 800px;\n        margin: 0 auto;\n        margin-bottom: 50px !important;\n        margin-top: 30px !important;\n        margin-top: 15px;\n        margin-bottom: 10px;\n        border: 1px solid #ddd;\n        padding: 30px;\n        border-radius: 12px;\n        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);\n    }\n\n    .qr-preview {\n        border: 1px solid #ccc;\n        \/* padding: 15px; *\/\n        display: inline-block;\n        background: #f9f9f9;\n    }\n\n    .input-label {\n        font-weight: 400;\n        font-size: 14px;\n        padding-top: 10px;\n    }\n\n    .qr-container {\n        \/* text-align: center; *\/\n        margin-top: 30px;\n    }\n\n    .copy-btn {\n        margin-right: 10px;\n    }\n\n    img.user-photo {\n        width: 180px;\n        border-radius: 10px;\n        margin-bottom: 20px;\n    }\n\n    .iti.iti--allow-dropdown.iti--show-flags {\n        width: 100%;\n    }\n\n    .full-vav-overlay .overlay-navigation .nav-link {\n        width: inherit;\n    }\n\n    .iti__selected-flag {\n        padding: 0px 12px 0px 8px;\n    }\n<\/style>\n\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Create WhatsApp Click to Chat QR Codes Name Email (Business\/Work) Enter your WhatsApp Number Welcome Message (Optional) Generate QR Now [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":6,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-14954","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.11 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>free-whatsapp-qr-code-generator - Webmaxy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webmaxy.co\/blog\/free-whatsapp-qr-code-generator\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"free-whatsapp-qr-code-generator - Webmaxy\" \/>\n<meta property=\"og:description\" content=\"Create WhatsApp Click to Chat QR Codes Name Email (Business\/Work) Enter your WhatsApp Number Welcome Message (Optional) Generate QR Now [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webmaxy.co\/blog\/free-whatsapp-qr-code-generator\/\" \/>\n<meta property=\"og:site_name\" content=\"Webmaxy\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-29T11:22:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/img.freepik.com\/free-photo\/teenager-with-reminder-about-using-social-media-with-respect-no-more-bullying_23-2151963922.jpg?semt=ais_hybrid&w=740\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webmaxy.co\/blog\/free-whatsapp-qr-code-generator\/\",\"url\":\"https:\/\/www.webmaxy.co\/blog\/free-whatsapp-qr-code-generator\/\",\"name\":\"free-whatsapp-qr-code-generator - Webmaxy\",\"isPartOf\":{\"@id\":\"https:\/\/www.webmaxy.co\/blog\/#website\"},\"datePublished\":\"2025-04-14T12:20:03+00:00\",\"dateModified\":\"2025-04-29T11:22:40+00:00\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webmaxy.co\/blog\/free-whatsapp-qr-code-generator\/\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webmaxy.co\/blog\/#website\",\"url\":\"https:\/\/www.webmaxy.co\/blog\/\",\"name\":\"Webmaxy\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webmaxy.co\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"free-whatsapp-qr-code-generator - Webmaxy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webmaxy.co\/blog\/free-whatsapp-qr-code-generator\/","og_locale":"en_US","og_type":"article","og_title":"free-whatsapp-qr-code-generator - Webmaxy","og_description":"Create WhatsApp Click to Chat QR Codes Name Email (Business\/Work) Enter your WhatsApp Number Welcome Message (Optional) Generate QR Now [&hellip;]","og_url":"https:\/\/www.webmaxy.co\/blog\/free-whatsapp-qr-code-generator\/","og_site_name":"Webmaxy","article_modified_time":"2025-04-29T11:22:40+00:00","og_image":[{"url":"https:\/\/img.freepik.com\/free-photo\/teenager-with-reminder-about-using-social-media-with-respect-no-more-bullying_23-2151963922.jpg?semt=ais_hybrid&w=740"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.webmaxy.co\/blog\/free-whatsapp-qr-code-generator\/","url":"https:\/\/www.webmaxy.co\/blog\/free-whatsapp-qr-code-generator\/","name":"free-whatsapp-qr-code-generator - Webmaxy","isPartOf":{"@id":"https:\/\/www.webmaxy.co\/blog\/#website"},"datePublished":"2025-04-14T12:20:03+00:00","dateModified":"2025-04-29T11:22:40+00:00","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webmaxy.co\/blog\/free-whatsapp-qr-code-generator\/"]}]},{"@type":"WebSite","@id":"https:\/\/www.webmaxy.co\/blog\/#website","url":"https:\/\/www.webmaxy.co\/blog\/","name":"Webmaxy","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webmaxy.co\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"}]}},"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"tf-client-image-size":false,"1536x1536":false,"2048x2048":false,"keydesign-grid-image":false,"keydesign-left-image":false,"crp_thumbnail":false},"uagb_author_info":{"display_name":"Adam Wilson","author_link":"https:\/\/www.webmaxy.co\/blog\/author\/admin\/"},"uagb_comment_info":0,"uagb_excerpt":"Create WhatsApp Click to Chat QR Codes Name Email (Business\/Work) Enter your WhatsApp Number Welcome Message (Optional) Generate QR Now [&hellip;]","_links":{"self":[{"href":"https:\/\/www.webmaxy.co\/blog\/wp-json\/wp\/v2\/pages\/14954","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webmaxy.co\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.webmaxy.co\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.webmaxy.co\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webmaxy.co\/blog\/wp-json\/wp\/v2\/comments?post=14954"}],"version-history":[{"count":59,"href":"https:\/\/www.webmaxy.co\/blog\/wp-json\/wp\/v2\/pages\/14954\/revisions"}],"predecessor-version":[{"id":15182,"href":"https:\/\/www.webmaxy.co\/blog\/wp-json\/wp\/v2\/pages\/14954\/revisions\/15182"}],"wp:attachment":[{"href":"https:\/\/www.webmaxy.co\/blog\/wp-json\/wp\/v2\/media?parent=14954"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}