Para saber cómo añadir el botón de whatsapp a una 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án 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”.
Ahora ya sabes cómo añadir el botón de whatsapp a una página web pero puedes darle un poco de estilo!
2. En el encabezado de tu página web vamos a insertar los siguientes estilos CSS en medio de las etiquetas
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 guardar 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.
Si utilizas el Constructor Dongee puedes revisar nuestro video instructivo aquí para añadir el botón en tu portal