En este artículo aprenderás cómo crear un botón de WhatsApp y mostrarlo en tu KB, donde al hacer clic, el cliente será redirigido a tu WhatsApp.
Guía paso a paso en video
Sigue la guía paso a paso a continuación:
(enlace comentado en el video https://www.convertte.com.br/gerador-link-whatsapp/ ):
Guía paso a paso escrita
Sigue la guía paso a paso a continuación:
1. Agrega este código en el campo "Entre las etiquetas <head></head> del documento" en Configuraciones > Base de conocimiento > Apariencia:
<!-- CSS Whatsapp -->
<style>
.botao-whatsapp{
width: 60px;
height: 60px;
position: fixed;
right: 25px;
bottom: 40px;
background-color: #25d366;
color: #fff;
border-radius: 50px;
text-align: center;
font-size: 40px;
box-shadow: 2px 2px 3px #999;
z-index: 100;
}
.icone-whatsapp{
margin-top: 11px;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Fin - CSS Whatsapp -->
2. Agrega este código en el campo "Después de abrir la etiqueta <body>" en Configuraciones > Base de conocimiento > Apariencia:
<!! Inicio - botón Whatsapp>
<a href="COLOCA_TU_ENLACE_AQUI"
class="botao-whatsapp" target="_blank"><i class="fa fa-whatsapp icone-whatsapp"></i></a>
<!! Fin - botón Whatsapp>
3. Genera tu enlace en este sitio ( https://www.convertte.com.br/gerador-link-whatsapp/ )
Agrega este enlace en el código que agregaste en "Después de abrir la etiqueta <body>"
4. Guarda el cambio y accede a tu base de conocimiento nuevamente. Verás que el ícono de WhatsApp ahora se muestra como se indica a continuación: