Tutorial: poner botón de Whatsapp en tu web

Miguel Infoes

En este pequeño artículo te voy a mostrar como hice para poner el botón de Whatsapp en mi página web. Esto es muy importante para tener una comunicación en tiempo real con tus visitantes; resolver dudas de atención al cliente. También puedes poner un botón de Messenger de Facebook, pero me parece que es más común el uso de Whatsapp y puede ser más útil.

Este tutorial también lo he explicado en mi canal de YouTube, por si te parece más sencillo de seguir la explicación.

Antes de empezar

Para poder implementar el botón partimos de la base que tu sitio web se mueve mediante el gestor de contenidos de WordPress, que está instalado y funcionando correctamente en tu propio servidor. Para lograr este cometido debemos instalar un plugin. Los plugins son pequeñas líneas de código que dotan a tu WordPress de algunas herramientas o ayudas como pueden ser utilidades de edición o presentación de contenidos.

Comenzando

El primer paso consiste en ir a la barra lateral de la izquierda donde tenemos las opciones principales del panel de administración de WordPress y buscamos la sección de plugins.

\"tutorial

En esta columna damos click en la opción \»añadir nuevo\». En la pantalla nos vamos a la casilla de búsqueda para ubicar el plugin de Whastapp.

\"tutorial

El plugin que buscamos

De las opciones disponibles seleccionamos la última que es la que estamos buscando y se llama \»WhatsHelp Chat Button\». Hacemos click en el botón de \»instalar ahora\».

\"tutorial

Una vez instalado, debemos activarlo mediante el botón del mismo nombre.

\"tutorial

Cuando esté activado el plugin, lo veremos en la lista de la columna izquierda con los demás plugins disponibles y picamos en él para ver las opciones que tiene.

\"tutorial

Configurando…

¡Ahora comienza lo bueno! podemos empezar a usar el plugin. Básicamente para poder poner el botón necesitamos un código que se obtiene en el vínculo que aparece en donde dice \»step 1\»

\"tutorial

Esto nos lleva a la página de los desarrolladores del botón del widget whatshelp que se abrirá en otra pestaña del navegador.

\"tutorial

Vamos a personalizar

Aquí nos desplazamos hasta abajo para generar el código personalizado que debemos pegar en la pantalla dentro de WordPress. Podemos seleccionar botones para diversas aplicaciones de mensajería o chat. En mi caso deshabilito la opción del Messenger de Facebook y me quedó sólo con el de Whatsapp. Luego en la casilla correspondiente a Whatsapp ingreso el número celular (incluido el indicativo internacional).

\"tutorial

En el punto dos \»customize your button\» están las opciones para colocar un mensaje de llamada a la acción. En mi caso he puesto \»buenas ¿En qué puedo ayudarte?\» para iniciar la conversación. También podemos seleccionar si deseamos que el botón esté ubicado a la izquierda o a la derecha en la pantalla.

\"tutorial

Posteriormente en el punto 3 \»Add the code to your website\» obtenemos el código que se genera con las características personalizadas de nuestro número telefónico y el llamado a la acción. Tenemos que dar nuestro email para recibir el código, pero igualmente se presenta en pantalla una vez presionamos el botón azul de \»Get Button Code\».

\"tutorial

Obteniendo el código del botón

Podemos ver el código generado y procedemos a resaltarlo para luego copiarlo.

\"tutorial

Poniéndolo en su lugar

Nos regresamos a la pestaña del navegador donde tenemos abierto WordPress y pegamos el código
en la casilla correspondiente.

\"tutorial

A partir de aquí debemos guardar los cambios con el botón azul que está debajo del cajón del código.

El resultado final

\"tutorial

Podemos ver como queda el resultado final al cargar nuestra página. Si deslizamos el puntero del mouse sobre el botón podremos ver el mensaje \»Buenas ¿En qué puedo ayudarte? Si picamos en él se nos preguntará el programa del pc o se abre un chat en la app de Whatsapp; en el móvil. Teniendo en cuenta que la mayoría de personas mira la web desde el móvil, esta es una opción muy conveniente.

Eso es todo, fácil. ¿No? Ahora ya tienes un botón de Whatsapp en tu web. Pues espero que este tutorial te sea de mucha ayuda. Entre mayor interacción podamos tener con los visitantes de nuestra web mejor será el servicio que podremos prestar. Esta es la forma más fácil de obtener un Lead. El tema de los Leads lo desarrollé en un artículo que te invito a que revises.

¡No te pierdas nada!

Contacto