How do I make a clickable phone number for phones?

Mobile
1

How would I make a phone number clickable on a mobile phone?
StackOverflow showed an HTML method: < a href=“tel:+1-800-555-5555”>Call 1-800-555-5555< /a >
(Note that I added spaces in the A Href opening an closing tags above so the code would show up. The spaces are removed in the line below where you see the hyperlink.)
Call 1-800-555-5555

I put that in an HTML Widget and tested it locally. It looks like it would work but of course I just see a hideous blue hyperlink in Times New Roman. I have no idea how to format that (via CSS I suppose) to get an aesthetically pleasing look.
I was really hoping there’d be a simple option on a button action for Phone Number, as there is for Compose Email and Go To URL.

Any ideas?
Thanks very much everyone.

1 Like
2

You might be able to put the code into the innerHTML of an element...

<a href="tel:5551234567">Call (555)123-4567</a>

you could add css styling there too, or in the HTML Header

To get rid of the underline, use this in your HTML Header...

<style> 
     a {
     text-decoration: none !important;
     }
</style>

And you can select any font in the Typography Inspector - NOTE: All links will not be underlined.

4 Likes
3

Thanks so much for your help. I was able to get it to work quite nicely using your method.
One remarkable aspect is that I can select some text (such as the phone number or button label) and tweak the colors and font styles with Hype’s Typography GUI, and it automatically updates in the HTML code with inline formatting. (Note the custom Letter Spacing and Text Shadow settings in the pic below. None of that was typed. I just edited it in the GUI.)
I’m extremely impressed with Hype.

HypePhoneNumberTest2.png1160×702 157 KB

5 Likes
4

Hype is good stuff..............

1 Like
5

You could also change the text color.
<style> a { text-decoration: none !important; color: #007CB5; } a:link { color: #007CB5; } </style>

2 Likes
6

And how would this be done for a graphic object?

7

You can link an image by editing the inner HTML and placing this in the Inner HTML of the element. This just makes an invisible link the full width and height of the image:

<a href="tel:5551234567"><div style="width:100%;height:100%;"></div></a>

8

And to control the color of a text link in the inner html of a text object (carets for parentheses):

 <style> 
     a:link {
color: #AEA380;
</style>


 <a href="tel:1234567890">123 456-7890</a>
9

You would set this property:

<a href="#" style="color:#FFFFFF">my link</a>

Or, use this in the head:

<style>
a { color:#FFFFFF }
</style>

And uncheck ‘protect from external styles’ in the Document Inspector.

10

Also, you can make a button with a phone icon over it and then add in the actions inspector, on Mouse Click, Go to URL action, and put the phone number on the field:
tel:+(555)1234567

1 Like
12

Check out http://mobile.lightbenders.com/index/html. I have the phone tag in the html for the text object:

<a href="tel:2512364838" ;="" style="color: #10496B"> 251 &nbsp;236-4838</a>

(The ="" - which seems superfluous - allows the style tag to work. Not sure why. The &nbsp was inserted by Hype.)

I also have the text-decoration tag in the head html to eliminate the underline:

> <style> 
>      a {
>      text-decoration: none;
>      }
> </style>

The number is underlined and when I click on the phone number from my computer it tries to navigate to a page "tel:2512364838"

What would be the code that I can insert in the inner HTML that makes the text link work but without an underline and without trying to go to a web page?

13

Did you try...

text-decoration: none !important;