Cómo crear enlaces HTML para llamar por teléfono desde tu web

Hoy vamos a hablar sobre los enlaces HTML a números de teléfono y sobre cómo incluirlos en tu web o blog para poder recibir llamadas de tus usuarios y/o clientes. Gracias al protocolo tel:, podemos indicar a cualquier link de una web que en lugar de enlazar otra sección o página, trate de realizar una llamada al número de teléfono indicado, tan simple como añadir un enlace a un texto o a una foto.

Lo bueno de este método es que puedes incluir tu número de teléfono en la cabecera, en el pié de página o en un Widget de WordPress. El visitante no necesitará copiar o escribir manualmente el número en su móvil. Tan solo con hacer clic en el enlace HTML se lanzará una llamada al número indicado. Esto es muy útil sobre todo si navegamos desde nuestro smartphone en una web con diseño responsive y queremos hacer o recibir una llamada de teléfono.

Además, como veremos más adelante la compatibilidad entre navegadores del atributo y protocolo href="tel:" es bastante buena por lo que podemos incluir el enlace en nuestro blog o web y tener la seguridad de que vamos a recibir llamadas correctamente en la gran mayoría de los casos.

Pero empecemos por lo más básico en HTML.

Elemento HTML <a></a> y protocolo tel: para llamar por teléfono

En HTML los enlaces se definen por el elemento <a></a>. Si incluimos el elemento vacío no conseguiremos nada. Necesitamos al menos dos datos para que el navegador sepa lo que debe hacer:

  • Dónde queremos que nos lleve el enlace: en nuestro caso un número de teléfono y un protocolo para que use ese número para hacer una llamada. Esto se define en el atributo href
  • Qué queremos que se muestre en la web para que el usuario haga clic: aquí puede ser un texto, un botón, una imagen…nosotros vamos a optar por usar el número de teléfono con un texto de llamada a la acción. De esta forma forma quien quiera llamar puede hacer clic en el enlace HTML o bien puede apuntar el número para llamar en otro momento. Esto se define entre la etiqueta de apertura del enlace <a> y la etiqueta de cierre </a>

Pues bien, partiendo de estos datos vamos a componer nuestro enlace HTML para poder llamar por teléfono. Este sería el código:

<a href="tel:600123456">Contacto: 600123456</a>

El enlace quedaría de la siguiente forma:

¿Sencillo verdad? Con esto ya nos aseguramos que al hacer clic en el enlace desde un móvil, automáticamente se lance una llamada. Sin embargo, ¿qué sucede si estamos navegando desde un dispositivo que no puede realizar llamadas como una tablet o un portátil? Pues bien, en este caso el navegador nos preguntará con que aplicación o programa queremos realizar la acción asociada a nuestro enlace (llamar). Algo parecido a la siguiente captura:

Aviso al usar un enlace HTML para llamar desde el ordenador
Este sería el aviso si hacemos clic en un enlace para llamar por teléfono desde un ordenador con el navegador Mozilla Firefox

Si tienes instalado algún programa o aplicación que permita realizar llamadas, puedes hacer uso de ella, por lo que podemos decir que el atributo y protocolo href="tel" no es solo para realizar llamadas desde móviles. Uno de ellos es Skype, aunque si te estás preguntando cómo añadir un enlace a tu web para que tus usuarios puedan iniciar un Skype contigo, sigue leyendo pues también hay una opción.

Dando estilo y diseño a nuestros enlaces HTML de llamadas

Ejemplos de botones HTML para llamadas
Algunos ejemplos de enlaces para llamar por teléfono convertidos en botones gracias a CSS

No todo va a ser HTML. Para conseguir que un usuario haga clic en un enlace es muy importante el diseño del mismo. Al ser el enlace un elemento HTML tenemos a nuestra disposición todo el repertorio de CSS para dar estilo al texto, colores, fondos… Para indicar al navegador que aplique estos estilos solo a nuestro enlace de llamada y no a todos los enlaces de nuestra web, podemos optar por definir una clase o bien usar un selector CSS avanzado. Si quieres saber más sobre CSS puedes leer nuestra introducción aquí.

