En este post te explico cómo poner un botón de WhatsApp en tu web «sin plugins», con un poquito de código HTML y sin necesidad de saber programar. Así, tus usuarios podrán contactar contigo mediante un mensaje directo al móvil enviado desde tu página web,
Por cierto, este tutorial sirve para integrar WhatsApp en todo tipo de páginas web, no es un tutorial exclusivo para WordPress. Únicamente tienes que saber de qué va eso del HTML.
Cómo poner un botón de WhatsApp en tu web con «la función clic para chatear»
La función Clic para Chatear, es la que nos permite chatear con un número de teléfono que no tengamos guardado en la lista de contactos.
Solo tenemos que crear un enlace conectado al dominio wa.me (propiedad de Facebook, a su vez propietario de WhatsApp), que se utiliza para iniciar sus chats de mensajería instantánea sin tener que abrir la aplicación, desde cualquier navegador y en forma de ventana.
Con esto, en cuanto cliquemos sobre el enlace HTML se abrirá un chat automáticamente. Y lo mejor es que también lo soporta WhatsApp Web. O sea que, si lo tienes instalado, podrás abrir WhatsApp desde el ordenador.
Para que funcione correctamente, el código HTML del enlace de WhatsApp, debe tener la sintaxis:
<a href="https://wa.me/ + número prefijo país "sin signo +" + número de teléfono">Anchor text</a>
¡Así de fácil! 😎
Para un ejemplo real con los datos:
- Código del país: +34 (España).
- Teléfono: 555 00 55 00.
El número de teléfono en formato internacional a incluir en el enlace sería: 34555005500.
Por lo que el vínculo para el chat de WhatsApp quedaría de la siguiente manera:
<a href="https://wa.me/34555005500">Anchor text</a>
➡ Aunque en algunos artículos verás que los links incluyen la url api.whatsapp.com, ese es el método antiguo y está en desuso.
Desde Noviembre de 2018, la manera correcta de implementar botones de WhatsApp es como te estoy explicando; con la url wa.me.
Crear enlace de WhatsApp con un mensaje personalizado
Este mensaje se escribirá automáticamente como inicio de la conversación de WhatsApp.
El texto se inserta añadiendo al enlace que ya conocemos /?text=un-texto-personalizado, usando como espaciador de palabras los caracteres %20.
Por lo que el enlace a WhatsApp con un mensaje predeterminado será:
<a href="https://wa.me/34555005500/?text=tu%20texto%20personalizado">Anchor text</a>
Con este mensaje escrito automáticamente, le ahorrarás al usuario tener que escribir frases del tipo: «Hola buenos días, estoy interesado/a en…» o cosas así.
Recuerda que para abrir el enlace una ventana nueva debes usar el atributo target="_blank".
El botón de WhatsApp
Como en el caso de los enlaces de llamada telefónica, lo ideal en los hipervínculos de WhatsApp es que se identifiquen a la primera.
Para ello podemos utilizar un call to action tipo botón creado con CSS, una imagen de WhatsApp, o un icono de Font Awesome, que es lo que más me gusta.
El código CSS para un enlace de WhatsApp con Font Awesome V.6 sería algo así:
.fab {
padding: 20px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}
.fab:hover {
opacity: 0.7;
}
.fa-whatsapp {
background: #45bbff;
color: white;
}
Y el HTML del botón:
<a class="fab fa-whatsapp" href="https://wa.me/34555005500/?text=tu%20texto%20personalizado" target="_blank">Anchor text</a>
Sin embargo, como no todo el mundo está dispuesto a implementar estas fuentes en su web, puede que la mejor solución sea un enlace a partir de la imagen del logo de WhatsApp.
En ese caso, el enlace que debes utilizar será:
<a href="https://wa.me/34555005500/?text=tu%20texto%20personalizado" target="_blank">
<img src="logo.png" width="50" height="50">
</a>
Así que si quieres pedirme el presupuesto de una página web, mi botón de WhatsApp quedaría:
Al que recomiendo que le añadas algún efecto :hover para que tenga alguna animación por pequeña que sea cuando pongas el cursor encima ¿Qué tal algo como opacity:0.5?
Solo me queda decirte que si no tienes botón de WhatsApp en tu web es porque no quieres 😉
Si te ha gustado comparte
About the Author
25 Comentarios en “Botón de WhatsApp sin plugins en cualquier web”
Hola Ernesto, yo puse en una web un boton de whatsapp pero solo me sale en la pagina principal y me gustaría que cuando vayas a las demás paginas el botos este también, me ayudas
Hola Yordani,
Eso es porque lo has insertado solo en el html de la home. Para añadirlo en toda la web debes insertarlo en el footer y colocarlo con CSS. Si no controlas lo mejor es que uses un plugin, que van fenomenal.
hola como hago para que me salga la imagen de whatasapp
no lepuedo dar la direccion, con solo logo.png no me la hala
Hola Lester,
Tienes que darle la ruta completa desde la raíz del sitio, tipo: https:// tuweb.com/carpeta-de-imagenes/logo-whatsapp.png
Conectarse a whatsapp desde la web funcionan de maravilla con la api que describes; sin embargo, lo que siempre he necesitado es poder enviar mensajes (cortos, en mi caso) sin que abra esa nueva página, la página de whatsapp con su botón de enviar. En otras palabras, que al hacer click en «Anchor text» de
Anchor text
se envíe de una vez, al número especificado, el mensaje: «tu texto personalizado»
Buena reflexión 😉
buenas, alguien sabe por que cuando apreto la imagen no me toma el elance ya tiene la etiqueta a y target blank y ni asi me lo toma
Hola Santiago,
Asegúrate de tener la parte importante del enlace –> href=»url-anlazada» y/o de que no tienes ningún elemento «transparente» delante del botón, caso en el que tendrás que jugar con el z-index.
Buenos dias,
Todo funciona correctamente, pero el unico problema que veo es que cada vez que pulso el link abre una nueva pagina del Chrome, en realidad lo quiero usar para enviar mensajes a otras personas, no tanto un link a mi teléfono, pero cada vez que pongo un mensaje me abre una nueva ventana, si envío 10 mensajes 10 ventanas, no hay forma de que ponga el link y lo abra una sola vez?
Hola Carlos,
a mitad de post verás destacado este comentario: Recuerda que para abrir el enlace una ventana nueva debes usar el atributo target=»_blank»
Para que se abra en la misma ventana elimina ese atributo y lo tendrás resuelto.
Fácil de entender e instalar
Saludos desde Venezuela estoy empezando de cero tendrás algún canal de Youtube o podrás darme un presupuesto por realizarlo con mis datos?.. Éxitos 👏👏👏
Hay forma de no solo escribir sino enviar el mensaje? En realidad me falta esa instrucción para darle en enviar,
Para un el codigo es
# %23
9 %39
donde consigo la tabla completa de codigos?, (yo les digo codigo ASCII o CHR$ por mis viejos y obsoletos recuerdos de la programacion en BASIC2.0 de la COMMODORE64)
Hola Sergio,
seguro que Google es más rápido en responder que yo https://www.w3schools.com/tags/ref_urlencode.ASP
Hola tengo un problema con el link de wsp; paso a describir el problema, el boton de whatsapp en mi web funciona perfecto pero en mi app web que es un espejo de mi sitio web este boton no funciona y da error. El error es el siguiente: Página web no disponible – La página web de whatsapp://send/?phone %2B549xxxxxxxxx¬text=Hola%2C%20no se pudo cargar porque : net::ERR_UNKNOWN_URL_SCHEME.
si me puede responder esta duda estaria muy agradecido.-
Hola Adrián,
prueba con mi código o elimina el signo + (%2B) que envías en la url del que envías.
Hola:
¿hay posibilidades de hacer un salto de línea?
Por ejemplo: hola%20este%20 es%20mi%20whatsapp
Que «Hola» quede en una línea y «este es mi whatsapp» quede en otra.
Gracias.
Pues lo he intentado alguna vez utilizando el salto de línea %0A, pero no ha habido manera 🙂
Hola, copie el enlace para boton de WhatsApp y lo pegue en estilos css pero no me aparece el boton, podria ayudarme. >>>Gracias
Hola Juan,
el enlace de WhatsApp no se pega en el archivo de estilo CSS, sino en el HTML. Además de eso, tendrás que tener la imagen del botón alojada en tu servidor.
ya no es válido ese código da error!!!!1
Algo has copiado mal
Muy buen aporte. Gracias!
Me alegro. Gracias a ti!!!