Este post fue visto: 646

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.

Сollaborator

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:

Agregar link a número de teléfono directo con HTML -- El blog de Aleare Design

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í:

Agregar link a número de teléfono directo con HTML -- El blog de Aleare Design

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:

Agregar link a número de teléfono directo con HTML -- El blog de Aleare Design
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á.

¡No dudes en utilizar esta funcionalidad para facilitar la comunicación con los visitantes a tu sitio web!

Escribió:

Alejandra Arellano

¡Hola Mundo! Soy diseñadora gráfica y web, programadora HTML/CSS, ilustradora, community manager, curadora de contenidos, escritora, mentora. Fundadora y directora de Aleare Design Estudio Creativo y Comunicación Digital.
Сollaborator

Deja una respuesta

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

Cerrar

Sobre mí

¡Bienvenidos a mi blog! Mi nombre es Alejandra y soy diseñadora gráfica y web, también programadora, community manager, redactora e ilustradora.

Fundadora de aleare design estudio de diseño y comunicación digital, desde el 2008 brindando servicios a empresas y agencias digitales en varias ciudades de Argentina y también en México, España, Francia y Noruega.

Mi Filosofía

“Tienen que encontrar eso que aman […]. Su trabajo va a llenar gran parte de sus vidas […] y la única forma de hacer un gran trabajo es amando lo que hacen. Si todavía no lo han encontrado, sigan buscando. No se detengan […]. Sean curiosos. Sean inquietos.”

Steve Jobs
Discurso de apertura, Universidad de Stanford, 2005