Cómo agregar un botón Whatsapp clic-para-chatear a tu website con HTML y CSS

Agregar boton whatsapp con html y css

Cómo agregar un botón Whatsapp clic-para-chatear a tu website con HTML y CSS

En otro articulo hemos visto como crear botones de compartir en redes sociales con HTML,  y en este vamos a ver como agregar un botón Whatsapp para llamadas o chat a tu website.

Hay una solución muy fácil que nos permite integrar un enlace de clic-para-chatear en cualquier parte de nuestro sitio web y la vamos a ver paso a paso.

 

 

¿Porque es útil agregar un botón de Whatsapp a tu website?

Si encontramos tantos website con este enlace de clic-para-chatear es porque añadir un botón Whatsapp a tu website, permitirá a tus usuarios y/o clientes entrar rápidamente en contacto contigo.
Además España es uno de los países donde se utiliza más esta aplicación. Según datos de eMarketer, Whatsapp cuenta con mas de 32 millones de usuarios en el país en 2021.

 

Generar el código HTML del botón

1-Elegir un icono Whatsapp como imagen

Como os decía, hay una solución muy fácil para integrar este enlace clic-para-chatear, y para poder empezar vamos a necesitar un icono de Whatsapp. Podéis encontrar muy fácilmente en internet todo tipo de iconos:

En el repositorio de Fontawesome: descargando una versión SVG del icono o copiando el código HTML. Ese ultimo requiere de instalar los archivos del repositorio en su proyecto o de poner un script con un kit creado dentro de un perfil en Fontawesome en el <head> de nuestro documento html.

<script src="https://kit.fontawesome.com/808781cc1c.js" crossorigin="anonymous"></script>

Si descargamos, la versión SVG, tendremos el código siguiente:

<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="whatsapp" class="svg-inline--fa fa-whatsapp fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"></path></svg>

 

– En el repositorio de iconos de una plataforma como Flaticon:  en este caso podréis descargar una versión png o svg del icono.

icono-whatsapp-flaticon

Para este tutorial, utilizare la versión SVG de fontawesome para poder con CSS ponerle el estilo que quiero.

 

2-Crear los elementos HTML

Creamos un div con un enlace al cual del momento no pondremos valor a su atributo href, que englobara la imagen del icono de whatsapp.

<div id="whatsapp">
   <a href="#" target="_blank">
     <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="whatsapp" class="svg-inline--fa fa-whatsapp fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"></path></svg>
   </a>
</div>

En el flujo del código HTML, lo podemos donde queramos. Yo en este caso, lo pondré antes del footer.

 

Generar el código CSS del botón de Whatsapp

El código CSS, va a depender de como queremos integrar el botón dentro de nuestro diseño. Yo lo voy a poner como un botón flotante (siempre visible) abajo a la derecha de mi página.

Para eso, voy a poner mi elemento con id «Whatsapp» en position fixed con coordenadas de bottom y right:

#whatsapp {
   position: fixed;
   bottom: 20px;
   right:20px;
}

Una vez, eso hecho, podemos poner estilo a nuestro icono. Primero le daré el tamaño que me interesa al SVG y le pondré una sombra para hacerlo resaltar de las otros elementos:

svg {
   width: 80px;
   filter: drop-shadow(0 1px 4px rgba(0,0,0,.4));
}

Modifiqué el SVG base de Fontawesome para poder tener un icono redondo, os dejo el código aquí:

