Como crear enlaces html para llamar por teléfono

por Matias Adrian Romero | Mar 16, 2020

Todos sabemos que los enlaces nos permiten acceder a un sitio de la red con un simple clic, pero su funcionalidad no se limita solo a eso.

Hoy en día estamos acostumbrados a navegar desde el teléfono movil y podemos aprovechar esa funcionalidad de los enlaces para llamar por teléfono sin tener que copiar y pegar el número.

Esta técnica mejora la experiencia de usuario y además incrementa la cantidad de leads que captas a través de tu web corporativa o tienda online.

Integrarlo en tu página web es realmente fácil, te voy a enseñar distintos métodos y ejemplos para que incorpores los enlaces de llamada y botones CTA.

[toc]

Cómo agregar un enlace html de llamada

<a href="tel:661111222">661-111-222</a>

  1. La etiqueta href es la que se utiliza para indicar al navegador que se trata de un enlace.
  2. Con =»tel:» le indicamos que se trata de un enlace de llamada.
  3. A continuación, ponemos el número de teléfono sin espacios y entre comillas
  4. Entre los símbolos > < podemos colocar cualquier texto que queramos, ya sea el número de teléfono o mensajes de llamada a la acción como «Llama aquí» «Clic para llamar» «Contacta con nosotros»

Añadir una extensión telefónica

En caso de que dispongamos una o varias extensiones para un mismo número las podemos agregar indicando con la letra «p» justo al final del número de teléfono seguido del número de la extensión, quedaría algo como esto:

<a href="tel:661111222p45">Llámanos</a>

Lo que hace esta funcionalidad es: Primero marca el número de teléfono indicado justo después de la etiqueta tel y después espera un segundo aproximadamente y luego marca la extensión.

Si queremos que en lugar de un segundo lo que espere es un tono, tenemos que sustituir la p por una w.

Agregar un prefijo nacional en código HTML

Para añadir un numero internacional tanto en un código html o en un botón a href callto lo podemos hacer de una manera bastante sencilla, simplemente añadiendo al principio de la etiqueta el símbolo + seguido del prefijo internacional.

<a href="tel:+34661111222">Llámanos</a>

Crear un botón de número de teléfono en el menú de WordPress

Ahora te voy a enseñar cómo poner un link html directamente en el menú de tu WordPress para que te puedan llamar:

1) Desde el escritorio de WordPress accedemos a Apariencia > Menú

añadir boton llamada menu wordpress

2) Seleccionamos el menú donde nos interesa añadir este botón de llamada y añadimos un nuevo elemento al menú, en concreto un enlace personalizado especificando los siguientes campos, por ejemplo:

URL: tel://661111222

Texto de enlace: ¡Llámanos! 661 111 222 ✆

crear link html tel menu wordpress

3) Guardamos los cambios y actualizamos la página. Con esto ya tienes añadido un botón de llamada directamente en tu menú:

boton con link html

Cómo poner una imagen con link html

Otra opción bastante interesante es añadir este enlace a una imagen o icono para que actué como CTA.

Para ello debemos primero añadir la imagen, ya sea utilizando Gutenberg, Divi, elementor o el maquetador que utilices.

A continuación, tienes que indicarle que enlace a una URL personalizada e indicarle la URL, en este caso el formato es el mismo que cuando lo añadimos en el menú:

tel://661111222

poner imagen con link html

La imagen con enlace la podemos añadir en una entrada, una página o incluso en el sidebar de nuestra web.

[bctt tweet="➡️ Cómo añadir enlaces HTML para llamar por teléfono ✆ desde tu web"]

Como poner enlaces en html para telefonos en la cabecera, pie de pagina o sidebar

Atención: Estos cambios los debes aplicar siempre utilizando un tema hijo ya que de lo contrario cuando haya una actualización del tema se te borrarán estas modificaciones.

Para incluir estos callto link html debemos ir a nuestro panel de administración: Apariencia > Editor de temas

Debemos añadir el código html que hemos visto antes:

<a href="tel:661111222">661-111-222</a>

Si lo queremos añadir en la cabecera tenemos que buscar el archivo header.php y añadir ese código dentro de la etiqueta. Actualizamos los cambios y cargamos de nuevo la página.

link tel html en la cabecera
crear botones html en wordpress

En caso de que queramos la funcionalidad callto href en el pie de página tenemos que repetir ese mismo proceso, pero editando el archivo footer.php

Podemos agregar un enlace tel link en la barra lateral utilizando los Widgets de WordPress, para ello vamos a: Apariencia > Widgets

Arrastramos el modulo HTML personalizado hacia la barra lateral e incluimos el código en cuestión.

crear link html tel menu wordpress

Como añadir un link html para llamadas y email en Divi

Si utilizas Divi (Y si no es así, te lo recomiendo que le eches un vistazo a este articulo sobre que es divi y porque es el tema más utilizado en WordPress) puedes añadir enlaces de llamada y de email en la cabecera de tu web de manera muy sencilla y sin tocar código.

Para añadir estos campos tenemos que ir a: Personalizar temas > Cabecera > Elementos del menú

añadir boton de llamada en la cabecera divi

Existen muchas opciones a la hora crear enlaces y botones html para llamar por teléfono. Sin duda estos son una gran funcionalidad que toda página web corporativa o tienda online debería incluir.

Y tú ¿Has probado estos métodos? ¿Conoces alguno distinto? Te leo en los comentarios 🙂

1 Comentario

  1. LDH

    Excelente post, muchas gracias!

    Responder
Enviar un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Portales de compra y venta de páginas web

Los portales de compra y venta de páginas web cada vez son más populares. Muchos especialistas en wordpress los están utilizando debido a las posibilidades que les proporciona a la hora de comercializar las páginas web que están creando. Muchas empresas de diseño de...

Que partes forman una página web

La página web de cualquier empresa, autónomo o profesional cumple un papel muy importante para atraer a visitantes a nuestro negocio. Sin embargo, posicionarse en el mundo virtual no es nada fácil y conseguir retener a los usuarios, mucho menos. Por este motivo, vamos...