Un link para llamar a un número de teléfono


Cuando ya es prácticamente impensable hacer una página web sin pensar en dispositivos móviles, una de las características que puede agregar un valor añadido a la experiencia de usuario, y por tanto al entorno, es que cuando se ofrezca un número de teléfono se dé la posibilidad que al hacer clic encima se pueda proceder a marcarlo.


Y esto aparentemente tan sofisticado, para el desarrollador únicamente supone incluir el número de teléfono en un link como cualquier otro enlace, eso sí teniendo en cuenta que, al igual que cuando un enlace a web incluye el prefijo http: y un enlace a una dirección de correo incluye el prefijo mailto:, en este caso se deberá incluir el prefijo tel: precediendo al número.


Un ejemplo:



Haciendo clic se muestra el Marcador
Teléfono: <a href="tel:+88999999999">+88 999 99 99</a>

El prefijo es opcional, pero bastante recomendable dado que si se trata de una página pública se puede acceder desde cualquier punto del planeta.

El resultado tiene aspecto de enlace:

Teléfono: +88 999 99 99

Y en este caso al hacer clic sobre el número desde un dispositivo móvil aparecerá automáticamente la opción de llamar a este.

¿Y cómo hacer un link para enviar SMSs?


Pero además es posible usar este método para enviar un SMS cambiando el prefijo tel: por el prefijo sms: en el enlace.

Envía un mensaje a <a href="sms:+88999999999">mi teléfono</a>

Y quedaría así:

Envía un mensaje a mi teléfono



Compatibilidad con otros dispositivos

Eso sí, existe un problemilla que es que si no se dispone de marcador o se accede desde un ordenador "típico" sobremesa estos enlaces no funcionarán. por lo que para mostrarlos lo ideal sería detectar el tipo dispositivo y así permitir el enlace únicamente si el cliente es un dispositivo móvil.

He podido resolver esto con un sencillo javascript en el enlace.


Teléfono: <a href="tel:+88999999999" onClick="return (navigator.userAgent.match(/Android|iPhone|iPad|iPod|Mobile/i))!=null;">+88 999 99 99</a>

Caso que podemos probar a continuación:

Teléfono: +88 999 99 99

Resultando una solución cerrada y elegante al no mostrar fallos en ningún dispositivo. ¿Tenéis algún otro método? ¿Sugerencias?

9 comentarios :

Alejandro Rodriguez dijo...

Saludos he notado que en los computadores que tienen instaldo skype el link si el código java funciona llamando al programa.

Existe alguna forma de que se detecte si el usuario no tiene instalado skype entonces el código java haga su trabajo y si no, que corra por skype.

Sergi Perpiñá dijo...

Gracias por tu comentario.

javascript, al no tener acceso al sistema, no es capaz de diferenciar si una aplicación está instalada por lo que no es posible diferenciar este caso que comentas.

Desconozco si con Java hay alguna posiblidad de realizar esta consulta.

Javier dijo...

Hola,

Gracias por su aporte, en especial por el javascript que evita problemas en PC de escritorio.
Mi duda es que tal como aparece si está en PC de escritorio no hace nada ¿ como pudiera enviársele a otra página, es decir enlace a "paginax.htm" ?

Sergi Perpiñá dijo...

Hola Javier,
entonces lo que se tendría que modificar es el onclick para cambiar la manera de actuar en la ejecución del evento.

Haría algo así como:

onclick="((navigator.userAgent.match(/Android|iPhone|iPad|iPod|Mobile/i))!=null)?return true:window.location.assign(nuevaURL);"

Suerte!

Anónimo dijo...

Hola,

Lo siento pero no mr funciona.

¿ Podrias poner el código completo para ir a Google si no estamos en smartphone ?

Javier dijo...

Hola,

A mi tampoco me funciona.

¿ Podrías aportar una función JS que si se pincha en un PC vaya a una URL ?

Sergi Perpiñá dijo...

Lo siento. Al contestar rápido no lo había testeado... Poniendo el if completo sí funciona.

if((navigator.userAgent.match(/Android|iPhone|iPad|iPod|Mobile/i))!=null){return true}else{window.location.assign('http://www.google.com');}

Saludos!

Javier dijo...

Hola,

Lamento ser tan pesado, pero no me funciona :

a href="tel:+34984986172" title="Pulse para llamarnos directamente" onClick="
if((navigator.userAgent.match(/Android|iPhone|iPad|iPod|Mobile/i))!=null){return true}else{window.location.assign('http://www.google.com');}
">+34 984.986.172</a

He intentado crearme una función JS con el código suministrado, pero da error sintáctico en Dreamweaver.

¿ Pdrías aportar código completo del enlace en funcionamiento ?

Gracias por la ayuda.

Anónimo dijo...

Muchas gracias. Muy útil. :D