<svg width="80" height="80" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit-->
<g class="layer">
<title>Layer 1</title>
<circle cx="40" cy="40" fill="#fff" id="svg_1" r="38" stroke="#000000" stroke-width="0"/>
<path d="m57.81072,21.975c-4.48928,-4.5 -10.46786,-6.975 -16.82142,-6.975c-13.11429,0 -23.78571,10.67143 -23.78571,23.78571c0,4.18928 1.09286,8.28215 3.17143,11.89286l-3.375,12.32142l12.61072,-3.31072c3.47143,1.89642 7.38215,2.89286 11.36786,2.89286l0.01072,0c13.10358,0 24.01072,-10.67143 24.01072,-23.78571c0,-6.35357 -2.7,-12.32142 -7.18928,-16.82142l-0.00001,-0.00001l-0.00001,0l-0.00002,0.00001zm-16.82142,36.6c-3.55714,0 -7.03928,-0.95357 -10.07143,-2.75357l-0.71785,-0.42857l-7.47858,1.96072l1.99286,-7.29642l-0.47143,-0.75c-1.98215,-3.15 -3.02142,-6.78215 -3.02142,-10.52142c0,-10.89642 8.87143,-19.76786 19.77858,-19.76786c5.28215,0 10.24286,2.05714 13.97143,5.79642c3.72857,3.73928 6.02142,8.7 6.01072,13.98215c0,10.90714 -9.09642,19.77858 -19.99286,19.77858l0,-0.00002l-0.00001,0l-0.00001,-0.00001zm10.84286,-14.80714c-0.58928,-0.3 -3.51429,-1.73572 -4.06072,-1.92857c-0.54643,-0.20358 -0.94286,-0.3 -1.33928,0.3c-0.39642,0.6 -1.53214,1.92857 -1.88571,2.33572c-0.34286,0.39642 -0.69642,0.45 -1.28571,0.15c-3.49286,-1.74643 -5.78571,-3.11785 -8.08928,-7.07143c-0.61072,-1.05 0.61072,-0.975 1.74643,-3.24643c0.19286,-0.39642 0.09642,-0.73928 -0.05357,-1.03928c-0.15,-0.3 -1.33928,-3.225 -1.83214,-4.41429c-0.48215,-1.15714 -0.975,-0.99642 -1.33928,-1.01785c-0.34286,-0.02142 -0.73928,-0.02142 -1.13572,-0.02142c-0.39642,0 -1.03928,0.15 -1.58571,0.73928c-0.54643,0.6 -2.07858,2.03572 -2.07858,4.96072c0,2.925 2.13214,5.75357 2.42142,6.15c0.3,0.39642 4.18928,6.39642 10.15714,8.97858c3.77143,1.62857 5.25,1.76786 7.13572,1.48928c1.14643,-0.17143 3.51429,-1.43572 4.00714,-2.82857c0.49286,-1.39286 0.49286,-2.58215 0.34286,-2.82857c-0.13928,-0.26786 -0.53572,-0.41785 -1.125,-0.70714l-0.00001,-0.00001l0.00002,-0.00001l-0.00002,-0.00001z" fill="currentColor" id="svg_2"/>
</g>
</svg>

Ahora le pondré el color corporativo de Whatsapp Green Light. Como estamos trabajando con un SVG, utilizaré una propiedad de cambio de estilo que no será «background-color» pero «fill». Dentro del SVG, tengo dos elementos a los cuales voy a aplicar un cambio de estilo, <circle> que va a tener el fondo verde, y <path> que va a tener un fondo blanco:

circle {
   fill: #25d366;
}
path {
   fill: #fff;
}

 

Cuando queremos añadir un enlace con un número de teléfono en HTML, utilizamos el atributo href con el valor tel: seguido del prefijo de país y del número de teléfono sin espacio:  href=»tel:+47……».

Crear tu propio enlace:

Utilice el enlace https://api.whatsapp.com/send/?phone=<número>, <número> siendo el número de teléfono en formato internacional, a decir con el prefijo de país, pero sin el + que aparece en general delante. Lo que daría lo siguiente para un número de teléfono español :
https://api.whatsapp.com/send/?phone=34650474…

Crear tu propio enlace con un mensaje predefinido:

El mensaje predefinido aparecerá automáticamente en el campo de texto de una discusión.  Para añadirlo, hay que utilizar el enlace anterior más el parámetro &text= más el mensaje en forma de URL. A decir, que los espacios deberán ser remplazados por los caracteres %20.

https://api.whatsapp.com/send?phone=346….302&text=Hola%20,te%20asesoramos%20por
%20whatsapp%20gestiona%20tu%20compra%20por%20este%20canal.

 

Podemos comprobar el enlace para verificar que hemos agregado de manera correcta el botón de Whatsapp. Y ya estamos listos para chatear directamente con nuestros usuarios o clientes.

Podéis encontrar el código completo de este tutorial con un bonus, haciendo clic en este enlace de copen. Cualquier duda me podéis dejar un comentario.

Escribe un comentario