Como añadir icono flotante de WhatsApp a una pagina web

Aquí te dejo el código con todo y estilos, listo para copiar y pegar y así de simple puedes colocar el icono WhatsApp flotante html en tu sitio web, con este código también puedes poner el icono de whatsapp flotante en wordpress…

También sirve para cualquier otro icono o lo que sea que necesites que se vea siempre flotando en todo tu sitio web, solo es cuestión de cambiar la url de imagen y la url de la red social.

Es muy importante proceder a realizar el cambio del número de teléfono donde van a llegar los mensajes de las personas que van a visitar tu página web.

Icono whatsapp flotante html

<span>
<a href="https://wa.me/TUNUMERO" style="background-color: #25d366; position: fixed; width: 60px; height: 60px; bottom: 25px; left: 25px; color: #FFF; border-radius: 50px; text-align: center; box-shadow: 2px 2px 3px #999; z-index: 9999999;" target="_blank">
<img src="https://trucopedia.site/wp-content/uploads/2022/07/whatsapp.png">
</a>
</span>

Para hacerte la vida más fácil, aquí encontraras el icono de whatsapp en SVG y PNG en diferentes medidas, desde 25x25px hasta 100x100px.

Si deseas individualizar el mensaje listo para que tu usuario te contacte, puedes hacerlo de forma continua de donde te encargas de personalizar con tu número de contacto, este punto debes tener siempre presente que el espacio existente entre cada palabra lo haces con los caracteres al “%20”. (https://wa.me/TUNUMEROtext=Hola!%20Estoy%20interesado%20en%20tu%20servicio)

¿Cómo poner el icono de WhatsApp en WordPress?

También en este artículo podrás resolver de forma sencilla cualquiera sea tu duda de cómo añadir o agregar el botón de WhatsApp en WordPress de modo fácil sin la ayuda de ningún plugins ¿ como poner boton whatsapp en mi web ?.

Primero debes insertar el código HTML antes del cierre de la etiqueta </header> o también funciona si lo colocas en la linea anterior del código en donde se termina el </footer>

En el menú lateral de WordPress puedes crearlo en Apariencia –> Editor de tema. En las opciones que encontraras a tu lado derecho escogerás la opción que dice footer.php o en header.php y procedes a insertar la siguiente etiqueta en la apertura de esta sección. No olvides que debes guardar los cambios que vayas realizando.

<span class="iconodewhatsap" style="cursor: pointer;">
<a href="https://www.instagram.com/isrracondobler/" target="_blank">
<img src="LA URL DE TU ICONO/instagram.png">
</a>
</span>

En las siguientes capturas de pantalla te explico como poner el icono de whatsapp en wordpress, el código con el icono de WhatsApp html lo colocamos antes de que termine </head> En las capturas muestro como colocarlo en el archivo header-single.php pero no siempre esta con es nombre, generalmente lo encuentras como header.php (todo depende del template que estes usando).

Si no tienes acceso al código del template, puedes usar el plugin Insert Headers and Footers by WPBeginner  Aquí colocas el código HTML

Ahora ya que conoces cómo poner el icono de WhatsApp en WordPress, si utilizaste el primer código de este artículo, no necesitas hacer más, pero si usas el código sin estilos entonces ahora sigue darle un poco de estilo

En WordPress puedes sumar estos estilos en la hoja propia de tu template. Comúnmente lo vas a conseguir en la siguiente vía:
Apariencia -> Personalizar.

Allí conseguirás una opción para sumar el código CSS personalizado, no olvides guardar los cambios como antes.

Este es el código CSS: .iconodewhatsap { position: fixed; bottom: 15px; left: 15px; width: 45px; z-index: 999; }

La recomendación es siempre crear el Child Theme, copiar el archivo header.php del tema padre y agregarlo a la carpeta child.

Por último procedemos a actualizar la página web y ya te debe aparecer tu botón con el enlace de Whatsapp.

Importante:
Si un visitante abre tu chat de Whatsapp desde una pc, un computador de escritorio o un dispositivo portátil, le va a solicitar de forma inmediata la descarga de la aplicación.

De ya contar con la aplicación, abrirá el chat de forma automática. Si tu visitante hace clic en el botón del chat desde un dispositivo móvil, le abrirá igualmente de forma automática la aplicación del Whatsapp.

En el siguiente video hago el ejercicio completo de como agregar un icono whatsapp flotante html en tu pagina web.

Suscríbete a mi canal y sígueme en instagram, @isrracondobler

Dale like a mi fanpage: https://www.facebook.com/doblercarranco