Zenamu umożliwia dodanie grafiku zajęć na własną stronę internetową za pomocą prostego skryptu JavaScript. Po jego umieszczeniu na stronie grafik wyświetli się w widoku wybranym w ustawieniu Widok grafiku (zob. Jak wybrać widok wstawionego grafiku? poniżej). Grafik jest responsywny, co oznacza, że automatycznie dostosowuje się do różnych rozmiarów ekranów i urządzeń, a także jest kompatybilna z innymi elementami na stronie.
Integracja jest prosta i zajmie Ci mniej niż 5 minut. Wystarczy skopiować fragment kodu i wstawić go na swoją stronę. Do wykonania tej operacji potrzebna jest podstawowa znajomość HTML i JavaScript. Zalecamy przeprowadzenie tej integracji wspólnie z administratorem Twojej strony.
Jeśli Twoja strona korzysta z systemu zarządzania treścią, również możesz skorzystać z naszych instrukcji integracji. Przeczytaj, jak wstawić grafik na stronę w Webnode, WordPress lub Wix.com.
Dodawanie grafiku na stronę – krok po kroku
1. Wstawienie skryptu
Skrypt można dodać na dwa sposoby:
a. Poprzez skrypt w nagłówku (<head>) strony HTML
Wklej poniższy kod dokładnie w tej formie pomiędzy tagami <head></head> Twojej strony. Pamiętaj, aby dodać atrybut defer do tagu <script>, aby upewnić się, że grafik zostanie poprawnie załadowany.
Lista zajęć
<script defer src="https://zenamu.com/calendar/list.js" crossorigin></script>
Lista wydarzeń i warsztatów
<script defer src="https://zenamu.com/calendar/workshops.js" crossorigin></script>
Lista cykli zajęć
<script defer src="https://zenamu.com/calendar/courses.js" crossorigin></script>
b. lub wewnątrz ciała (<body>) strony HTML
Linijkę z kodem umieść dokładnie w tej formie w dolnej części strony tuż przed końcowym tagiem </body>:
Lista zajęć
<script src="https://zenamu.com/calendar/list.js" crossorigin></script>
Lista wydarzeń i warsztatów
<script src="https://zenamu.com/calendar/workshops.js" crossorigin></script>
Lista cykli zajęć
<script src="https://zenamu.com/calendar/courses.js" crossorigin></script>
2. Wstawienie bloku
W miejscu na Twojej stronie, gdzie chcesz, aby grafik się pojawił, dodaj następujący <div>:
Lista zajęć
<div id="zenamu-calendar" calendar-id="[ID Twojego kalendarza]"></div>
Lista wydarzeń i warsztatów
<div id="zenamu-workshops" calendar-id="[ID Twojego kalendarza]"></div>
Lista cykli zajęć
<div id="zenamu-courses" calendar-id="[ID Twojego kalendarza]"></div>
[ID Twojego kalendarza] zastąp swoim unikatowym ID, które znajdziesz w administracji swojego konta.
Gotowy kod z już uzupełnionym ID Twojego kalendarza skopiujesz w panelu administracyjnym: przejdź do Ustawienia > Strona grafiku, otwórz zakładkę Publiczny grafik i w sekcji Widgety na Twoją stronę rozwiń Grafik, Wydarzenia i warsztaty lub Cykle zajęć. W tej samej sekcji jest też kod widgetu Wizyty.
3. Gotowe
Wygląda to podobnie jak nasz grafik poniżej.
Lista zajęć
Wydarzenia i warsztaty
Cykle zajęć
Jak wybrać widok wstawionego grafiku?
Kod grafiku jest taki sam dla każdego widoku. Widok ustawiasz w Zenamu:
Przejdź do Ustawienia > Strona grafiku i otwórz zakładkę Publiczny grafik.
W sekcji Widgety na Twoją stronę rozwiń Grafik.
W sekcji Widok grafiku kliknij Tygodniowy kalendarz z grafikiem zajęć, Lista najbliższych 30 terminów lub Lista tygodniowa. Zenamu od razu zapisze wybór, a kodu na Twojej stronie nie trzeba zmieniać.
Widok listy nie jest ograniczony do 30 dni: pokazuje nadchodzące zajęcia po 30 naraz, a odwiedzający mogą wczytać kolejne. Odwiedzający mogą też przełączyć grafik na inny widok.