Como agregar un Botón de WhatsApp en Moodle para contacto

La interacción es fundamental en nuestra plataforma Moodle, pero en un mundo donde las herramientas de comunicaciones se orientan cada vez más a las aplicaciones móviles, ¿cómo hacemos para mantenernos en contacto desde nuestro Moodle con los usuarios móviles de manera fácil y rápida?

Las aplicaciones de mensajería instantánea son una de las maneras más efectivas de comunicarnos entre dispositivos móviles, y en este segmento actualmente WhatsApp es el rey 👑.

En este artículo, te enseñaré cómo integrar un botón de WhatsApp en Moodle para que puedas contactar con los usuarios de tu plataforma vía web o dispositivo móvil.

Este botón será flotante y siempre estará visible en la esquina inferior derecha mientras navegas en Moodle. Es un tutorial válido para cualquier tema de Moodle.

Entendiendo los números telefónicos internacionales

entendiendo el código telefónico internacional

WhatsApp para funcionar necesita un número telefónico asociado.  Por lo que debemos disponer de uno para vincularlo a esta aplicación de mensajería.

La nomenclatura de los números telefónicos internacionales tienen esta secuencia de dígitos: código nacional + código aperadora telefónica (o código de área) + número de teléfono del usuario

Esta nomenclatura se desglosa así:

  • Cada país tiene un prefijo que se corresponde al código nacional y que se antepone al de la operadora telefónica y número telefónico. Por ejemplo, en España es +34, en Colombia es +57, Estados Unidos: +1, Venezuela +58, etc.
  • Luego viene el código asociado de la operadora móvil (o área), que por lo general tiene 3 dígitos.
  • Al final tenemos el número de teléfono del usuario que tiene 7 dígitos.

Es necesario saber el código internacional del número telefónico que usaremos como contacto, para que lleguen correctamente los mensajes al WhatsApp.

Para que lo entiendas mejor, pongamos un ejemplo:

Supongamos que el número telefónico de una persona que vive en México es: (394) 5550000, el número internacional seria: +523945550000

En esta página, tienes los códigos internacionales de todos los países.

Importante
Si tu número de operadora móvil o de área, la precede un cero, no lo incluyas (así como tampoco los paréntesis, guiones o espacios).
Por ejemplo: si el código de la operadora (área) es: 0394, coloca solo 394 en el código internacional.

Creando un link de WhatsApp con nuestro número telefónico

Para agregar el botón de WhatsApp en Moodle, crearemos un vínculo web que contendrá el número telefónico internacional antecedido por este link: https://wa.me/

De este modo, siguiendo el ejemplo anterior, si nuestro número internacional fuera: +523945550000, nuestro link de WhatsApp sería: https://wa.me/523945550000

Nota
Los códigos internacionales agregan el signo más: + delante del número telefónico, pero WhatsApp recomienda que lo omitamos al momento de crear el link wa.me, por lo que debes quitarlo.

Si deseas que al hacer clic en el link de WhatsApp se incluya un texto predeterminado en el mensaje, agrega esto al final: /?text=textopredeterminado

Sustituyendo “textopredeterminado” por el texto que quieras.

Por ejemplo, si el mensaje predeterminado quieres que sea: Quiero soporte. El link quedaría así: https://wa.me/523945550000/?text=Quiero%20soporte

Usa %20 para sustituir el espacio entre palabras. De tal modo que, si tu texto predeterminado es: Hola, me puedes ayudar

El vínculo quedaría así: https://wa.me/523945550000/?text=Hola,%20me%20puedes%20ayudar

Si aún tienes dudas, esta página puede ayudarte.

Una vez, tenemos nuestro link 😛, ya hemos hecho el 80% del trabajo para agregar el botón de WhatsApp en Moodle 😱

Insertando el botón de WhatsApp en Moodle

Ve como administrador en Moodle a: Administración del sitio > Apariencia > HTML adicional

Coloca este código en el espacio que pone: Antes de cerrar BODY

<a href="link-de-WhatsApp" class="boton-whatsapp" target="_blank">
   <i class="fa fa-whatsapp wht-flotante"></i>
</a>

Sustituye donde pone link-de-WhatsApp por el vínculo creado anteriormente, que contiene el número telefónico. Respeta las comillas y sin espacios.

Haz clic a Guardar cambios.

