Crear un enlace html para llamar por teléfono desde tu web

Tutorial para crear un enlace html para llamar por teléfono

Ernesto BarrachinaDesarrollo web4 Comentarios

4.3/5 - (14 votos)

Si has caído en este post es porque le has preguntado a Google cómo crear un enlace html para llamar por teléfono desde una web, cómo poner un link de llamada en el footer, cómo hacer un número de teléfono clicable… o algo parecido.

Por suerte para mí, me ha tocado darte la respuesta. Así que vamos allá 😉

Sintácticamente, los hiperenlaces a un número telefónico se escriben con este código HTML:

<a href="tel: + Signo más + número de prefijo del país + número de teléfono">Anchor text</a>

Aunque quizás prefieras una explicación algo menos escueta 😀

Cómo crear un enlace html para llamar por teléfono desde una página web

¡O sea, lo que viene siendo el enlace a un teléfono!




Se supone que crear links ya sabes. Así que daremos por sabida la parte de HTML, para centrarnos en los parámetros necesarios para generar los enlaces especiales para llamar por teléfono:

  1. El código del país.
  2. El número de teléfono en cuestión.

* Si no sabes el prefijo de tu país, Wikipedia te puede ayudar.

Con estos datos, ya podemos generar un enlace de llamada a teléfonos, que funcionará tanto con teléfonos fijos como con teléfonos móviles.

➡ Y te servirá para añadir vínculos de llamada en cualquier tipo de página web, porque no se limita solo a WordPress.

Código HTML de un link para llamar por teléfono

La diferencia entre los enlaces de llamada y los normales es que, en vez de una URL a una página web o a un archivo de descarga, usaremos como destino para el atributo «href» del hipervínculo:

tel: + número telefónico «con prefijo», todo junto «sin espacios en blanco».

Por ejemplo, con los siguientes datos:

  1. Código del país: +34 (España).
  2. Teléfono: 555 00 55 00.

El enlace para llamar al teléfono quedaría así:

<a href="tel:+34555005500">Anchor text</a>

Igual que ocurre con el resto de enlaces, como anchor text puedes utilizar lo que quieras; ya que solo es la palabra sobre la que hacer clic para llamar por teléfono.

Para que quede bien claro que es un botón de llamada, como texto ancla suele utilizarse el propio número de teléfono, un icono, o algo representativo de una llamada.

De esta forma, el resultado del enlace de llamada es inequívoco:

<a href="tel:+34555005500">555 005 500</a>

Puedes copiar y pegar este código, y usarlo como un generador de enlace de llamadas. Solo recuerda cambiar el número de teléfono del ejemplo por uno real.

Para finalizar, indicar que estos vínculos funcionan perfectamente cuando el clic en el enlace de llamada se realiza desde un smartphone; que tiene incluida esa prestación. Sin embargo, para realizar llamadas desde un ordenador deberás tener configurado previamente un gestor de llamadas.

Si te ha gustado comparte

About the Author

Ernesto Barrachina

Facebook Twitter Google+

Me dedico al diseño web Valencia y tengo pasión por las herramientas de diseño gráfico, así como por compartir tips de diseño web en forma de consejos y tutoriales "para todos los públicos".

4 Comentarios en “Crear un enlace html para llamar por teléfono desde tu web”

  1. excelente , consulta hay alguna forma de crear un contador para ese enlace tel:
    para saber cuantas veces es clickeado o solo se podría con google analitycs.
    saludos desde Chile.

  2. Una duda , se podría llamar automáticamente al teléfono sin necesidad de ver el numero y le tengan que dar a llamar?

Deja una respuesta

INFORMACIÓN BÁSICA SOBRE LA PROTECCIÓN DE TUS DATOS

Todos las datos marcados con asterisco (*) son obligatrorios. Si no los indicas no podrás comentar en el blog.

Responsable de la web: Ernesto Barrachina Rubio (EBWEB) Finalidad de los datos: Gestionar los comentarios que realizas en este blog. Legitimación: Consentimiento del interesado. Destinatarios: No se comunican los datos a nadie más. Plazo de conservación de los datos: Hasta que no se solicite su supresión por el interesado. Los datos que me facilitas estarán ubicados en los servidores de Dinahosting (mi proveedor de hosting) fuera de la UE en Otros. Dinahosting está ubicado en la UE, con los niveles de protección adecuados según Comisión de la UE. Ver política de privacidad de Dinahosting. Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en ebweb@ebweb.es así como el derecho a presentar una reclamación ante una autoridad de control. Puedes consultar la información adicional y detallada sobre Protección de Datos en mi página web: https://ebweb.es, así como consultar mi política de privacidad.

Tu comentario quedará pendiente de moderación. Vuelve en dos o tres días para ver la respuesta y tu comentario publicados.

Muchas gracias por comentar ☺