Cómo añadir un botón de llamada en WordPress

Hay webs donde el teléfono está, pero parece escondido a propósito.

Lo ves en el pie de página, en una esquina pequeña o dentro de una página de contacto a la que el usuario tiene que llegar después de tres clics. Y claro, si alguien entra desde el móvil con intención de llamar, cuanto más le obliguemos a buscar, más fácil es que se enfríe.

Un botón de llamada en WordPress sirve justo para eso: facilitar que una persona pueda llamar desde la web tocando un botón. Es especialmente útil en negocios locales, servicios urgentes, clínicas, talleres, restaurantes, empresas de reformas, soporte técnico, reservas o cualquier web donde la llamada sea una vía importante de contacto.

Qué es un botón click to call

Un botón click to call es un enlace que permite iniciar una llamada desde una página web, normalmente desde un móvil.

En lugar de mostrar solo el teléfono como texto, se usa un enlace especial con el formato tel:. El navegador reconoce ese enlace y abre la aplicación de llamadas del dispositivo.

Ejemplo sencillo:

<a href="tel:+34911222333" title="Llamar por teléfono">Llamar ahora</a>

En este ejemplo, cuando el usuario pulse el enlace desde un móvil, podrá llamar al número indicado.

Cuándo tiene sentido añadir un botón de llamada

No todas las webs necesitan un botón de llamada visible en todo momento. Pero en algunos negocios puede ser muy útil.

Tiene sentido especialmente cuando:

• La llamada es una vía importante de contacto.
• El usuario suele entrar desde móvil.
• El servicio requiere respuesta rápida.
• Hay reservas, citas o presupuestos por teléfono.
• El negocio es local y la cercanía importa.
• El formulario puede ser demasiado lento para ciertos usuarios.
• Hay personas que prefieren hablar antes que escribir.

Por ejemplo, no se comporta igual alguien que busca una asesoría para pedir información que alguien que necesita una reparación urgente, una cita médica, una reserva en un restaurante o hablar con un servicio técnico.

Botón de llamada no es lo mismo que botón “te llamamos”

Conviene separar estas dos ideas, porque no son lo mismo.

Tipo de botón	Qué hace	Cuándo encaja
Botón de llamada	El usuario pulsa y llama directamente al negocio.	Cuando interesa recibir llamadas en el momento.
Botón “te llamamos”	El usuario deja sus datos para que la empresa le llame.	Cuando no siempre se puede atender al instante o interesa filtrar solicitudes.
Botón de WhatsApp	Abre una conversación por WhatsApp.	Cuando el negocio atiende bien por mensaje.
Formulario de contacto	Recoge información más completa antes de responder.	Cuando hace falta contexto para preparar una respuesta.

Un botón de llamada es directo. Un botón “te llamamos” suele llevar a un formulario breve. Los dos pueden funcionar, pero no resuelven la misma situación.

Cómo crear un enlace de llamada con tel:

La forma básica de crear un enlace de llamada es usar tel: dentro del atributo href.

Ejemplo:

<a href="tel:+34911222333" title="Llamar por teléfono">Llamar ahora</a>

El número debe escribirse sin espacios dentro del enlace. Puedes usar el prefijo internacional para evitar problemas, por ejemplo +34 en España.

También puedes mostrar el teléfono al usuario:

<a href="tel:+34911222333" title="Llamar al 911 222 333">911 222 333</a>

El usuario ve el número, pero el enlace llama al formato correcto.

Cómo añadir un botón de llamada en una página de WordPress

Si usas el editor de WordPress, puedes añadir el enlace de varias formas.

Opción sencilla desde el editor

1. Edita la página donde quieres añadir el botón.
2. Escribe el texto, por ejemplo Llamar ahora.
3. Selecciona el texto.
4. Haz clic en el icono de enlace.
5. Escribe el enlace con formato tel:+34911222333.
6. Guarda o actualiza la página.

Esto crea un enlace normal. Si quieres que parezca un botón, puedes usar el bloque de botón de WordPress o añadir una clase CSS.

Opción con HTML

Si quieres pegarlo directamente en un bloque HTML, puedes usar:

<a class="boton-llamada-wordpress" href="tel:+34911222333" title="Llamar por teléfono">Llamar ahora</a>

Después puedes darle estilo con CSS.

CSS para crear un botón de llamada sencillo

Este CSS convierte el enlace en un botón visible:

.boton-llamada-wordpress {
  display: inline-block;
  background: #f28c28;
  color: #ffffff !important;
  padding: 12px 20px;
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none !important;
}

.boton-llamada-wordpress:hover {
  opacity: 0.9;
}

