Ir al contenido principal

Cómo integrar el horario en su sitio web mediante JavaScript

Zenamu ofrece un script que le permite incrustar el horario de sus clases en su propio sitio web. Su sitio muestra el horario en la vista que elija en Vista del calendario (consulte ¿Cómo elijo la vista del horario integrado? más abajo). El horario es completamente responsivo (se ajusta automáticamente al ancho de diferentes dispositivos y pantallas) y se integra bien con otros componentes de la página.

La integración es sencilla y no toma más de 5 minutos. Solo necesita copiar un pequeño fragmento de código y pegarlo en su sitio web. Se requiere un conocimiento básico de HTML y JavaScript (recomendamos esta opción con su webmaster).

Si utiliza un sistema de gestión de contenido para su sitio web, también es posible la integración. Consulte nuestros tutoriales para incrustar un horario en un sitio con Webnode, WordPress o Wix.com.

Añadiendo a su sitio web - paso a paso

1. Insertar el script

Hay dos formas de insertar el script:

a. En el encabezado (<head>) de la página HTML

Coloque el siguiente código entre las etiquetas <head> de su sitio web. Si inserta el script en el encabezado, no olvide el atributo defer; de lo contrario, el horario no se mostrará.

Horario de clases

<script defer src="https://zenamu.com/calendar/list.js" crossorigin></script>

Eventos y talleres

<script defer src="https://zenamu.com/calendar/workshops.js" crossorigin></script>

Cursos

<script defer src="https://zenamu.com/calendar/courses.js" crossorigin></script>

b. En el cuerpo (<body>) de la página HTML

Coloque el siguiente código al final de la página HTML, justo antes de la etiqueta de cierre </body>:

Horario de clases

<script src="https://zenamu.com/calendar/list.js" crossorigin></script>

Eventos y talleres

<script src="https://zenamu.com/calendar/workshops.js" crossorigin></script>

Cursos

<script src="https://zenamu.com/calendar/courses.js" crossorigin></script>

2. Insertar el elemento

Añada el siguiente <div> en el lugar de su sitio web donde quiera que aparezca el horario:

Horario de clases

<div id="zenamu-calendar" calendar-id="[su ID de calendario]"></div>

Eventos y talleres

<div id="zenamu-workshops" calendar-id="[su ID de calendario]"></div>

Cursos

<div id="zenamu-courses" calendar-id="[su ID de calendario]"></div>

[su ID de calendario] - reemplácelo con su ID único, que puede encontrar en la administración de Zenamu.

  • Puede copiar el código completo, con su ID de calendario ya incluido, en su panel de administración: vaya a Ajustes > Página de horario, abra la pestaña Calendario público y, en Widgets para su sitio web, despliegue Horario, Eventos y talleres o Cursos. En esa misma sección también está el código de un widget de Citas.

3. Resultado

Así se verá el horario integrado:

Eventos y talleres

Cursos

¿Cómo elijo la vista del horario integrado?

El código del horario es el mismo para todas las vistas. La vista es un ajuste de Zenamu:

  1. Vaya a Ajustes > Página de horario y abra la pestaña Calendario público.

  2. En Widgets para su sitio web, despliegue Horario.

  3. En Vista del calendario, haga clic en Calendario semanal con el horario de clases, Lista de las 30 próximas o Lista semanal. Zenamu guarda su elección al instante y no necesita cambiar el código de su sitio web.

La vista de lista no se limita a 30 días: muestra sus próximas clases de 30 en 30, y los visitantes pueden cargar más. Los visitantes también pueden cambiar a otra vista desde el propio horario.

¿Ha quedado contestada tu pregunta?