Making a phone number active on mobile devices

Hi Folks,
I have a site ( a which contains a mobile phone number in the footer, and when tapped, this phone number activates a box with a ‘call’ button together with a cancel button - a great experience for mobile users.

I want to duplicate this functionality within the header div as it is obviously more advantageous to have a prominent number in the header as this is the first thing visitors see.

I can get the number to show up in a separate div below the header-image.jpg, but I cannot get it to behave like the phone number in the footer. i.e. Firing the call/cancel box.

Any help appreciated.

<div id="home-header" class="visible-sm visible-md visible-lg"><img src="" class="img-responsive"></div>
        <div class="visible-xs">
            <img src="" class="img-responsive">
<div class="visible-xs">0408 900 351</div>

Try looking up microformats. There’s an aspect of that that looks at markup for address type information, including phone numbers, that’s based around vCard formatting. I’m sure I’ve read somewhere that things like iOS can pick up on that and recognise a phone number it can use in the way you describe.

Sure, the basic method is to wrap the number in an A tag:

<a href="tel:+441234567">0123 4567</a>

Note that you need a + symbol and international dialing code in the href value (my example show +44 for the UK)

Thanks for your reply, I managed to get this working. Computer black magic was at play ;-(
After 3 hours of failure, all of a sudden for no apparent reason it worked.

Appreciate your help.

Thanks bluedreamer.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.