Añadir un botón flotante de Whatsapp

Para HTML,

1. En un archivo HTML, dentro de la etiqueta BODY, inserta una etiqueta DIV con la clase "btn-whatsapp" (este será usado en el archivo de CSS).

2.Dentro de dicha etiqueta, agrega un link (etiqueta "a") y dentro del mismo, agrega la etiqueta IMG.

3. La etiqueta IMG debe tener como SRC la ruta de la imagen de whatsapp. Si es necesario, ajustar el width dentro de la misma etiqueta.

El código debe parecerse a lo siguiente. (por supuesto, debes reemplazar: 5199999999, por el número de tu celular).

<div class="btn-whatsapp">
<a href="https://api.whatsapp.com/send?phone=5199999999" target="_blank">
<img src="http://s2.accesoperu.com/logos/btn_whatsapp.png" alt="">
</a>
</div>

4. Crear una hoja de estilos (si es que no se tiene una previamente).

5. En dicha hoja de estilos CSS, agregar el siguiente código

.btn-whatsapp {

        display:block;

        width:70px;

        height:70px;

        color#fff;

        position: fixed;

        right:20px;

        bottom:20px;

        border-radius:50%;

        line-height:80px;

        text-align:center;

        z-index:999;

}

5.1. Si no se está usando una Hoja de estilos, coloque este código dentro de la etiqueta HEAD del archivo HTML, utilizando la etiqueta STYLE, de la siguiente manera:

<style>
.btn-whatsapp {
       display:block;
       width:70px;
       height:70px;
       color:#fff;
       position: fixed;
       right:20px;
       bottom:20px;
       border-radius:50%;
       line-height:80px;
       text-align:center;
       z-index:999;
}
</style>

6. Finalmente, visualiza tu HTML para comprobar los cambios.

Nota: En lugar del atributo "right" (derecha), se puede utilizar "left" (si se desea posicionar a la izquierda). Asimismo, se pueden usar "top" o "bottom", dependiendo de las características que se quieran lograr.


Para Wordpress:

1. Se necesita un plugin.

2. En la barra lateral, selecciona "Plugins" y luego la opción "Añadir Nuevo"

3. Busca el plugin "WhatsHelp Chat Button". Instala y activa. En la barra lateral debe aparecer una opción "WhatsHelp". Hacer clic en esta opción.

4. Aparecerán dos pasos, los cuales hay que seguir.

4.a. Primero, haz clic en la URL que se indica en el "Step1" (paso 1). Aquí se personaliza la apariencia del botón.

- Esta configuración consta de 3 pasos: Primero, selecciona el icono de Whatsapp  e ingresa tu número de contacto. Segundo, personaliza un mensaje (opcional), selecciona la posición del botón (derecha o izquierda). Finalmente, agrega un correo como información adicional y haz clic en "Get Button Code" para obtener el código.

4.b. Copia el código anterior y pegalo en la sección "Step2".

5. Guarda los cambios y actualiza Wordpress