Was ist eine iFrame-Lektion?
Mit einer iFrame-Lektion kannst du externe Inhalte wie Webseiten, Formulare, Kalender oder Präsentationen direkt in deinem Mitgliederbereich anzeigen.
Dabei fügst du einen sogenannten Einbettungscode (HTML) ein – das ist ein kleiner Code-Schnipsel, den du z. B. von Google, Calendly oder anderen Tools bekommst.
Der eingebettete Inhalt erscheint dann direkt innerhalb der Lektion, ohne dass deine Mitglieder die Plattform verlassen müssen.
Typische Anwendungsbeispiele:
Google Formulare z.B. für Feedback
Kalenderbuchung via Calendly
Interaktive Präsentationen
Lerninhalte von externen Plattformen
So erweiterst du deinen Kursbereich um viele zusätzliche Funktionen.
iFrame als Lektion einbinden
Wenn du als Lektionstyp iFrame auswählst, kannst du in der Lektion deinen iFrame Code hinterlegen. Klicke anschließend auf Speichern, damit der Code in der Lektion angezeigt wird.
iFrame in Beschreibungen oder Seiten
In allen Editorfeldern, in denen du oben vom visuellen Editor auf den </> Code-Modus wechseln kannst, lässt sich Einbettungscode einfügen.
Bitte beachte, dass der Einbettungscode gelöscht wird, wenn du im visuellen Editor eine Änderung vornimmst und diese dort speicherst.
iFrame als Widget im Portal
In Portalen kannst du das Widget Custom Code hinzufügen. Mit einem Klick auf den Stift kannst du das Codefeld öffnen und deinen Einbettungscode hinterlegen.
Mögliche einbettbare Inhalte
Hier zeigen wir dir Beispiele, die du als iFrame einbinden kannst.
Google Docs, -Tabellen, -Präsentationen und Formulare einbinden
Um eine Google Datei (wie Google Sheets, Google Forms, Google Docs, etc.) einzubinden, öffnest du diese zuerst und klickst oben rechts du dann auf Senden.
Im Dialogfeld wählst du den Reiter Einbetten (< >).
Kopiere den angezeigten HTML-Code und füge ihn in einem HTML-Code in Memberspot ein.
Calendly Kalender einbinden
Genau wie Google-Dateien kannst du auch Calendly in einer iFrame-Lektion einbetten. Außerdem kannst du das Kalendertool auch in den HTML-Inhalten unter jedes Video anzeigen lassen.
Kopiere dazu einfach den "embeded" Code in deinen Mitgliederbereich. Hier erfährst du, wie du den HTML-Code bei Calendly bekommst: https://help.calendly.com/hc/en-us/articles/223147027-Embed-options-overview
Hier ist ein Beispiel für einen Calendly-Code, den man verwenden kann. Alles, was du tun musst, ist, den Link zu ändern, der in diesem Code eingefügt ist:
<iframe src="https://calendly.com/" width="100%" height="1250" frameborder />
Häufige Fragen
Darstellungsfehler Mobilgerät
Das Formular wird am Smartphone oft nicht vollständig bzw. abgeschnitten angezeigt. Dies liegt daran, dass im Code ein absoluter Pixelwert (z.B. 640 px) hinterlegt wurde.
Wir empfehlen, den Wert width="100%" für die Breite zu verwenden. Dadurch änderst du die Breite iFrames von einem absoluten Pixelwert auf volle Breite, und dein iFrame Element wird auf allen Geräten komplett dargestellt.