Cómo crear un enlace html para que te llamen por teléfono desde tu página web

En este artículo te explicaré cómo crear un enlace html para que te llamen por teléfono desde tu página web. Es decir, que te puedan llamar pulsando sobre un botón o texto que aparezca en alguna zona destacadas de tu web, cómo el menú, el pie de página, entre el texto…

Explicaré varios métodos para que puedas poner el enlace tengas el tipo de web que tengas.

Cómo crear un enlace html para llamar por teléfono desde una web

La primera opción es la más básica y la que te servirá para cualquier tipo de web; el enlace HTML puro y duro.

En este caso te basta con escribir el siguiente fragmento de código donde quieras que aparezca:

<a href=”tel: Signo más (+) + número de prefijo del país + tu número de teléfono”>Tu número de teléfono</a>

Si te fijas, es un enlace HTML normal con algunas peculiaridades, en el que tendremos que añadir como parámetro del enlace:

  • Tel: que le indica al enlace que es de llamada.
  • Signo más + el prefijo del país (+34 para España).
  • Número de teléfono al que quieras que llamen (El nuestro es 673 02 77 66).
  • Anchor text. En el ejemplo te he propuesto el número de teléfono en sí, aunque también podría ser un texto como “Llama ya” o una cosa así.

El enlace de llamada debe de quedarte así:

<a href=”tel: +34673027766″>Tu número de teléfono</a>

Solo con esto ya podrías añadir un enlace de llamada de teléfono en cualquier página web, incluso en WordPress desde el editor HTML. Aunque para los que prefieren mantenerse al margen de este te voy a presentar otras formas más fáciles y cómodas.

Eso sí, ten en cuenta que el enlace solo funcionará desde móviles y dispositivos con gestor de llamada configurado. Por ejemplo, si no has configurado un gestor de llamada en tu ordenador Windows no funcionará el enlace.

Crear un enlace de llamada de teléfono con el editor clásico de WordPress

Si utilizas el editor clásico de WordPress lo tienes fácil, ya que puedes añadir el enlace de llamada desde los enlaces normales:

Para ello, solo tienes que seguir estos pasos:

  1. Escribe el número de teléfono o la frase en cuestión a pulsar (anchor text).
  2. Selecciónalo con el cursor.
  3. Clica el icono de enlaces de tu editor de WordPress.
  4. Pega el enlace de llamada con la siguiente estructura: tel:+34673027766

Enlace de llamada en el editor visual de WordPress

Más fácil imposible, ¿Verdad?

Crear un enlace de llamada de teléfono desde webs con Gutenberg

En caso de que seas de los/as que prefiere añadir el enlace de llamada con el editor de bloques Gutenberg, es más de lo mismo.

Estos son los pasos a seguir:

  1. Abre el widget de párrafo (podrías usar otros).
  2. Pulsa sobre el icono de la cadena.
  3. En la ventana emergente introduce el enlace de llamada con la misma estructura que hemos estado usando.

Enlace de llamada en Gutenberg

Y… voilà!

Enlace de llamada web con Elementor

Si no te atreves con los editores anteriores o utilizas Elementor, ya sea gratis o PRO, y quieres poner un botón de llamada de teléfono es aún más sencillo.

Solo tienes que buscar el widget botón y añadir un enlace de llamada con la estructura antes mencionada. Que en nuestro caso ya sabes que es: tel:+34673027766.

Enlace de llamada en Elementor

Cómo crear un botón de llamar por teléfono en una web

Para finalizar, vamos a poner en práctica nuestros conocimientos de CSS, dándole estilo de botón al enlace de llamada que podemos haber creado con HTML, con el editor de WordPress, etc. Algo que nos vendrá muy bien si no estamos utilizando un editor visual en el diseño web.

Partiremos de un enlace de llamada de teléfono “a pelo”, y le aplicaremos el estilo de un botón de llamada para que destaque en la web y los usuarios sientan la necesidad de llamar.

Como cambios respecto a los ejemplo anteriores, añadiremos una clase CSS a nuestro botón de llamada.

El código HTML quedará de la siguiente forma:

<a class=”boton-llamar” href=”tel: +34673027766″>Tu número de teléfono</a>

En este caso, la clase asignada es “boton-llamar”, y será la clase CSS que utilizaremos para seleccionar al enlace desde nuestra regla.


.boton-llamar {
background-color: #a68e4f; /* Color de fondo inicial del botón de llamada */
color: white; /* Color del texto */
padding: 10px 20px; /* Espaciado interno */
text-decoration: none; /* Elimina el subrayado del enlace */
display: inline-block; /* Permite aplicar padding y centrado */
transition: background-color 0.3s; /* Suaviza la transición de colores */
}
.boton-llamar:hover { /* Para el cambio de color al pasar el cursor */
background-color: green; /* Color de fondo al pasar el cursor */
}

El botón de llamada de teléfono web del ejemplo quedará así:

Tu número de teléfono

Si conoces otra alguna otras forma de añadir enlaces de llamada háznoslo saber desde el formulario de comentarios que encontrarás un poco más abajo.

¿Y tú?, ¿Ya has puesto un enlace en tu web para que te llamen por teléfono?

Me especializo en descubrir y compartir las últimas tendencias y estrategias en marketing digital para restaurantes. Ofrezco consejos útiles y perspectivas innovadoras que ayuden a los negocios gastronómicos a crecer y prosperar en el mundo digital.

Deja un comentario

Información básica sobre protección de datos

Responsable: LuBe Gastro Finalidad: Envío de información solicitada y presupuesto gratuito. Legitimación: Consentimiento del interesado. Destinatarios: LuBe Gastro recibirá los datos para gestionar las peticiones de información. Derechos: Acceder, rectificar y suprimir los datos, así como los otros detallados en la política de privacidad.

Call Now Button