Einbetten

Drei Bausteine, ein Prinzip.

Alles bei heyprof lässt sich per iframe in deine Umgebung einbetten — in Moodle, Ilias, TYPO3, WordPress oder eine eigene Seite. Der Unterschied zwischen den Bausteinen liegt in einer einzigen Frage: Wie viel KI braucht der Baustein, um zu laufen?

Zum Code Alle VisuApps ansehen

Dampfmaschine

Eine eingebettete VisuApp verhält sich überall so wie hier: Sie rechnet im Browser, folgt dem Theme der Seite und braucht keinen Zugang.

Drei Bausteine

Wie viel KI braucht der Baustein? Daran hängt alles Weitere.

Von der stillen Visualisierung bis zum Lernmodul, dessen Betrieb KI ist.

Free · Kein KI-Bedarf

VisuApp

Interaktive Visualisierung — ohne KI

Self-contained HTML: Regler, 3D, Animation — alles läuft im Browser.
Responsiv, hell und dunkel, ohne Anmeldung, ohne Server.
Eine iframe-Zeile genügt — überall einbettbar.

Erklärt sich nicht selbst — den Kontext liefert dein Material oder du als Lehrkraft.

Pro · KI nur für die Vorführung

VisuApp + VisuAppShow

Dieselbe App — der Erklärmodus führt sie vor

Alles aus der Free-VisuApp — plus VisuAppShow.
Der KI-Tutor steuert die App: Sprechblasen, Pointer, Kamera, stellt die Regler selbst.
Die App erklärt sich selbst — auch ohne Lehrkraft.

Die KI führt vor und kommentiert; die Interaktion selbst bleibt im Browser.

Pro · neu · KI ist der Kern

CogniApp

Ein Lernmodul, dessen Betrieb KI ist

Ein eigenständiges Modul — wie ein Kursmodul, aber einzeln einbettbar.
KI bewertet, adaptiert, dialogisiert, gibt Rückmeldung — durchgehend im Betrieb.
Ohne KI funktioniert es nicht: Sie ist nicht Beiwerk, sondern Motor.

Erste CogniApp live: das Pop-Piano-Studio. Weitere entstehen aus den Kursmodulen.

keine KI
KI führt vor (VisuAppShow)
KI ist der Betrieb

Dieselbe App, zwei Stufen

Sieh den Unterschied. Beide laufen hier live.

Links eine VisuApp als Free-Embed — voll interaktiv, aber still. Rechts eine App, die den Erklärmodus beherrscht: In der Bezahlversion übernimmt der Tutor die Szene und erklärt sie.

Reaktionsprofil

Free-Embed: Du bewegst die Regler selbst und erkundest eigenständig. Kein Konto, kein KI-Aufruf.

Reaktionsprofil

Translation am Ribosom

Pro-Embed: Dieselbe App, dazu der Erklärmodus — der KI-Tutor fährt die Szene an, zeigt aufs Detail und spricht dazu.

Translation am Ribosom

Direktvergleich

Was kann welcher Baustein? Eine Zeile pro Merkmal.

Merkmal	VisuApp	VisuApp + VisuAppShow	CogniApp
Interaktiv und self-contained	ja	ja	teilweise
Läuft ohne KI	ja	nein	nein
KI erklärt und führt die App vor (VisuAppShow)	nein	ja	ja
KI ist der laufende Betrieb (bewertet, adaptiert, dialogisiert)	nein	nein	ja
Kostenlos einbettbar	ja	nein	nein
In der Bezahlversion einbettbar	ja	ja	ja
Verbraucht KI-Kontingent pro Nutzung	nein	teilweise	ja

Teilweise heißt: VisuAppShow ruft KI nur auf, solange die Vorführung läuft; die App selbst rechnet im Browser weiter.

Beispielseiten

Sechs ganze Websites. Von uns gebaut.

Wie wirkt eine eingebettete App auf einer ganz normalen Fachseite? Um das zu zeigen, haben wir sechs vollständige Websites gebaut — sechs Branchen, je vier Fachgrafiken, und keine davon ist ein Bild: Es sind laufende VisuApps, eingebettet per iframe und durchgefärbt in die Farbwelt der jeweiligen Seite.

Alle sechs Seiten sind Beispielseiten, die heyprof selbst gebaut hat, um das Einbetten zu zeigen. Firmen, Marken, Personen, Zahlen und Referenzen darauf sind frei erfunden; keine dieser Seiten gehört zu einem Kunden von heyprof. Echte Praxisberichte stehen unter Referenzen.

Live-Vorschau · erfundene Beispielseitequantara advisoryIn neuem Tab öffnen

Auf dieser erfundenen Beratungsseite sind Trennschärfe, PD-Kalibrierung, Asset-Korrelation in 3D und Verlustverteilung keine Schaubilder, sondern laufende VisuApps — eingebettet per iframe und durchgefärbt in die Petrol-Gold-Welt der Seite. Die Vorschau folgt deinem Hell-Dunkel-Schalter.

