Incorpora l'editor MolDraw nel tuo sito

Pubblicato: 18 set 2026 · Autore: Scidart Academy

Aggiungi un editor di molecole dal vivo a un blog di chimica, una lezione, una pagina di laboratorio, un articolo di documentazione o un'app. Copia un iframe, incollalo dove deve comparire il disegno e imposta l'altezza perché l'area di disegno si adatti al layout.

Illustrazione di una pagina web con l'editor MolDraw incorporato in un iframe che mostra la struttura della caffeina
Un solo iframe porta l'editor MolDraw in qualsiasi articolo di blog, lezione o pagina di documentazione.
In breve: fai clic su Copia il codice di incorporamento, incolla lo snippet nel tuo HTML e parti da un'altezza di 640 pixel. I lettori disegnano direttamente nella pagina. Open in MolDraw apre l'editor completo in una nuova scheda.

A chi è rivolto

Usa l'incorporamento quando un lettore deve provare una struttura accanto alla tua spiegazione, non solo guardare un'immagine.

  • Blogger di chimica: un'area di disegno funzionante sotto un articolo su una reazione o una struttura.
  • Docenti e autori LMS: un riquadro di disegno in una lezione, un manuale di laboratorio o una serie di esercizi.
  • Autori di documentazione: un editor accanto a una nota su un formato, su SMILES o su un flusso di lavoro.
  • Sviluppatori di app: un riquadro editor pronto dentro una pagina che ha già la sua interfaccia.

Non devi ospitare l'editor. Il riquadro lo carica da https://www.moldraw.com/embed. La tua pagina resta tua.

Copia e incolla

Copia il codice di incorporamento mette questo snippet negli appunti. Incollalo nell'HTML della tua pagina, in un blocco HTML di una piattaforma LMS o nel markup della tua app.

<iframe src="https://www.moldraw.com/embed" title="MolDraw editor" width="100%" height="640" style="border:0;border-radius:12px" loading="lazy" referrerpolicy="strict-origin-when-cross-origin"></iframe>

Se il riquadro è vuoto, il tuo sito o la piattaforma del corso potrebbe bloccare gli elementi incorporati. Usa un blocco HTML o di incorporamento che consenta gli iframe. Se la piattaforma rimuove comunque il riquadro, metti invece un link a www.moldraw.com.

Anteprima

È lo stesso player che carica lo snippet. Disegna un legame o scegli un modello. La barra in alto fa parte dell'incorporamento.

Dimensionare il riquadro

La larghezza è al 100%, così l'editor occupa la colonna in cui lo inserisci. L'altezza è di 640 pixel, sufficienti per la barra degli strumenti e una piccola struttura. Aumenta il valore di height per un'area di disegno più grande. Scendi verso 480 in una pagina corta, oppure usa circa 800 quando i lettori hanno bisogno di più spazio.

Su un telefono, un riquadro alto significa più scorrimento. Adatta l'altezza al compito: per uno schizzo veloce basta meno spazio; uno schema di reazione ne richiede di più.

Apri in MolDraw

Nel player, Open in MolDraw apre l'editor completo su www.moldraw.com in una nuova scheda. La tua pagina resta aperta. Dillo una volta ai lettori: disegnate qui e usate Open in MolDraw se volete lo schermo intero.

FAQ

A chi è rivolto?

A blogger di chimica, docenti, autori di contenuti LMS, redattori di documentazione e sviluppatori di app che vogliono un editor di molecole accanto ai propri testi. Non è adatto se ti serve solo un logo o uno screenshot: in quel caso, metti un link a MolDraw o usa un'immagine.

I lettori hanno bisogno di un account?

No. Possono disegnare nel riquadro senza registrarsi sul tuo sito. Open in MolDraw è lì quando vogliono l'editor completo.

Posso cambiare le dimensioni dopo averlo incollato?

Sì. Modifica height nello snippet. Lascia width="100%", a meno che il layout non richieda una larghezza fissa. L'anteprima in questa pagina è alta 640 pixel su uno schermo largo e meno su un telefono.

Il riquadro è vuoto. Cosa faccio?

Un riquadro vuoto di solito significa che l'host blocca gli iframe. Passa al blocco HTML o di incorporamento della piattaforma. Se non funziona ancora, manda i lettori su www.moldraw.com con un normale link.

Ultimo aggiornamento: