Botón de WhatsApp sin plugins en cualquier web

Tutorial de cómo crear un botón de WhatsApp en HTML sin plugins

Ernesto BarrachinaDesarrollo web25 Comentarios

4.3/5 - (25 votos)

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:

  1. Código del país: +34 (España).
  2. 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

Ernesto Barrachina

Facebook Twitter Google+

Me dedico al diseño web Valencia y tengo pasión por las herramientas de diseño gráfico, así como por compartir tips de diseño web en forma de consejos y tutoriales "para todos los públicos".

25 Comentarios en “Botón de WhatsApp sin plugins en cualquier web”

  1. 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

    1. 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.

  2. hola como hago para que me salga la imagen de whatasapp
    no lepuedo dar la direccion, con solo logo.png no me la hala

  3. 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»

  4. 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

    1. 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.

  5. 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?

    1. 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.

  6. 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 👏👏👏

  7. Hay forma de no solo escribir sino enviar el mensaje? En realidad me falta esa instrucción para darle en enviar,

  8. 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)

  9. 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.-

  10. 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.

Deja una respuesta

INFORMACIÓN BÁSICA SOBRE LA PROTECCIÓN DE TUS DATOS

Todos las datos marcados con asterisco (*) son obligatrorios. Si no los indicas no podrás comentar en el blog.

Responsable de la web: Ernesto Barrachina Rubio (EBWEB) Finalidad de los datos: Gestionar los comentarios que realizas en este blog. Legitimación: Consentimiento del interesado. Destinatarios: No se comunican los datos a nadie más. Plazo de conservación de los datos: Hasta que no se solicite su supresión por el interesado. Los datos que me facilitas estarán ubicados en los servidores de Dinahosting (mi proveedor de hosting) fuera de la UE en Otros. Dinahosting está ubicado en la UE, con los niveles de protección adecuados según Comisión de la UE. Ver política de privacidad de Dinahosting. Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en ebweb@ebweb.es así como el derecho a presentar una reclamación ante una autoridad de control. Puedes consultar la información adicional y detallada sobre Protección de Datos en mi página web: https://ebweb.es, así como consultar mi política de privacidad.

Tu comentario quedará pendiente de moderación. Vuelve en dos o tres días para ver la respuesta y tu comentario publicados.

Muchas gracias por comentar ☺