Alle sechs Beispielseiten

Beispielseite · erfundene Firma

quantara advisory

Quantitative Beratung und Risikomodelle

Trennschärfe, PD-Kalibrierung, Asset-Korrelation in 3D, Verlustverteilung

Beispielseite öffnen Beispielseite · erfundene Firma

cortexa analytics

Machine-Learning-Beratung

Attention, Faltung, Entscheidungsbaum, Bias und Varianz

Beispielseite öffnen Beispielseite · erfundene Firma

pulswerk lab

Sportdiagnostik und Training

Superkompensation, Trainingszonen, Kreislauf, Anatomie

Beispielseite öffnen Beispielseite · erfundene Firma

blendwerk studio

Fotografie-Masterclass

Belichtungsdreieck, Schärfentiefe, Sammellinse, Farbmischung

Beispielseite öffnen Beispielseite · erfundene Firma

tonschmiede

Musikproduktion

Quintenzirkel in 3D, Akkord-Bauer, ADSR-Hüllkurve, Rhythmus-Sequencer

Beispielseite öffnen Beispielseite · erfundene Firma

helixon biosciences

Molekulare Biowissenschaften

DNA-Helix in 3D, Replikation, Enzym und Substrat, Citratzyklus

Beispielseite öffnen

So bettest du ein

Immer eine Zeile. Der Rest ist der Token.

Die Free-VisuApp braucht nichts weiter. VisuAppShow und CogniApp laufen über einen signierten Embed-Token — nicht fälschbar, an deine Domains gebunden, mit Kontingent pro Konto.

iframe-Einbettung

<!-- 1) VisuApp (Free) -->
<iframe src="https://heyprof.app/visuapps/reaktionsprofil/index.html?theme=light"
  width="100%" height="520" style="border:0;border-radius:16px"></iframe>

<!-- 2) VisuApp + VisuAppShow (Pro) -->
<iframe src="https://heyprof.app/visuapps/reaktionsprofil/index.html?tutor=1&token=eyJ…"
  width="100%" height="520" style="border:0;border-radius:16px"></iframe>

<!-- 3) CogniApp (Pro) — z. B. das Pop-Piano-Studio -->
<iframe src="https://heyprof.app/visuapps/pop-piano-studio/index.html?token=eyJ…"
  width="100%" height="620" style="border:0;border-radius:16px"
  allow="microphone; midi"></iframe>

Der bequeme Weg: die Embed-Route

Unter /embed/<slug> liegt eine Hülle ohne Navigation, Theme-Schalter und Anmeldung. Das Aussehen steuerst du über die Adresse, nicht über Einstellungen im Browser der Lesenden. Freigeschaltet wird pro App im heyprof-Admin.

Embed-Route mit Parametern

<!-- dunkel, englisch -->
<iframe src="https://heyprof.app/embed/reaktionsprofil?theme=dark&lang=en"
  width="100%" height="520" style="border:0;border-radius:16px"
  allow="microphone; fullscreen"></iframe>

<!-- freie Akzentfarbe statt Kursfarbe -->
<iframe src="https://heyprof.app/embed/reaktionsprofil?accent=4380b9&alt=e8c986"
  width="100%" height="520" style="border:0;border-radius:16px"
  allow="microphone; fullscreen"></iframe>

In Moodle, Ilias und anderen Systemen

In Moodle fügst du die Zeile im Texteditor über die HTML-Ansicht ein — in einer Textseite, einem Buch, einer Beschreibung oder einer Aufgabenstellung.
In Ilias legst du im Seiteneditor ein HTML-Element an und setzt die Zeile hinein.
Verschwindet die Zeile beim Speichern, filtert die Installation iframes heraus. Dann muss die Administration das Einbetten für den Editor freigeben.
Von heyprof aus ist nichts zu tun: /visuapps/… und /embed/… werden mit frame-ancestors * ausgeliefert und lassen sich von beliebigen Domains rahmen. Alle übrigen Seiten, auch der App-Katalog, bleiben bewusst nur auf heyprof.app einbettbar.

Parameter

Theme, Sprache, Farbe. Alles steht in der Adresse.

Nicht die Lesenden stellen das Aussehen ein, sondern du beim Einbetten. Beide Wege verstehen eigene Parameter.

Direkt: /visuapps/<verzeichnis>/index.html

