Cómo agregar un Botón de Contacto de Telegram en Moodle

Los dispositivos móviles han cambiado la manera de interactuar en la internet: más del 54% de las personas acceden en ellos. Por lo que cualquier estrategia de comunicación en la actualidad, debe pasar sí o sí por ofrecerles a los usuarios una vía de comunicación por este medio.

Algunas de las aplicaciones favoritas de nuestros móviles es la mensajería instantánea, la cual está encarnada actualmente por dos grandes contendientes: WhatsApp y Telegram.

Así que, si queremos aprovechar este canal de comunicación en nuestra plataforma Moodle: qué mejor manera que ofrecer un botón para conectarnos directamente con nuestra mensajería instantánea.

Ya en el pasado te mostré como agregar un botón de contacto de WhatsApp, por lo que ahora le toca el turno a Telegram 😎.

Sin más previos, te enseñaré en este artículo cómo agregar un botón de contacto de Telegram en Moodle de manera sencilla y fácil. Pasemos a la acción.

Creando un usuario Telegram para el botón de contacto en Moodle

Antes de implementar el botón de contacto de Telegram en Moodle, debemos crear un usuario el cual estará asociado a nuestro teléfono móvil (celular), ya que es la forma en que Telegram nos permite interactuar tanto con la versión móvil como web.

Crear el usuario de Telegram en Android

Dirígete a la aplicación Telegram en tu teléfono celular, y presiona el icono de tres rayas ubicado en la parte superior izquierda.

Ahora ve a Ajustes > Nombre de usuario.

En el espacio disponible que pone: Tu nombre de usuario, escribe el nombre del usuario según sea de tu conveniencia (al menos cinco caracteres, entre letras, números o guiones bajos).

Es posible que no esté disponible el que deseas, por lo que Telegram te mostrará en tiempo real cuando el usuario que escribas es válido para su uso.

En la parte inferior se mostrará el link que luego usaremos para el botón de contacto de Telegram en Moodle, con una nomenclatura como esta: https://t.me/nombredeusuario, anótala, ya que la necesitaremos en el siguiente paso.

Una vez tengas la que te satisfaga, haz clic en el icono Check, ubicado en la parte superior derecha, para asociar este usuario con tu teléfono móvil.

Usuario de Telegram en iOS (iPhone)

1. Abre la app Telegram, presiona el botón Ajustes ubicado en la parte inferior, representada por una rueda dentada.
2. Luego, dirígete a Editar, ubicado en la parte superior derecha; selecciona Poner nombre de usuario.
3. Sigue los pasos que te expliqué anteriormente en Android para seleccionar el nombre del usuario. No olvides guardar el vínculo que se genera en la parte inferior.
4. Al finalizar haz clic a Listo, arriba a la derecha, para guardar los cambios y asignar el nombre de usuario a tu número móvil.

Código HTML para insertar el Botón de Contacto de Telegram en Moodle

Logueado como administrador en tu Moodle ve a: Administración del sitio > Apariencia > HTML adicional.

Agrega este código en el espacio en blanco que pone: Cuando BODY está abierto.

<a href="link-de-telegram" class="boton-telegram" target="_blank">
   <i class="fa fa-telegram tlg-flotante"></i>
</a>

Donde pone: link-de-telegram, sustitúyelo por el vínculo que obtuvimos cuando creamos el usuario en Telegram, con una nomenclatura como esta: https://t.me/nombredeusuario

Cuida de respetar las comillas y sin espacios en blanco.

Haz clic a Guardar los cambios.

El código quedaría como así, si seguimos el ejemplo anterior:

<a href="https://t.me/nombredeusuario" class="boton-telegram" target="_blank">
  <i class="fa fa-telegram tlg-flotante"></i>
</a>

Código CSS para botón de contacto Telegram en Moodle

Ahora que tenemos el botón insertado en Moodle, le daremos estilo con código CSS. Para ello debes ubicar donde se agrega código CSS personalizado o adicional en tu tema, tal como mencioné al principio.

Contacta con el soporte de tu tema si no lo ubicas en Moodle.

Para este tutorial lo agregaremos al tema Boost, que es el predeterminado de Moodle.

Siempre como administrador de Moodle, vamos a: Administración del sitio > Apariencia > Temas > Boost. Ahora dirígete a la pestaña Ajustes avanzados.

Agrega el siguiente código, en el espacio en blanco llamado: Raw SCSS (o SCSS sin modificar en las ultimas versiones de Moodle) .

.boton-telegram {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 50px;
  right: 25px;
  background-color: #0088cc;
  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;
}
.tlg-flotante {
  margin-top: 14px;
}

Guarda los cambios.

Deberías poder ver el botón de Telegram ubicado en la parte inferior derecha, tanto en dispositivos móviles como en la versión de escritorio de tu Moodle.

Si no puedes verlo, recarga la pantalla o dirígete a la página principal. Si persiste el que no puedas verlo, limpia la caché de Moodle en: Administración del sitio > Desarrollo > Purgas cachés, haciendo clic al botón Purgar todas las cachés.

Cuando se haga clic al botón, te llevará directamente a tu usuario en la aplicación Telegram en tu celular, o a la versión web de Telegram, si está en tu computadora 🤩.

Espero sea de utilidad este tutorial y te contacten mucho por Telegram 😅. No olvides dejar un comentario, son de gran importancia para hacer crecer este blog.