iFrame lisamine

Lisamine välisele kodulehele (iframe) 
 Kursustele registreerimise vormi ja tunniplaani saab iframe'i kaudu lisada, mis tahes välisele kodulehele (tantsustuudio koduleht, kooli koduleht jms). Kasutaja ei märka, et sisu on laetud teisest serverist — see näeb välja nagu kodulehe osa. 
 Saadaolevad vidinad 
 
 
 
 Vidin 
 URL 
 Kirjeldus 
 
 
 
 
 Registreerimisvorm 
 /iframe/{lang}/courses/registration/{token} 
 Täielik vorm: kursuse valik, hind, õpilase/maksja andmed 
 
 
 Tunniplaan 
 /iframe/courses/timetable/{token} 
 Tunniplaani tabel kursuse filtriga 
 
 
 
 Ettevalmistus 
 1. Looge avalik link 
 
 Minge Seaded > Avalikud lingid . 
 Vajutage Loo link . 
 Tüüp: Registreerimine kursustele või Tunniplaan . 
 Märkige silt (näiteks „Stuudio koduleht — registreerimine"). 
 Vajutage Salvesta . 
 
 Süsteem genereerib URL-i: 
 Registreerimine: https://teie-domeen.ee/iframe/et/courses/registration/abc123...def456
Tunniplaan: https://teie-domeen.ee/iframe/courses/timetable/abc123...def456
 
 
 Registreerimisvormi keel määratakse URL-i osa järgi: /et/ eesti keele jaoks, /ru/ vene keele jaoks. Tunniplaan kasutab organisatsiooni seadete keelt. 
 
 2. Valige lisamise viis 
 On kolm viisi — lihtsast edasijõudnuni. 
 
 Viis 1: Üks rida (lihtne) 
 Sobib CMS-ile (WordPress, Wix, Squarespace) väljaga „sisesta HTML" või „Custom HTML block". 
 <iframe src="https://teie-domeen.ee/iframe/et/courses/registration/TOKEN"
 style="width:100%;min-height:800px;border:none" scrolling="no"></iframe>
 
 Plussid: maksimaalselt lihtne, üks rida. 
 Miinused: fikseeritud kõrgus ( 800px ). Kui vorm on pikem — ilmub tühi ruum või osa vormist lõigatakse ära. Tuleb käsitsi valida min-height . 
 
 Viis 2: Üks rida + automaatne suuruse muutmine (soovitatav) 
 Iframe muudab kõrgust automaatselt vastavalt sisule. Kaks elementi: 
 <iframe src="https://teie-domeen.ee/iframe/et/courses/registration/TOKEN"
 style="width:100%;min-height:600px;border:none" scrolling="no"></iframe>
<script>
window.addEventListener('message', function(e) {
 if (e.data && e.data.type === 'huvis-resize') {
 document.querySelectorAll('iframe').forEach(function(f) {
 try { if (new URL(f.src).origin === e.origin) f.style.height = e.data.height + 'px'; } catch(x) {}
 });
 }
});
</script>
 
 Plussid: kõrgus muutub automaatselt sisu muutumisel (kursuse valik, valideerimisvead, telefoni orientatsiooni muutmine). 
 Miinused: tuleb sisestada nii iframe kui ka script. 
 
 WordPressi jaoks: kasutage plokki „Custom HTML" ja sisestage mõlemad elemendid tervikuna. 
 
 
 Viis 3: embed.js (edasijõudnud) 
 Skript loob iframe'i automaatselt täieliku seadistusega: automaatne suuruse muutmine, vigadele kerimine, läbipaistev taust. 
 <div id="huvis-registration"></div>
<script src="https://teie-domeen.ee/embed.js"
 data-url="https://teie-domeen.ee/iframe/et/courses/registration/TOKEN"></script>
 
 Plussid: kõik automaatselt — iframe'i loomine, automaatne suuruse muutmine, kerimine vigadele pärast vormi saatmist. 
 Miinused: ühendatakse väline skript (mõned CMS võivad selle blokeerida). 
 embed.js parameetrid 
 
 
 
 Atribuut 
 Kohustuslik 
 Kirjeldus 
 
 
 
 
 data-url 
 Jah 
 Registreerimisvormi täielik URL 
 
 
 data-container 
 Ei 
 Konteineri ID (vaikimisi huvis-registration ) 
 
 
 
 Käsitsi initsialiseerimine 
 Kui iframe tuleb luua programmiliselt: 
 <div id="my-form"></div>
<script src="https://teie-domeen.ee/embed.js"></script>
<script>
 HuvisEmbed.init({
 url: 'https://teie-domeen.ee/iframe/et/courses/registration/TOKEN',
 container: 'my-form'
 });
</script>
 
 
 Adaptiivsus (mobiiliseadmed) 
 Vorm on täielikult adaptiivne ja kohandub automaatselt ekraani suurusele: 
 
 
 
 Seade 
 Käitumine 
 
 
 
 
 Lauaarvuti (>768px) 
 Väljad 2 veerus, täielik tunniplaani tabel 
 
 
 Tahvelarvuti (768px) 
 Väljad 1-2 veerus sõltuvalt laiusest 
 
 
 Telefon (<640px) 
 Kõik väljad 1 veerus, kompaktsed nupud 
 
 
 
 Ekraani pööramisel või akna suuruse muutmisel arvutatakse iframe'i kõrgus automaatselt ümber (kui kasutatakse viisi 2 või 3). 
 
 Välimuse seadistamine 
 Taust 
 Iframe'il on läbipaistev taust — vorm on teie kodulehe taustal. Kui on vaja valget tausta — see määratakse iframe'i sees asuva vormi konteineriga. 
 Vormi pealkiri 
 Registreerimisvormi kohal olev tekst seadistatakse admin-liideses: 
 
 Minge Kursused > Seaded > Iframe pealkiri . 
 Sisestage tekst (toetatakse HTML-vormindust). 
 Vajutage Salvesta . 
 
 Väljade nähtavus 
 Millised väljad kuvatakse õpilasele/maksjale: 
 
 Kursused > Seaded > Registreerimise seaded . 
 Valige, millised väljad kuvada: aadress, telefon, e-post. 
 Seadistage nime jagamine eesnimeks/perekonnanimeks. 
 
 
 Näited populaarsete CMS-ide jaoks 
 WordPress 
 
 Avage leht redigeerimiseks. 
 Lisage plokk Custom HTML . 
 Sisestage kood viisist 2 (või 3). 
 Vajutage Avalda . 
 
 Wix 
 
 Avage lehe redaktor. 
 Vajutage Lisa > Manusta > HTML iframe . 
 Elemendi seadetes valige Kood ja sisestage HTML viisist 1. 
 Määrake elemendi kõrguseks ~800px. 
 
 Squarespace 
 
 Avage leht redigeerimiseks. 
 Lisage plokk Code . 
 Sisestage kood viisist 2. 
 Vajutage Salvesta . 
 
 Tilda 
 
 Lisage plokk T123 (HTML-kood). 
 Sisestage kood viisist 2. 
 Vajutage Salvesta ja sulge . 
 
 
 Tunniplaani lisamine 
 Tunniplaan lisatakse analoogselt registreerimisvormiga. Kõik kolm viisi töötavad ühtemoodi. 
 Viis 1 (üks rida) 
 <iframe src="https://teie-domeen.ee/iframe/courses/timetable/TOKEN"
 style="width:100%;min-height:600px;border:none" scrolling="no"></iframe>
 
 Viis 2 (automaatse suuruse muutmisega) 
 <iframe src="https://teie-domeen.ee/iframe/courses/timetable/TOKEN"
 style="width:100%;min-height:400px;border:none" scrolling="no"></iframe>
<script>
window.addEventListener('message', function(e) {
 if (e.data && e.data.type === 'huvis-resize') {
 document.querySelectorAll('iframe').forEach(function(f) {
 try { if (new URL(f.src).origin === e.origin) f.style.height = e.data.height + 'px'; } catch(x) {}
 });
 }
});
</script>
 
 Viis 3 (embed.js) 
 <div id="huvis-timetable"></div>
<script src="https://teie-domeen.ee/embed.js"
 data-url="https://teie-domeen.ee/iframe/courses/timetable/TOKEN"
 data-container="huvis-timetable"></script>
 
 Tunniplaan ja registreerimine ühel lehel 
 Mõlemad vidinad saab paigutada. Automaatse suuruse muutmise skripti piisab ühendada üks kord: 
 <!-- Tunniplaan -->
<div id="huvis-timetable"></div>

<!-- Registreerimine -->
<div id="huvis-registration"></div>

<!-- Üks skript mõlemale -->
<script src="https://teie-domeen.ee/embed.js"
 data-url="https://teie-domeen.ee/iframe/et/courses/registration/REGISTREERIMISE_TOKEN"
 data-container="huvis-registration"></script>
<script>
 HuvisEmbed.init({
 url: 'https://teie-domeen.ee/iframe/courses/timetable/TUNNIPLAANI_TOKEN',
 container: 'huvis-timetable'
 });
</script>
 
 Tunniplaani eripärad 
 
 Sisaldab kursuse/grupi filtrit (rippmenüü). 
 Tabel sticky-päistega — horisontaalne kerimine mobiiliseadmetes. 
 Kitsastel ekraanidel keritakse tabel horisontaalselt, aja päis on fikseeritud vasakul. 
 
 
 Tõrkeotsing 
 
 
 
 Probleem 
 Põhjus 
 Lahendus 
 
 
 
 
 Vorm ei laadi 
 Avalik link on aegunud või tühistatud 
 Looge uus link: Seaded > Avalikud lingid 
 
 
 Kõrgus ei muutu 
 Kasutatakse viisi 1 ilma skriptita 
 Minge üle viisile 2 või 3 
 
 
 Valge riba all 
 Fikseeritud kõrgus on suurem kui sisu 
 Vähendage min-height või kasutage automaatset suuruse muutmist 
 
 
 Vorm lõigatakse ära 
 Fikseeritud kõrgus on väiksem kui sisu 
 Suurendage min-height või kasutage automaatset suuruse muutmist 
 
 
 Viga 410 (Gone) 
 Link on tühistatud 
 Kontrollige lingi staatust admin-liideses 
 
 
 Vorm ei saada 
 Küpsiste/CSRF blokeerimine 
 Iframe on juba CSRF-kontrollist välja jäetud, probleem pole Huvise poolel 
 
 
 Kerimisriba iframe'i sees 
 Sisu on iframe'ist suurem 
 Kasutage automaatset suuruse muutmist (viis 2 või 3) 
 
 
 
 
 Turvalisus 
 
 Avalik link sisaldab 64-tähemärgilise tokeni — seda ei saa ära arvata. 
 Lingi saab igal ajal admin-liideses tühistada. 
 CSRF-kaitse on iframe-marsruutide jaoks välja lülitatud (vorm on kättesaadav välistest domeenidest). 
 Andmed edastatakse HTTPS-i kaudu. 
 Organisatsioon tuvastatakse automaatselt lingi tokeni järgi.