Parameter	Werte	Bedeutung
`theme`	`light · dark`	Helle oder dunkle Darstellung. Ohne Angabe startet die App dunkel.
`accent`	`R,G,B`	Akzentfarbe als drei Zahlen von 0 bis 255, zum Beispiel 99,102,241.
`palette`	`8–10 × RRGGBB`	Vollständige Farbreihe ohne Rautezeichen, kommagetrennt. Fehlt sie, nimmt die App ihre eigene Reihe.
`lang`	`de · en`	Sprache der Beschriftungen, soweit die App übersetzt ist.
`v`	`<Build>`	Cache-Buster. Ohne ihn liefert der Browser nach einem Update unter Umständen die alte Datei aus.
`compose`	`locked`	Nur im Pop-Piano-Studio: sperrt das Komponieren, die Beispielstücke bleiben spielbar.

Über die Hülle: /embed/<slug>

Parameter	Werte	Bedeutung
`theme`	`dark`	Dunkle Darstellung. Jeder andere Wert bedeutet hell — die Embed-Route startet hell.
`lang`	`en`	Englische Beschriftungen. Jeder andere Wert bedeutet deutsch.
`color`	`<Kursfarbe>`	Schlüssel einer heyprof-Kursfarbe, voreingestellt indigo. Die zehn Palettenfarben werden daraus abgeleitet.
`accent`	`RRGGBB`	Freie Akzentfarbe, in der Adresse ohne Rautezeichen. Sie schlägt color und leitet die Palette passend zum Theme ab.
`alt`	`RRGGBB,…`	Bis zu sechs Kontrastfarben, kommagetrennt. Sie ersetzen die abgeleiteten Kontraste der Reihe nach.

Token & Grenzen

Signiert, gebunden, jederzeit widerrufbar.

Was KI verbraucht, läuft über einen Schlüssel, der dir gehört.

Signierter Token (HMAC)

Nicht fälschbar — nur wer den Schlüssel hat, erzeugt gültige Token.

Domain-Allowlist

Läuft ausschließlich auf den Seiten, die du freigegeben hast.

Konto-Kontingent und Widerruf

KI-Kontingent pro Konto, jeder Schlüssel einzeln widerrufbar.

Hell und dunkel, live

Das Embed übernimmt das Theme der einbettenden Seite.

CogniApps

Was ist eine CogniApp? Ein Modul, dessen Betrieb KI ist.

Eine CogniApp ist ein eigenständiges Lernmodul — im Grunde eines unserer Kursmodule, aus dem Kurs herausgelöst und einzeln einbettbar. Der Unterschied zur VisuApp: Hier ist KI nicht Vorführung, sondern Motor. Sie bewertet, passt sich an, führt einen Dialog, gibt Rückmeldung — ohne KI läuft nichts.

In einer Zeile

VisuApp

KI: keine. Zeigt und lässt erkunden.

VisuApp + VisuAppShow

KI: erklärt die App, solange die Vorführung läuft.

CogniApp

KI: ist der Betrieb — bei jeder Nutzung.

Pop-Piano-Studio

Live-Beispiel: das Pop-Piano-Studio

Die erste CogniApp ist live: Die KI komponiert Klavierstücke in fünf Niveaustufen, setzt sie in druckreife Noten und hört beim Spielen über MIDI oder Mikrofon zu. Im öffentlichen Beispiel spielst du das Beispielstück, blätterst in den Piano-Roll-Modus und lädst die Noten als PDF — das Komponieren neuer Stücke ist der Bezahlversion vorbehalten.

Weitere Beispiele — abgeleitet aus bestehenden Kursmodulen

Mikrolektion

Adaptiver Häppchen-Dialog: Die KI stellt Zwischenfragen, bewertet Freitext und hilft bei Fehlern gezielt.

KI-Tutor-Chat

Materialgestützte Fragen zum Thema — der Tutor kennt die Foliensätze und antwortet mit Bezug darauf.

Deutungs- und Aufgaben-Rückmeldung

Offene Antworten, Versuchsdeutungen oder beschriftete Skizzen werden bewertet und kommentiert.

Datenlabor mit Fehleranalyse

Node-Editor, den die KI live begleitet — sie erklärt Ergebnisse und findet Denkfehler.

Technisches Zeichnen

Foto der Handzeichnung, dann Rückmeldung mit Fehler-Markern und Verbesserungshinweisen.

Lernstand und gezielte Quizze

Die KI erkennt Lücken und stellt genau die nächsten passenden Aufgaben.

Stand: Die erste CogniApp ist live — das Pop-Piano-Studio, im öffentlichen Beispiel mit gesperrter Komposition. Die weiteren Bausteine leben heute als Kursmodule innerhalb eines heyprof-Kurses; ihr einzeln einbettbares Format entsteht gerade. Da jede Nutzung KI im Hintergrund aufruft, ist die Vollversion Teil der Bezahlversion — mit Kontingent, Token und Domain-Allowlist wie bei VisuAppShow.

Vom stillen Bild bis zum denkenden Modul.

VisuApps siehst du sofort live. VisuAppShow und CogniApps sind Teil der Bezahlversion — wir richten Token, Domains und Kontingent für dich ein.

Zugang anfragen