agregando código html para boton de whatsapp en moodle

Tomando el ejemplo del link anterior, el código quedaría así:

<a href="https://wa.me/523945550000/?text=Hola,%20me%20puedes%20ayudar" class="boton-whatsapp" target="_blank">
   <i class="fa fa-whatsapp wht-flotante"></i>
</a>

Agregando el código CSS para el botón de contacto por WhatsApp en Moodle

Una vez que hemos agregado el código HTML, que inserta nuestro botón de WhatsApp en Moodle, le daremos estilo usando CSS.

Para ello debemos ubicar el espacio destinado a agregar CSS personalizado en nuestro tema de Moodle. Te recomiendo mirar la documentación del mismo si no puedes ubicarlo.

Por regla general, el espacio se denomina CSS personalizado, y está ubicado en Administración del sitio > Apariencia > Temas > nombredeltema

Si usas Boost, el cual es el tema predeterminado de Moodle a partir de la versión 3.2, debes ir a: Administración del sitio > Apariencia > Temas > Boost, luego ve a la pestaña Ajustes avanzados, campo Raw SCSS.

Una vez ubiques el espacio destinado a insertar CSS en tu tema, agrega esto:

.boton-whatsapp {
position: fixed;
width: 60px;
height: 60px;
bottom: 50px;
right: 25px;
background-color: #25d366;
color: #FFF;
border-radius: 50px;
text-align: center;
font-size: 30px;
box-shadow: 1px 1px 5px rgba(0,0,0,.2);
z-index: 100;
transition: all .3s ease;
}
.wht-flotante {
margin-top: 14px;
}

Guarda los cambios.

agregando código css para botón de whatsapp en moodle

Ya deberías poder ver el botón de WhatsApp en tu Moodle, ubicado en la parte inferior derecha 🤩

Si no lo ves en la Administración de Moodle, ve a la página principal y ¡voilà! ya lo verás.

Espero sea de ayuda esta guía, recuerda dejar un mensaje en los comentarios si ha sido de ayuda para ti . Saludos.

Califica este artículo

Puntuación promedio 5 / 5. Votos: 6

No hay votos hasta ahora. Sé el primero en calificar esta publicación.

6 comentarios en «Como agregar un Botón de WhatsApp en Moodle para contacto»

  1. Hola, seguí los pasos del articulo, pero no me funcionó, tengo el tema Eguru en mi Moodle.

    Si tienes otras opciones para esto te agradecería…

    Responder
    • Hola Keneth.
      Este tutorial es válido para todos los temas para Moodle, ya que usa HTML y CSS, dos estándares de la web.
      Revisa si estás copiando el código en los campos respectivos en el tema, sobre todo el CSS, donde cada tema tiene un espacio distinto para ello.
      Lamento no ser de más ayuda.
      Saludos.

      Responder
    • Saludos

      El problema puede estar en el vínculo creado, en el ejemplo se sugiere colocar el símbolo de suma antes del número.

      Elimina el símbolo, coloca tu número y prueba si funciona,

      En el ejemplo quedaría así

      https://wa.me/523945550000/?text=Hola,%20me%20puedes%20ayudar"

      Responder
      • Hola Lisset.

        Gracias por la acotación.

        Al momento de crear este post, era posibles que los enlaces wa.me tuvieran todavía él + delante del número telefónico, pero hice algunas pruebas, y efectivamente WhatsApp es más estricto ahora con esto, por lo que debe omitirse.

        Actualice el articulo para reflejar este cambio.
        Saludos.

        Responder

Deja un comentario

El responsable de este sitio web es Marit Acuña. La finalidad de los datos es gestionar los comentarios en este blog. El destinatario (donde se almacenan los datos) es el hosting de este blog: Banahosting, ubicado en EEUU. La legitimidad es el consentimiento que otorgas en el formulario. Tienes derecho a acceder, rectificar, limitar y suprimir tus datos según la política de privacidad.

Me interesa
Curso: Gamificando
como un Experto
Haz que tus alumnos aprendan
mientras juegan
Curso online 100% tutorizado
Únete y recibe las últimas novedades en tu email.
Suscríbete a Evirtualplus
Suscríbete
política de privacidad
Acepto la
Suscríbete a Evirtualplus
Acepto la política de privacidad
Suscríbete
Suscríbete