Y el botón quedaría así:

<a class="boton-llamada-wordpress" href="tel:+34911222333" title="Llamar por teléfono">Llamar ahora</a>

Cómo añadir un botón de llamada al menú

En algunas webs tiene sentido añadir el teléfono en el menú principal, sobre todo si el contacto por llamada es muy importante.

Para hacerlo:

1. Ve a Apariencia > Menús, si tu tema usa menús clásicos.
2. Añade un enlace personalizado.
3. En URL escribe tel:+34911222333.
4. En texto del enlace escribe Llamar, Teléfono o el número visible.
5. Guarda el menú.

Si tu tema usa editor de sitio, tendrás que editar la navegación desde el propio editor de bloques.

Cómo añadir un botón flotante de llamada

Un botón flotante permanece visible aunque el usuario haga scroll. Puede funcionar bien en móvil, pero hay que usarlo con cuidado para que no moleste.

Ejemplo HTML:

<a class="boton-llamada-flotante" href="tel:+34911222333" title="Llamar por teléfono">Llamar</a>

Ejemplo CSS:

.boton-llamada-flotante {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  background: #f28c28;
  color: #ffffff !important;
  padding: 14px 18px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}

.boton-llamada-flotante:hover {
  opacity: 0.9;
}

Este botón aparecerá en la parte inferior derecha de la pantalla.

Mostrar el botón flotante solo en móvil

Muchas veces el botón de llamada tiene más sentido en móvil que en escritorio. Para mostrarlo solo en pantallas pequeñas, puedes usar una media query.

.boton-llamada-flotante {
  display: none;
}

@media (max-width: 768px) {
  .boton-llamada-flotante {
    display: inline-block;
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 9999;
    background: #f28c28;
    color: #ffffff !important;
    padding: 14px 18px;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  }
}

Así evitas tener un botón flotante innecesario en ordenador y lo mantienes donde más suele aportar.

Dónde colocar el botón de llamada

No se trata de poner el botón en todas partes. Se trata de colocarlo donde ayuda.

Ubicación	Cuándo puede funcionar	Riesgo
Cabecera	Cuando la llamada es una acción principal.	Puede saturar si hay demasiados botones.
Menú móvil	Cuando muchos usuarios entran desde teléfono.	Debe verse claro y no romper el diseño.
Sección de contacto	Casi siempre tiene sentido.	Puede quedarse demasiado escondido si solo está ahí.
Botón flotante	En servicios donde la llamada es prioritaria.	Puede molestar si tapa contenido o compite con WhatsApp.
Después de explicar un servicio	Cuando el usuario ya ha entendido lo que ofreces.	Debe entrar natural, no como interrupción.

En una web de servicios, suele funcionar bien poner teléfono visible en cabecera, contacto y algún bloque concreto donde el usuario ya está cerca de decidir.

Botón de llamada y WhatsApp: cuidado con poner demasiadas opciones

Muchas webs tienen botón de llamada, WhatsApp, formulario, email, chat, popup y además un aviso de cookies tapando media pantalla. Luego nos preguntamos por qué el usuario no hace nada.

Más opciones no siempre ayudan. A veces confunden.

Si vas a poner varias vías de contacto, ordénalas:

• Llamar: para urgencia o trato directo.
• WhatsApp: para conversación rápida por mensaje.
• Formulario: para solicitudes con más detalle.
• Email: para contacto menos inmediato.

Cómo crear un botón “te llamamos”

Un botón “te llamamos” no debe abrir una llamada. Lo normal es que lleve a un formulario breve donde el usuario deja sus datos.

Por ejemplo, podrías enlazar a una sección de la página:

<a class="boton-llamada-wordpress" href="#te-llamamos" title="Solicitar que te llamemos">Te llamamos</a>

Y más abajo crear una sección con un formulario:

<section id="te-llamamos">
  <h2>Te llamamos</h2>
  <p>Déjanos tus datos y te llamamos para revisar tu consulta.</p>
  [contact-form-7 id="123" title="Formulario te llamamos"]
</section>

Este enfoque puede funcionar muy bien cuando no quieres recibir llamadas en cualquier momento, pero sí quieres facilitar el contacto.

Plugins para añadir un botón de llamada en WordPress

Si no quieres tocar código, puedes usar un plugin de botón de llamada o de botones flotantes.

Antes de instalar uno, revisa:

• Última actualización.
• Valoraciones.
• Compatibilidad con tu versión de WordPress.
• Opciones de diseño.
• Si permite mostrar el botón solo en móvil.
• Si carga scripts innecesarios.
• Si permite añadir WhatsApp, email u otros botones sin saturar.