Vamos con algunos ejemplos básicos para dar estilo a un enlace HTML para llamar por teléfono:

Dos detalles interesantes a la hora de dar estilo a nuestros enlaces de teléfono. Primero hemos usado un selector por atributo, muy útil cuando no tenements acceso al HTML y no podemos editar ni añadir ninguna clase al enlace que contiene el número de teléfono. Mediante la selección por atributo podemos dar estilos a todos aquellos enlaces cuyo atributo href empiecen por tel:.

En segundo lugar la opción de añadir un icono de un teléfono para hacer más evidente que se trata de un número al que podemos llamar. Podríamos también optar por añadir el icono y no mostrar nada de texto, si queremos darle más minimalismo al botón de llamar. Para ello nos ayudaremos del pseudo-elemento CSS ::before para añadir el icono.

/* Selector CSS por atributo */
a[href^="tel:"] {
    font-size: 24px;
    display: inline-block;
    margin: 20px 30px;
}

/* Añadiendo icono como pseudoelemento CSS */
a[href^="tel:"]::before {
    content: "0e";
    margin-right: 0.5em;
}

Código de enlace HTML para llamadas por Skype

El botón para llamar por teléfono funciona correctamente si navegamos por la web y hacemos clic desde un móvil. Sin embargo desde un ordenador de sobremesa, portátil o tablet sin teléfono asociado no funcionará. Si queremos realizar o recibir llamadas mediante un botón en nuestra web en estos dispositivos, debemos contar con una aplicación tipo Skype y componer un botón específico para llamar por Skype.

Simplemente sustituiremos el protocolo que usábamos para el número de teléfono tel: por el protocolo propio de Skype en el atributo href. Lo siguiente que debemos usar es nuestro nombre de usuario seguido por el signo de interrogación ? y la acción a realizar, en este caso queremos llamar por Skype, sería call. Así quedaría nuestro código:

<a href="skype:nombredeusuario?call">Llámeme por Skype</a></code

Si quieres usar las opciones avanzadas de los enlaces HTML para llamar por Skype puedes consultar la documentación oficial en Español o Inglés. Ya solo quedaría darle estilos a estos nuevos botones siguiendo el mismo proceso que usamos con los enlaces HTML para llamar por teléfono.

Enlace para llamar desde el menú de navegación de WordPress

Si utilizas WordPress y quieres añadir tu número de teléfono a la cabecera o al menú de navegación para que esté siempre visible y puedan llamarte, primero debes configurar un menú personalizado en WordPress. Aquí tienes los pasos, es muy sencillo.

Cómo crear un enlace html al teléfono en WordPress

Una vez tengas el menú creado y tus páginas y categorías añadidas, puedes añadir un elemento extra llamado «enlace personalizado» donde puedes incluir el protocolo y atributo que necesites en lugar de un enlace común. En nuestro caso tel:600123456. En el segundo campo podemos incluir el texto que queremos se muestre en dicho botón de llamar. Finalmente añadimos este nuevo elemento al menú de navegación.

Por último podemos darle al botón de llamar un estilo especial para resaltarlo de alguna forma, ya sea mediante un fondo de color o cambiando algún valor en el estilo de los textos mediante CSS. Para ello sigue este tutorial con algunos ejemplos.

Añadir enlaces para llamar por teléfono en HTML nunca fue tan fácil

Como has podido ver gracias a HTML crear enlaces y botones para realizar una llamada telefónica nunca había sido tan fácil. Podemos ubicar en enlace en diferentes sitios representativos de una web o blog (cabecera, footer, área de widgets…) pero también en cualquier parte del contenido (integrado dentro de un artículo o en los comentarios).

Espero que el tutorial haya sido de ayuda y ya estés recibiendo llamadas de teléfonos desde tu web. Cualquier consulta no dudes en comentar. Suerte!

Comentarios (3)

  1. Es bastante útil esta funcionalidad sobre todo si tienes una empresa o proporcionas algún tipo de servicio, de esta manera te pueden llamar desde tu número telefónico con más facilidad.

    Lo tengo integrado en mi página web.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *