Este post fue visto: 315

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.

  • Neolo Servicios de Hosting -- El blog de aleare.design
  • Abre tu cuenta en Payoneer y obtén 25 dólares de regalo!

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!

Avatar

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.

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


Warning: Undefined array key "ccfwp_defer_time" in /home/aleareco/public_html/blog/wp-content/plugins/critical-css-for-wp/includes/javascript/delay-js.php on line 168