Skip to main content

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. Minge Seaded > Avalikud lingid.
  2. Vajutage Loo link.
  3. Tüüp: Registreerimine kursustele või Tunniplaan.
  4. Märkige silt (näiteks „Stuudio koduleht — registreerimine").
  5. 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:

  1. Minge Kursused > Seaded > Iframe pealkiri.
  2. Sisestage tekst (toetatakse HTML-vormindust).
  3. Vajutage Salvesta.

Väljade nähtavus

Millised väljad kuvatakse õpilasele/maksjale:

  1. Kursused > Seaded > Registreerimise seaded.
  2. Valige, millised väljad kuvada: aadress, telefon, e-post.
  3. Seadistage nime jagamine eesnimeks/perekonnanimeks.

Näited populaarsete CMS-ide jaoks

WordPress

  1. Avage leht redigeerimiseks.
  2. Lisage plokk Custom HTML.
  3. Sisestage kood viisist 2 (või 3).
  4. Vajutage Avalda.

Wix

  1. Avage lehe redaktor.
  2. Vajutage Lisa > Manusta > HTML iframe.
  3. Elemendi seadetes valige Kood ja sisestage HTML viisist 1.
  4. Määrake elemendi kõrguseks ~800px.

Squarespace

  1. Avage leht redigeerimiseks.
  2. Lisage plokk Code.
  3. Sisestage kood viisist 2.
  4. Vajutage Salvesta.

Tilda

  1. Lisage plokk T123 (HTML-kood).
  2. Sisestage kood viisist 2.
  3. 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

No comments to display

Back to top