--- title: "MolDraw in deine Website einbetten | Kostenloser Moleküleditor als Iframe" url: https://www.moldraw.com/de/blog/embed-moldraw.html description: "Bette den MolDraw-Editor auf deiner Website ein: Ein iframe kopieren, in Blog, Kurs, Doku-Seite oder App einfügen und die Rahmenhöhe festlegen. Mit Live-Vorschau." lang: de publisher: Scidart Academy generated: 2026-10-26 --- ## Auf dieser Seite Für wen es gedacht ist Kopieren und einfügen Vorschau Rahmengröße anpassen In MolDraw öffnen FAQ # Den MolDraw-Editor in deine Website einbetten Veröffentlicht: 18. Sep. 2026 · Autor: Scidart Academy Füge einen interaktiven Moleküleditor in einen Chemie-Blog, eine Lektion, eine Laborseite, einen Doku-Artikel oder eine App ein. Kopiere ein iframe, füge es dort ein, wo die Zeichnung erscheinen soll, und lege die Höhe so fest, dass die Zeichenfläche in dein Layout passt. ![Illustration einer Webseite mit dem in einem iframe eingebetteten MolDraw-Editor, der die Struktur von Koffein zeigt](https://www.moldraw.com/blog/thumbs/embed-moldraw-editor.webp) Ein einziges iframe bringt den MolDraw-Editor in jeden Blogbeitrag, jede Lektion und jede Doku-Seite. **Kurzfassung:** Klicke auf Einbettungscode kopieren, füge das Snippet in dein HTML ein und beginne mit einer Höhe von 640 Pixeln. Leser zeichnen direkt auf der Seite. Open in MolDraw öffnet den vollständigen Editor in einem neuen Tab. ## Für wen es gedacht ist Nutze die Einbettung, wenn Leser eine Struktur direkt neben deiner Erklärung ausprobieren sollen, statt nur ein Bild anzusehen. - **Chemie-Blogger** – eine funktionierende Zeichenfläche unter einem Beitrag zu einer Reaktion oder Struktur. - **Lehrkräfte und LMS-Autoren** – ein Zeichenfeld in einer Lektion, einem Praktikumsskript oder Übungsblatt. - **Doku-Autoren** – ein Editor neben einem Hinweis zu Formaten, SMILES oder Arbeitsabläufen. - **App-Entwickler** – ein fertiger Editor-Rahmen in einer Seite, die bereits eine eigene Oberfläche hat. Du hostest den Editor nicht selbst. Der Rahmen lädt ihn von [https://www.moldraw.com/embed](https://www.moldraw.com/embed). Deine Seite bleibt deine. ## Kopieren und einfügen Einbettungscode kopieren legt dieses Snippet in deine Zwischenablage. Füge es in das HTML deiner Seite, einen HTML-Block im LMS oder das Markup deiner App ein. ``` ``` Ist der Rahmen leer, blockiert deine Website oder dein Kurs-Tool möglicherweise Einbettungen. Nutze einen HTML- oder Einbettungsblock, der iframes erlaubt. Entfernt die Plattform den Rahmen trotzdem, verlinke stattdessen auf [www.moldraw.com](https://www.moldraw.com/de/). ## Vorschau Das ist derselbe Player, den das Snippet lädt. Zeichne eine Bindung oder wähle eine Vorlage. Die Leiste oben gehört zur Einbettung. ## Rahmengröße anpassen Die Breite beträgt 100 %, damit der Editor die Spalte ausfüllt, in die du ihn setzt. Die Höhe beträgt 640 Pixel, genug für die Werkzeugleiste und eine kleine Struktur. Erhöhe den Wert von `height` für eine größere Zeichenfläche. Geh auf einer kurzen Seite Richtung 480 oder nimm etwa 800, wenn Leser mehr Platz brauchen. Auf dem Smartphone bedeutet ein hoher Rahmen mehr Scrollen. Passe die Höhe an die Aufgabe an: Für eine schnelle Skizze reicht weniger, ein [Reaktionsschema](https://www.moldraw.com/de/tools/free-chem-tools/chemical-reaction-drawer.html) braucht mehr Platz. ## In MolDraw öffnen Im Player öffnet **Open in MolDraw** den vollständigen Editor unter [www.moldraw.com](https://www.moldraw.com/de/) in einem neuen Tab. Deine Seite bleibt geöffnet. Sag es deinen Lesern einmal: Hier skizzieren und Open in MolDraw nutzen, wenn ihr den ganzen Bildschirm wollt. ## FAQ ### Für wen ist das gedacht? Für Chemie-Blogger, Lehrkräfte, LMS-Autoren, Doku-Autoren und App-Entwickler, die einen Moleküleditor neben ihrem eigenen Text möchten. Wenig geeignet ist es, wenn du nur ein Logo oder einen Screenshot brauchst. Dann verlinke auf MolDraw oder nutze ein Bild. ### Brauchen Leser ein Konto? Nein. Sie können im Rahmen zeichnen, ohne sich auf deiner Website zu registrieren. Open in MolDraw steht bereit, wenn sie den vollständigen Editor möchten. ### Kann ich die Größe nach dem Einfügen ändern? Ja. Ändere `height` im Snippet. Lass `width="100%"` stehen, sofern dein Layout keine feste Breite braucht. Die Vorschau auf dieser Seite ist auf breiten Bildschirmen 640 Pixel hoch und auf dem Smartphone niedriger. ### Der Rahmen ist leer. Was nun? Ein leerer Rahmen bedeutet meist, dass die Plattform iframes blockiert. Wechsle zum HTML- oder Einbettungsblock der Plattform. Klappt es dann immer noch nicht, schicke Leser mit einem normalen Link zu [www.moldraw.com](https://www.moldraw.com/de/). Zuletzt aktualisiert: 14. Oktober 2026 ## Verwandte Tools & Leitfäden Weiter geht es mit dem [NMR-Spektrum-Viewer](https://www.moldraw.com/de/tools/nmr-viewer/), dem [IR-Spektrum-Viewer](https://www.moldraw.com/de/tools/ir-viewer/) und dem [Massenspektrum-Viewer](https://www.moldraw.com/de/tools/mass-spec-viewer/). Sie sind kostenlos und laufen im Browser. [**NMR-Spektrum-Viewer**1H- und 13C-NMR-Dateien öffnen](https://www.moldraw.com/de/tools/nmr-viewer/)[**IR-Spektrum-Viewer**Peaks und funktionelle Gruppen finden](https://www.moldraw.com/de/tools/ir-viewer/)[**Massenspektrum-Viewer**Isotope, Addukte und Fragmentverluste](https://www.moldraw.com/de/tools/mass-spec-viewer/)[**UV-Vis-Spektrum-Viewer**Lambda max, Lambert-Beer, Bandlücke](https://www.moldraw.com/de/tools/uv-vis-viewer/)[**Leitfäden zur Spektroskopie**Alle Leitfäden zum Auswerten](https://www.moldraw.com/guides/)[**Alle Chemie-Tools**Konverter, Rechner, Viewer](https://www.moldraw.com/de/tools/)[**MolDraw-Editor**Strukturen im Browser zeichnen](https://www.moldraw.com/de/)[**MolDraw lernen**Kurze praktische Lektionen](https://www.moldraw.com/learn/)