Shopify "mailto:" tag issue

Question

I am having issue of external link in shopify store.

I am injecting script through my app for displaying a bubble with anchor tag for redirecting user to given link. But shopify is changing the anchor tag to the following link as mentioned below:-

 <a href="/cdn-cgi/l/email-protection#076e69616847736274732964686a"><span style="color:#999999;">??Click here </span></a>

And this link cause to 404 error and page not found.

This is my js code

if (typeof jQuery == 'undefined') {
    var headTag = document.getElementsByTagName("head")[0];
    var jqTag = document.createElement('script');
    jqTag.type = 'text/javascript';
    jqTag.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js';
    headTag.appendChild(jqTag)
} else {
    var $ = jQuery.noConflict()
}
var headTag = document.getElementsByTagName("head")[0];
var jqTag = document.createElement('script');
jqTag.type = 'text/javascript';
jqTag.src = '//cdn.jsdelivr.net/emojione/1.5.2/lib/js/emojione.min.js';
headTag.appendChild(jqTag)

$(document).ready(function(){
    var shop_name = Shopify.shop;
    $.ajax({
        url:'https://deepak.com/client/ajax_response.php',
        type:'post',
        data:{store_name:shop_name},
        success:function(data){
            if(data != '0'){
                $('body').append(data);
            }
        },
        error:function(){
            console.log('Network error');
        }
    })
});

and response returned is

<div id="bubbleChatBox"><a href="/cdn-cgi/l/email-protection#c5acaba3aa85b1a0b6b1eba6aaa8"><span style="color:#999999;">Click here </span></a>
</div><script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>

And I have not added email-decode.min.js but it is being added automatically to my response.

The link should display correctly like this (Desired Result):-

<a href="mailto:info@test.com"><span style="color:#999999;">Click here </span></a>

Please help me.

Answer 1

I didn't get how to resolve the issue with Shopify. But a trick made my code working.

I just change the "mailto" to "@mailto" while saving in database and After injecting script on shopify store. I changed the "@mailto" to "mailto" and it worked.

I used the following code to make it working.

<script>
    $("#bubbleChatBox a").each(function() {
        var text = $(this).attr("href");
        $(this).attr("href",text.replace("@mailto", "mailto"));
    });
</script>