1. Para añadir un botón con enlace de Whatsapp a tu página web primero vamos a insertar la siguiente etiqueta HTML Antes del cierre de la etiqueta  </body>

Si usas Wordpress puedes hacerlo en Apariencia –> Editor de tema. En las opciones que ves a tu lado derecho seleccionas la opción footer.php e insertas la siguiente etiqueta en el inicio de esta sección. No olvides guardar los cambios.

// comentario
<img class="btn-whatsapp" src="https://clientes.dongee.com/whatsapp.png" width="64" height="64" alt="Whatsapp" onclick="window.location.href='https://wa.me/573001112233?text=Hola!%20Estoy%20interesado%20en%20tu%20servicio'">
// comentario


Es muy importante cambiar el número de teléfono donde llegará los mensajes de los visitantes de tu página web. Lo podemos personalizar en la sección de la etiqueta en el evento onclick donde dice “https://wa.me/573001112233?”

Si deseas personalizar el mensaje listo para que tu usuario te contacte, puedes hacerlo a continuación de donde personalizas tu número de contacto. Debes tener presente que el espacio entre cada palabra lo haces con los caracteres “%20”.

2. En el encabezado de tu página web vamos a insertar los siguientes estilos CSS en medio de las etiquetas <head> y </head>
Si usas Wordpress puedes añadir estos estilos en la hoja propia de tu template. Usualmente lo encuentras en la siguiente ruta: Apariencia -> Personalizar. Allí encontrarás una opción para añadir código CSS personalizado. Si lo haces por este medio debes retirar las etiquetas <style> y </style>.
No olvides guardas los cambios 

<style>
img.btn-whatsapp {
display: block !important;
position: fixed;
z-index: 9999999;
bottom: 20px;
right: 20px;
cursor: pointer;
border-radius:100px !important;
}
img.btn-whatsapp:hover{
border-radius:100px !important;
-webkit-box-shadow: 0px 0px 15px 0px rgba(7,94,84,1);
-moz-box-shadow: 0px 0px 15px 0px rgba(7,94,84,1);
box-shadow: 0px 0px 15px 0px rgba(7,94,84,1);
transition-duration: 1s;
}
</style>


Actualizas tu página web y ya te aparecerá tu botón con enlace de Whatsapp.

Nota:
Si un visitante abre tu chat de Whatsapp desde un computador de escritorio o portátil, le solicitará la descarga de la aplicación. De ya contar con ella, abrirá el chat automáticamente.
Si tu visitante presiona el botón del chat desde un dispositivo móvil, le abrirá automáticamente la aplicación de Whatsapp.

¿Encontró su respuesta?