En este artículo te explicaré cómo crear un enlace para llamar por teléfono desde tu página web. Es decir, que te puedan llamar para solicitar tus servicios, tan solo pulsando sobre un botón o texto que aparezca en alguna zona destacada de tu página web. Como por ejemplo el menú, el pie de página o en cualquier parte del texto.
Explicaré varios métodos para que puedas poner un enlace teléfono html, tengas el tipo de web que tengas.
Qué es un enlace de llamada de teléfono html
Lo primero es aclarar a qué nos referimos cuando hablamos de un enlace de llamada web o enlace para llamar por teléfono html:
Es un enlace que permite realizar llamadas telefónicas desde una web con solo pulsar un botón, sin necesidad de marcar el número manualmente. Funciona en dispositivos con capacidad de llamadas, como teléfonos móviles o aplicaciones de escritorio compatibles.
Se utiliza principalmente para facilitar un método de contacto a los usuarios que mejorar la accesibilidad y la conversión en páginas web orientadas a la atención al cliente, ventas o servicios. Aunque hoy en día casi todas las páginas cuentan con un link al teléfono.
Cómo crear un enlace para llamar por teléfono desde una web en HTML
La primera opción es la más básica y la que te servirá para cualquier tipo de web: el enlace para llamar por teléfono html puro y duro.
En este caso te basta con escribir el siguiente fragmento de código donde quieras que aparezca:
<a href=”tel: Signo más (+) + número de prefijo del país + tu número de teléfono”>Tu número de teléfono</a>
Si te fijas, es un enlace HTML normal con algunas peculiaridades, en el que tendremos que añadir los siguientes parámetro de enlace:
- Tel: que le indica al navegador que el enlace es de llamada.
- Signo más + el prefijo del país (+34 en el caso de España).
- Número de teléfono al que quieras que llamen (El nuestro es 673 02 77 66).
- Anchor text. Que será el texto sobre el que pulsemos.
Teniendo en cuenta lo anterior, el enlace de llamada debe quedarte así:
<a href=”tel: +34673027766″>¡Llama ahora!</a>
Solo con esto ya podrías implementar un enlace de llamada de teléfono en cualquier página web, incluso en WordPress desde el editor HTML. Aunque para los que prefieren mantenerse al margen de este te voy a presentar otras formas más fáciles y cómodas.
Eso sí, ten en cuenta que el enlace solo funcionará desde móviles y dispositivos de sobremesa con gestor de llamada configurado. Es decir, si no has configurado el gestor de llamada de tu ordenador Windows no funcionará el enlace.
Crear un enlace de llamar por teléfono en WordPress con el editor clásico
Si utilizas el editor clásico de WordPress lo tienes fácil, ya que puedes añadir el enlace de llamada como si fuera un enlace normal:
Para ello, solo tienes que seguir estos pasos:
- Escribe el número de teléfono o la frase en cuestión a pulsar (anchor text).
- Selecciónalo con el cursor.
- Clica el icono de enlaces de tu editor de WordPress.
- Pega el enlace de llamada telefónica con la siguiente estructura: tel:+34673027766
Más fácil imposible, ¿Verdad?
Crear un enlace para llamar por teléfono en páginas web con Gutenberg
En caso de que seas de los/as que prefiere añadir el enlace de llamada con el editor de bloques Gutenberg, es un poco más de lo mismo.
Estos son los 3 pasos a seguir:
- Abre el widget de párrafo (podrías usar otros).
- Pulsa sobre el icono de la cadena.
- En la ventana emergente introduce el enlace de llamada con la misma estructura que hemos estado usando.
Y… voilà!
Enlace para llamar desde la pagina web con Elementor sin saber programar
Si no te atreves con los editores anteriores o utilizas Elementor, gratis o PRO, y quieres poner un botón de llamada de teléfono en tu web es aún más sencillo.
Solo tienes que buscar el widget botón y añadir un enlace de llamada con la estructura antes mencionada, que en nuestro caso es: tel:+34673027766.
Solo te quedará dar estilo y publicar.
Cómo crear un botón de llamar por teléfono en una web con CSS
Para finalizar, vamos a poner en práctica nuestros conocimientos de CSS, dándole estilo de botón al enlace de llamada que podemos haber creado con HTML, con el editor de WordPress, etc. Algo que nos vendrá muy bien si no estamos utilizando un editor visual de diseño web.
Partiremos de un enlace de llamada de teléfono “a pelo”, y le aplicaremos el estilo de un botón de llamada para que destaque en la web y los usuarios sientan la necesidad de llamara contratar tus servicios.
Como cambios importantes con respecto a los ejemplo anteriores, en este caso añadiremos una clase CSS a nuestro botón de llamada.
El código HTML quedará de la siguiente forma:
<a class=”boton-llamar” href=”tel: +34673027766″>¡Llama ahora!</a>
En este caso, la clase asignada es “boton-llamar”, y será la clase CSS que utilizaremos para seleccionar al enlace desde nuestra regla.
<style>
.boton-llamar {
background-color: #a68e4f; /* Color de fondo inicial del botón de llamada */
color: white; /* Color del texto */
padding: 10px 20px; /* Espaciado interno */
text-decoration: none; /* Elimina el subrayado del enlace */
display: inline-block; /* Permite aplicar padding y centrado */
transition: background-color 0.3s; /* Suaviza la transición de colores */
}
.boton-llamar:hover { /* Para el cambio de color al pasar el cursor */
background-color: green; /* Color de fondo al pasar el cursor */
}
</style>
El botón de llamada de teléfono web del ejemplo quedará así:
¿Por qué deberías añadir un enlace de llamada en tu página web?
Después de este rollo querrás saber si todo este esfuerzo vale la pena, y la verdad es que sí. Te explico los motivos:
Incluir un link de llamada en una página web forma parte de una estrategia que te puede ayudar a mejorar la conversión y la experiencia del usuario.
En segundo lugar, permite que los visitantes contacten con el negocio de manera rápida y sencilla. Lo que es especialmente útil en sectores como la hostelería, donde sabemos que la inmediatez es algo fundamental.
Además, tener con un número de teléfono visible refuerza la confianza del usuario, ya que demuestra que detrás de la página web hay una empresa real, accesible y dispuesta a resolver dudas.
Otro factor a tener en cuenta es la optimización para dispositivos móviles. Actualmente, la mayoría del tráfico web proviene de smartphones, y los usuarios prefieren interacciones rápidas y directas. Rellenar un formulario puede resultar tedioso en pantallas pequeñas, mientras que un simple toque en un botón de llamada facilita el contacto.
Sin embargo, antes de implementarlo, es importante valorar si realmente se adapta al modelo de negocio. Para algunas empresas con procesos de compra automatizados, como las tiendas online, un enlace de llamada puede no ser la mejor opción.
Errores comunes al añadir enlaces de llamada HTML y cómo solucionarlos
A pesar de ser un recurso aparentemente sencillo, al implementar un enlace de llamada en una web es fácil cometer errores.
Uno de los problemas más frecuentes es que el enlace no funcione en ordenadores de escritorio. Para evitarlo, se recomienda añadir un mensaje aclaratorio o combinar el enlace con otras opciones de contacto, como WhatsApp, que funciona en cualquier ordenador.
Otro error habitual es escribir mal la estructura del enlace, lo que impide que funcione correctamente. El prefijo “tel” debe ir seguido del código de país y el número de teléfono, sin espacios ni caracteres adicionales. De lo contrario, algunos dispositivos podrían no reconocer el enlace y la llamada no se iniciaría.
Además, es fundamental asegurarse de que el enlace de llamada es visible y accesible. Colocarlo en una zona poco destacada o con un color que se confunda con el fondo puede reducir su efectividad.
Por otro lado, algunas webs optan por abrir el enlace de llamada en una nueva pestaña (target=”_blank”). Algo que no tiene mucho sentido, porque las llamadas se realizan directamente desde la aplicación del teléfono.
Finalmente, hay que tener en cuenta que no todos los usuarios están dispuestos a realizar una llamada. En algunos casos, prefieren opciones de contacto menos directas, como el correo electrónico o WhatsApp. Por ello, es recomendable ofrecer alternativas para no perder potenciales clientes que podrían sentirse más cómodos con otro tipo de comunicación.
Si conoces otras forma de añadir enlaces de llamada en una página web háznoslo saber desde el formulario de comentarios.
¿Y tú?, ¿Ya has puesto un enlace para que te llamen por teléfono desde tu web?