Errores habituales al poner un botón de llamada

Usar el número con espacios dentro de tel:

Visualmente puedes mostrar el teléfono con espacios, pero dentro del enlace es mejor usar un formato limpio con prefijo.

<a href="tel:+34911222333">911 222 333</a>

Poner el botón flotante encima de otros elementos

Si ya tienes botón de WhatsApp, aviso de cookies o chat, revisa que no se solapen.

No probar desde móvil

Un botón de llamada debe probarse desde un teléfono real. En escritorio puede no comportarse igual.

Poner demasiados botones iguales

Si todo es urgente, nada destaca. El botón debe acompañar la decisión, no perseguir al usuario.

No indicar horario de atención

Si no atiendes llamadas a ciertas horas, puede ser útil indicarlo cerca del botón o en la página de contacto.

Olvidar medir los clics

Si la llamada es importante para el negocio, conviene medir cuántas personas pulsan el botón.

Cómo medir clics en el botón de llamada

Si quieres saber si el botón se utiliza, puedes medir los clics con herramientas de analítica o eventos.

Una opción sencilla es añadir una clase identificable al botón:

<a class="boton-llamada-wordpress evento-llamada" href="tel:+34911222333" title="Llamar por teléfono">Llamar ahora</a>

Después puedes configurar la medición con la herramienta que uses para analítica o etiquetas.

No hace falta medirlo todo desde el primer día, pero si la llamada es una conversión importante, merece la pena saber si ese botón ayuda.

Ejemplo práctico: web de servicios con botón de llamada

Imagina una empresa local que recibe muchas visitas desde móvil. Tiene un formulario de contacto, pero bastantes usuarios prefieren llamar porque necesitan resolver una duda rápida antes de pedir presupuesto.

En ese caso, una estructura razonable podría ser:

• Teléfono visible en cabecera.
• Botón de llamada en móvil.
• Formulario en la página de contacto.
• Botón “te llamamos” en servicios donde la consulta necesita contexto.
• WhatsApp solo si realmente se atiende bien por ahí.

No hace falta llenar la web de botones. Hace falta que cada vía de contacto tenga sentido.

Cuándo pedir ayuda para mejorar los contactos de tu web

Añadir un botón de llamada es sencillo. Lo que no siempre es tan sencillo es decidir dónde ponerlo, cómo medirlo, si conviene combinarlo con WhatsApp, si debe aparecer solo en móvil o si el problema real está en que la web no explica bien el servicio.

En ideaWeb podemos ayudarte con pequeños ajustes de mantenimiento WordPress, revisión de formularios, botones de contacto, llamadas a la acción y mejoras de diseño web WordPress.

Preguntas frecuentes sobre botones de llamada en WordPress

¿Cómo se añade un botón de llamada en WordPress?

Puedes añadirlo creando un enlace con formato tel:, por ejemplo <a href="tel:+34911222333">Llamar ahora</a>. Ese enlace puede usarse en una página, menú, cabecera o botón flotante.

¿Qué es un botón click to call?

Es un botón o enlace que permite llamar directamente desde una web, normalmente desde un móvil, al tocar sobre él.

¿Funciona el enlace tel: en ordenador?

Depende del equipo y de las aplicaciones configuradas. En móvil suele abrir la llamada directamente. En ordenador puede abrir una aplicación compatible o no hacer nada útil.

¿Es mejor usar plugin o código?

Para un botón sencillo, normalmente basta con HTML y CSS. Un plugin puede ser cómodo si quieres botón flotante, horarios, diseño avanzado o varias vías de contacto.

¿Puedo poner un botón de llamada flotante?

Sí. Puedes crear un botón flotante con CSS o usar un plugin. Conviene probarlo bien en móvil para que no tape contenido, cookies, WhatsApp u otros elementos.

¿Qué número debo usar en el enlace tel:?

Lo recomendable es usar el número con prefijo internacional y sin espacios dentro del enlace, por ejemplo tel:+34911222333.

¿Qué diferencia hay entre botón de llamada y botón te llamamos?

El botón de llamada inicia una llamada desde el móvil. El botón “te llamamos” normalmente lleva a un formulario para que el usuario deje sus datos y la empresa contacte después.

¿Conviene mostrar el botón solo en móvil?

Muchas veces sí, porque la llamada directa tiene más sentido desde teléfono. Puedes usar CSS para mostrar el botón flotante solo en pantallas móviles.

¿Se pueden medir los clics en el botón de llamada?

Sí. Puedes medirlos con herramientas de analítica o eventos si añades una clase identificable al botón y configuras la medición.