Convertir tu número de teléfono en un enlace clicable facilita el contacto directo desde tu web, incrementa las probabilidades de capturar clientes potenciales (o leads) y mejorar la experiencia de usuario. En este artículo mostraremos cómo crear enlaces de llamada en HTML (HTML Click to Call Links) y algunos consejos adicionales para ir más allá.
¿Qué es un Enlace de Llamada y para qué sirve?
Un enlace de llamada convierte un número de teléfono, un texto, una imagen o un icono en un enlace clicable que genera una llamada. Esto significa que cuando el usuario hace clic, su dispositivo iniciará una llamada automáticamente. Si estás en un móvil, se abrirá la aplicación de llamadas, y si estás en un ordenador con gestor de llamadas (por ejemplo, Skype o FaceTime), se abrirá el software correspondiente.
Cómo Crear un Enlace de Llamada en HTML
La sintaxis es simple y solo requiere el código tel: junto con el número de teléfono en el atributo href. Te lo explicamos paso a paso a continuación:- Escribe el enlace HTML básico: Añade el número de teléfono en el formato internacional, sin espacios, y con el prefijo de tu país.
- Prefijos de país: Asegúrate de incluir el prefijo del país para que el enlace funcione en todo el mundo. Por ejemplo, para España es +34.
- Personaliza el anchor text: Puedes escribir «Llama ahora», «Contacto» o directamente el número de teléfono, según la apariencia que desees para tu enlace.
<a href="tel:+34931760244">Llama ahora</a>Agregar Extensiones de Teléfono en el Enlace de Llamada
Si necesitas que la llamada dirija a una extensión, puedes usar p o w para añadir pausas:
- p: Inserta una pausa de 1 segundo antes de marcar la extensión.
- w: Espera a que haya tono antes de marcar la extensión.
Ejemplo con extensión:
<a href="tel:+34931760244p45">Llama a la extensión 45</a><a href="tel:+34931760244w45">Llama a la extensión 45</a>Crear Enlaces de Llamada para Skype
También puedes facilitar el contacto mediante enlaces de Skype. Utiliza la siguiente estructura para que el usuario pueda hacer una llamada en Skype al hacer clic:
<a href="skype:usuario_skype_al_que_llamamos?call">Llama por Skype</a>Dónde dice “usuario_skype_al_que_llamamos” debemos introducir el usuario de Skype al que queremos que se haga la llamada.
Convertir el Enlace en un Botón con CSS
Para mejorar la apariencia, puedes añadir estilo al enlace de llamada para que se vea como un botón:
<a href="tel:+34695797092" class="boton-llamada">Llama ahora</a>.boton-llamada {
display: inline-block;
padding: 10px 20px;
background-color: #28a745;
color: white;
text-decoration: none;
border-radius: 5px;
}
.boton-llamada:hover {
background-color: #218838;
}
Puedes hacer pruebas y ver como queda el botón en este link: https://codepen.io/Agencia-Digital-Avenue/pen/poMGxLj
Resumen de los principales beneficios de los Enlaces de Llamada
- Mejoran de la experiencia de usuario: Los usuarios no necesitan copiar el número; solo hacen clic para llamar.
- Aumento de leads y conversiones: Facilitar el contacto directo puede generar más conversiones, especialmente en negocios locales o despachos profesionales.
- Funcionalidad adaptable: Los enlaces de llamada funcionan en dispositivos móviles y ordenadores, siempre que se tenga un software de llamadas configurado.
Conclusión
Crear enlaces de llamada en tu web es una mejora simple y eficaz. Con solo unas líneas de HTML, puedes transformar tu número de teléfono en una herramienta de contacto directo, incrementando la facilidad de uso y la accesibilidad de tu web. Experimenta con los distintos métodos para integrarlo y haz que tu sitio sea más amigable y accesible para tus visitantes.