En el mundo digital actual, la accesibilidad y la facilidad de comunicación son elementos clave para el éxito de cualquier negocio o sitio web. Una de las formas más efectivas de mejorar el UX o experiencia del usuario es a través de la interacción directa mediante la inclusión de enlaces directos a números de teléfono. En HTML podemos lograr esto fácilmente, utilizando el viejo y querido tag a href= y agregando la opción tel.
En este post exploraremos en detalle cómo usar este tag y crear así links para realizar llamadas directas.
.
Manos a la obra
El tag a href=tel es una etiqueta HTML específica que permite crear enlaces directos a números de teléfono. Al hacer click en un enlace creado con este tag, los usuarios podrán iniciar automáticamente una llamada telefónica desde sus dispositivos móviles o aplicaciones de voz en su computadora.
Supongamos que querés añadir un link con tu número de teléfono para que te llamen directamente. Te muestro un ejemplo con un número ficticio:
En el ejemplo, usé el atributo «href» con el valor «tel:5555-1234» dentro del tag . Esto indica al navegador que el enlace está relacionado con una acción telefónica. Al hacer click en ese enlace, el usuario podrá llamar al número 5555-1234 directamente desde su dispositivo, sin necesidad de agendar previamente o anotar el número y luego tipearlo en el panel del teléfono. Con un click, así de una.
.
Tips a tener en cuenta
Es importante tener en cuenta algunos aspectos adicionales al utilizar el tag a href=tel:
1. Formato internacional: Para números de teléfono internacionales, se recomienda utilizar el formato internacional, que incluye el código de país. Para un número de teléfono en Argentina (código de país +54), el enlace quedaría así:
2. Separadores: Algunos números de teléfono pueden incluir caracteres especiales como guiones o espacios para mejorar la legibilidad. Sin embargo, se recomienda eliminar estos caracteres especiales. Por ejemplo, en lugar de «5555-1234», es mejor utilizar todos los números de corrido, así: 55551234.
3. Compatibilidad: este tag es compatible con la mayoría de los navegadores modernos y dispositivos móviles. Sin embargo, hay que tener en cuenta que algunos navegadores de computadoras de escritorio o notebooks pueden no tener la capacidad de realizar llamadas directamente. Salvo que el usuario tenga una app con la que realices llamadas directamente… o le proporciones un link a tu Whatsapp.
.
Llamada directa al Whatsapp
Bueno pero, ¿si quiero que me llamen directamente por Whatsapp? Muy fácil, utiliza la siguiente sintaxis:
Usando el mismo número de móvil ficticio, en formato internacional. Es importante que no incluyas ceros, paréntesis ni guiones, o sino no funcionará.
Pero si en vez de llamada directa preferís crear un mensaje de chat personalizado con emojis y todo, te la hago más fácil: usá el servicio gratuito de crear.wa.link que además del link te crea un código QR para usar en tus tarjetas impresas o folletos. ¿No es genial?
Lo bueno, si breve…
Como vimos arriba, este tag es una herramienta valiosa para facilitar la comunicación directa cuando visitan tu web a través de dispositivos móviles. Mediante la creación de enlaces directos a números de teléfono, puedes mejorar enormemente la accesibilidad y el UX o experiencia del usuario. Usá el formato adecuado y chequeá previamente que sea compatible con los navegadores al implementar este tag en tu código HTML y voilá.
Freebies: 5 Generadores de código CSS gratuitos que no te podés perder!
¡No dudes en utilizar esta funcionalidad para facilitar la comunicación con los visitantes a tu sitio web!
