Zenamu tarjoaa upotettavan skriptin, jonka avulla voit näyttää tuntiaikataulusi omalla verkkosivustollasi. Sivullasi aikataulu näytetään siinä näkymässä, jonka valitset kohdassa Aikataulunäkymä (katso alta Miten valitsen upotetun aikataulun näkymän?). Aikataulu on täysin responsiivinen (mukautuu automaattisesti eri laitteiden ja näyttöjen leveyteen) ja toimii hyvin muiden sisältöjen kanssa.
Integrointi on yksinkertainen ja vie alle 5 minuuttia. Riittää, että kopioit pienen koodinpätkän ja liität sen verkkosivullesi.
Perustiedot HTML:stä ja JavaScriptistä riittävät (suosittelemme toteutusta yhdessä verkkovastaavan kanssa).
Jos käytät verkkosivustollasi sisällönhallintajärjestelmää (CMS), aikataulun lisääminen onnistuu myös sen kautta. Katso ohjeemme Webnode-, WordPress- ja Wix.com-alustoille.
Aikataulun lisääminen verkkosivulle – vaihe vaiheelta
1. Lisää skripti
Skriptin voi lisätä kahdella tavalla:
a. Sivun <head>-osioon
Lisää seuraava rivi <head>-tagien väliin. Jos lisäät skriptin tähän kohtaan, muista lisätä myös defer, muuten aikataulu ei lataudu oikein.
Tuntiaikataulu
<script defer src="https://zenamu.com/calendar/list.js" crossorigin></script>
Tapahtumat
<script defer src="https://zenamu.com/calendar/workshops.js" crossorigin></script>
Kurssit
<script defer src="https://zenamu.com/calendar/courses.js" crossorigin></script>
b. Sivun <body>-osaan (ennen </body>)
Voit myös lisätä skriptin aivan sivun loppuun ennen </body>-tagia:
Tuntiaikataulu
<script src="https://zenamu.com/calendar/list.js" crossorigin></script>
Tapahtumat
<script src="https://zenamu.com/calendar/workshops.js" crossorigin></script>
Kurssit
<script src="https://zenamu.com/calendar/courses.js" crossorigin></script>
2. Lisää elementti
Lisää seuraava <div> siihen kohtaan sivustollasi, mihin haluat aikataulun näkyvän:
Tuntiaikataulu
<div id="zenamu-calendar" calendar-id="[your calendar ID]"></div>
Tapahtumat
<div id="zenamu-workshops" calendar-id="[your calendar ID]"></div>
Kurssit
<div id="zenamu-courses" calendar-id="[your calendar ID]"></div>
Korvaa [your calendar ID] omalla Zenamu-kalenteritunnuksellasi. Voit kopioida valmiin koodin, jossa kalenteritunnuksesi on jo mukana, hallintapaneelista: siirry kohtaan Asetukset > Aikataulusivu, avaa Julkinen aikataulu -välilehti ja laajenna Widgetit verkkosivuillesi -osiossa Aikataulu, Tapahtumat tai Kurssit. Samassa osiossa on myös Yksilöajat-widgetin koodi.
3. Tulos
Aikataulu näyttää sivustollasi suunnilleen tältä:
Tapahtumat
Kurssit
Miten valitsen upotetun aikataulun näkymän?
Aikataulun koodi on sama kaikille näkymille. Näkymä valitaan Zenamun asetuksissa:
Siirry kohtaan Asetukset > Aikataulusivu ja avaa Julkinen aikataulu -välilehti.
Laajenna Widgetit verkkosivuillesi -osiossa Aikataulu.
Napsauta kohdassa Aikataulunäkymä vaihtoehtoa Viikkokalenteri tuntiaikataulun kanssa, Lista 30 seuraavasta tunnista tai Viikoittainen lista. Zenamu tallentaa valintasi heti, eikä verkkosivusi koodia tarvitse muuttaa.
Listanäkymä ei rajoitu 30 päivään: se näyttää tulevat tuntisi 30 kerrallaan, ja kävijät voivat ladata lisää. Kävijät voivat myös vaihtaa aikataulussa toiseen näkymään.