Como 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 como 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.

Nota

El botón estará disponible siempre en nuestro Moodle en la parte inferior derecha al ser flotante, tanto de la versión de computadora de escritorio como celular.

Este tutorial es válido para cualquier tema de Moodle. Lo único que debes es constatar donde se agregar el código CSS, ya que esto puede variar según el tema que tengas configurado. Por lo general está ubicado en Administración del sitio > Apariencia > Temas > nombredeltema, en alguna de las pestañas, como la de ajustes.

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.

Nombre de usuario Telegram Android

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.

Escoger nombre de usuario en Telegram

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: Antes de cerrar BODY.

<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.

Agregar código HTML para botón de contacto Telegram en Moodle

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.

.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.

Agregar código CSS para botón de contacto de Telegram en Moodle

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.

Califica este artículo

Puntuación promedio 5 / 5. Votos: 1

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

Photo of author

Diógenes Mata

Fundador de VivaBlogger y cofundador de EVirtualplus. Soy un tecnomaniaco desde que estaba en pañales. Mi familia es el fundamento de mi vida. Sígueme en mis redes sociales.

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.