--- title: "Inserta MolDraw en tu sitio | Editor de moléculas gratuito en iframe" url: https://www.moldraw.com/es/blog/embed-moldraw.html description: "Inserta el editor de MolDraw en tu sitio. Copia un iframe, pégalo en un blog, curso, página de documentación o app y ajusta la altura del marco. Incluye vista previa en vivo." lang: es publisher: Scidart Academy generated: 2026-10-26 --- ## En esta página Para quién es Copiar y pegar Vista previa Tamaño del marco Abrir en MolDraw Preguntas frecuentes # Inserta el editor de MolDraw en tu sitio Publicado: 18 sep 2026 · Autor: Scidart Academy Añade un editor de moléculas en vivo a un blog de química, una lección, una página de prácticas, un artículo de documentación o una app. Copia un iframe, pégalo donde deba aparecer el dibujo y ajusta la altura para que el lienzo encaje en tu diseño. ![Ilustración de una página web con el editor de MolDraw insertado en un iframe, que muestra la estructura de la cafeína](https://www.moldraw.com/blog/thumbs/embed-moldraw-editor.webp) Un solo iframe coloca el editor de MolDraw dentro de cualquier entrada de blog, lección o página de documentación. **Versión corta:** haz clic en Copiar código de inserción, pega el fragmento en tu HTML y empieza con una altura de 640 píxeles. Los lectores dibujan ahí mismo. Open in MolDraw abre el editor completo en una pestaña nueva. ## Para quién es Usa la inserción cuando el lector deba probar una estructura junto a tu explicación, no solo mirar una imagen. - **Blogueros de química**: un lienzo funcional debajo de una entrada sobre una reacción o una estructura. - **Docentes y autores de LMS**: un cuadro de dibujo en una lección, un manual de laboratorio o una hoja de problemas. - **Autores de documentación**: un editor junto a una nota sobre un formato, SMILES o un flujo de trabajo. - **Desarrolladores de apps**: un marco de editor listo dentro de una página que ya tiene su propia interfaz. No tienes que alojar el editor. El marco lo carga desde [https://www.moldraw.com/embed](https://www.moldraw.com/embed). Tu página sigue siendo tuya. ## Copiar y pegar Copiar código de inserción copia este fragmento en tu portapapeles. Pégalo en el HTML de tu página, en un bloque HTML de un LMS o en el marcado de tu app. ``` ``` Si el marco aparece en blanco, puede que tu sitio o tu plataforma de cursos bloquee las inserciones. Usa un bloque HTML o de inserción que permita iframes. Si la plataforma sigue eliminando el marco, enlaza a [www.moldraw.com](https://www.moldraw.com/es/) en su lugar. ## Vista previa Es el mismo reproductor que carga el fragmento. Dibuja un enlace o elige una plantilla. La barra superior forma parte de la inserción. ## Tamaño del marco El ancho es del 100 % para que el editor ocupe la columna donde lo coloques. La altura es de 640 píxeles, suficiente para la barra de herramientas y una estructura pequeña. Aumenta el número de `height` para un lienzo más grande. Bájalo hacia 480 en una página corta o usa unos 800 cuando los lectores necesiten más espacio. En un móvil, un marco alto implica más desplazamiento. Ajusta la altura a la tarea: un boceto rápido puede ser más bajo; un [esquema de reacción](https://www.moldraw.com/es/tools/free-chem-tools/chemical-reaction-drawer.html) necesita más espacio. ## Abrir en MolDraw Dentro del reproductor, **Open in MolDraw** abre el editor completo en [www.moldraw.com](https://www.moldraw.com/es/) en una pestaña nueva. Tu página sigue abierta. Díselo a los lectores una vez: que dibujen aquí y usen Open in MolDraw si quieren la pantalla completa. ## Preguntas frecuentes ### ¿Para quién es? Para blogueros de química, docentes, autores de LMS, redactores de documentación y desarrolladores de apps que quieren un editor de moléculas junto a su propio texto. No es lo adecuado si solo necesitas un logotipo o una captura de pantalla; en ese caso, enlaza a MolDraw o usa una imagen. ### ¿Los lectores necesitan una cuenta? No. Pueden dibujar en el marco sin registrarse en tu sitio. Open in MolDraw está ahí cuando quieran el editor completo. ### ¿Puedo cambiar el tamaño después de pegarlo? Sí. Edita `height` en el fragmento. Deja `width="100%"` salvo que tu diseño necesite un ancho fijo. La vista previa de esta página mide 640 píxeles de alto en una pantalla ancha y menos en un móvil. ### El marco aparece en blanco. ¿Qué hago? Un marco en blanco suele significar que la plataforma bloquea los iframes. Cambia al bloque HTML o de inserción de la plataforma. Si sigue sin funcionar, envía a los lectores a [www.moldraw.com](https://www.moldraw.com/es/) con un enlace normal. Última actualización: 14 de octubre de 2026 ## Herramientas y guías relacionadas Sigue con el [visor de espectros de RMN](https://www.moldraw.com/es/tools/nmr-viewer/), el [visor de espectros IR](https://www.moldraw.com/es/tools/ir-viewer/) y el [visor de espectros de masas](https://www.moldraw.com/es/tools/mass-spec-viewer/). Son gratuitos y funcionan en tu navegador. [**Visor de espectros de RMN**Abre archivos de RMN de 1H y 13C](https://www.moldraw.com/es/tools/nmr-viewer/)[**Visor de espectros IR**Encuentra picos y grupos funcionales](https://www.moldraw.com/es/tools/ir-viewer/)[**Visor de espectros de masas**Isótopos, aductos y pérdidas](https://www.moldraw.com/es/tools/mass-spec-viewer/)[**Visor de espectros UV-Vis**Lambda máxima, Beer-Lambert, band gap](https://www.moldraw.com/es/tools/uv-vis-viewer/)[**Guías de espectroscopia**Todas las guías de interpretación](https://www.moldraw.com/guides/)[**Todas las herramientas de química**Convertidores, calculadoras, visores](https://www.moldraw.com/es/tools/)[**Editor MolDraw**Dibuja estructuras en tu navegador](https://www.moldraw.com/es/)[**Aprende MolDraw**Lecciones prácticas breves](https://www.moldraw.com/learn/)