How do I add a dynamic phone number to the HTML5 phone number link href attribute?

Question

For the telephone numbers on my site, I have the following HTML:

<span class="rTapNumber"></span>

The class here activates a script and a random number is inserted inside the span (for tracking purposes.

I want to use telephone links for mobile ie <a href="tel:01234567890"> but the number can't be hard-coded... how can I get the dynamic number that's used in the <span> to go into this href attribute?

The resulting code should be like this:

<span class="rTapNumber"><a href="tel:+441234567890">01234567890</a></span>

Hope you can help.

Answer 1

I used the following (the rTapPostReplacement function is the function which gets called by responsetap after it's replaced all the numbers).

function rTapPostReplacement() {

    // loop through all links which are using the HTML5 href="tel:000000" property
    $('a[href*="tel:"]').each(function(){

        // get the replaced text/number
        var number = $(this).text();

        // replace all spaces with nothing (in case the tel: property doesn't like spaces)
        number = number.replace(/\s+/g, '').toLowerCase();

        // update the href attribute to the replaced number
        $(this).attr('href', 'tel:' + number);
    });
}

UPDATE 6 April, 2016

I've since found out that this callback will only get called once (the first time ResponseTap replacements occur). This is because the default implementation of ResponseTap only replaces numbers which are visible on-screen. Any subsequent number replacements don't trigger the callback for whatever reason.

So the only way to make sure this works reliably, is to modify the ResponseTap tracking code so that:

adiRVO = false; // This is set to true by default

This replaces all numbers in the document at the same time, regardless of visibility.

So the full implementation looks like this

// The ResponseTap tracking code
var adiInit = "00000", adiRVO = false; // Set to false
var adiFunc = null;
(function() {
    var adiSrc = document.createElement("script"); adiSrc.type = "text/javascript";
    adiSrc.async = true;
    adiSrc.src = ("https:" == document.location.protocol ? "https://static-ssl" : "http://static-cdn")
        + ".responsetap.com/static/scripts/rTapTrack.min.js";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(adiSrc, s);
})();


// The ResponseTap callback
function rTapPostReplacement() {

    // loop through all links which are using the HTML5 href="tel:000000" property
    $('a[href*="tel:"]').each(function(){

        // get the replaced text/number
        var number = $(this).text();

        // replace all spaces with nothing (in case the tel: property doesn't like spaces)
        number = number.replace(/\s+/g, '').toLowerCase();

        // update the href attribute to the replaced number
        $(this).attr('href', 'tel:' + number);
    });
}

Answer 2

For some reason this question seems to still be hot despite being 6 years old, so here's my solution using the MutationObserver API

            <script type="text/javascript">
                document.addEventListener('DOMContentLoaded', () => {
                    let observer = new MutationObserver(callback);

                    let observerOptions = {
                        childList: true,
                        attributes: false,
                        characterData: false,
                        subtree: false,
                    };

                    let node = document.getElementById('rTapNumber');
                    
                    function callback(mutations) {
                        mutations.forEach(el => {
                            if(el.type === 'childList') {
                                document.querySelector('.responseTapLink').href = 'tel:' + el.target.innerText;
                                observer.disconnect();
                            }
                        });
                    }

                    observer.observe(node, observerOptions);
                });
            </script>
            <a class="responseTapLink" href=""><span id="rTapNumber" class="rTapNumber00000">00000 000 000</span></a>

The general method is as follows

• Add your <a> tag around the ResponseTap container with a unique class/ID
• Give the responsetap container a unique ID so that we can get the Node Easily
• Set up the Mutation Observer to watch the responsetap container for changes to the childList
• When a mutation occurs (the new phone number being inserted), set the href of your <a> tag to the innerText of the responseTap container
• Disconnect the observer