--- title: "Incorpore o MolDraw no seu site | Editor de moléculas grátis em iframe" url: https://www.moldraw.com/pt/blog/embed-moldraw.html description: "Incorpore o editor MolDraw no seu site. Copie um iframe, cole-o em um blog, curso, página de documentação ou app e defina a altura do quadro. Inclui prévia ao vivo." lang: pt publisher: Scidart Academy generated: 2026-10-26 --- ## Nesta página Para quem é Copiar e colar Prévia Tamanho do quadro Abrir no MolDraw Perguntas frequentes # Incorpore o editor MolDraw no seu site Publicado: 18 de setembro de 2026 · Autor: Scidart Academy Adicione um editor de moléculas ao vivo a um blog de química, aula, página de laboratório, artigo de documentação ou app. Copie um iframe, cole-o onde o desenho deve aparecer e defina a altura para a tela caber no seu layout. ![Ilustração de uma página web com o editor MolDraw incorporado em um iframe, mostrando a estrutura da cafeína](https://www.moldraw.com/blog/thumbs/embed-moldraw-editor.webp) Um iframe coloca o editor MolDraw dentro de qualquer post de blog, aula ou página de documentação. **Versão curta:** clique em Copiar código de incorporação, cole o trecho no seu HTML e comece com uma altura de 640 pixels. Os leitores desenham ali mesmo. O Open in MolDraw abre o editor completo em uma nova aba. ## Para quem é Use a incorporação quando o leitor deve testar uma estrutura ao lado da sua explicação, e não só olhar uma imagem. - **Blogueiros de química** — uma tela funcional abaixo de um post sobre reação ou estrutura. - **Professores e autores de AVA** — uma área de desenho em uma aula, apostila de laboratório ou lista de exercícios. - **Autores de documentação** — um editor ao lado de uma nota sobre formato, SMILES ou fluxo de trabalho. - **Desenvolvedores de apps** — um quadro de editor pronto dentro de uma página que já tem sua própria interface. Você não hospeda o editor. O quadro o carrega de [https://www.moldraw.com/embed](https://www.moldraw.com/embed). Sua página continua sua. ## Copiar e colar Copiar código de incorporação coloca este trecho na sua área de transferência. Cole-o no HTML da sua página, em um bloco HTML do AVA ou no código da sua aplicação. ``` ``` Se o quadro ficar em branco, seu site ou ferramenta de curso pode estar bloqueando incorporações. Use um bloco de HTML ou de incorporação que permita iframes. Se a plataforma ainda remover o quadro, coloque um link para [www.moldraw.com](https://www.moldraw.com/pt/). ## Prévia Este é o mesmo player que o trecho carrega. Desenhe uma ligação ou escolha um modelo. A barra no topo faz parte da incorporação. ## Tamanho do quadro A largura é 100% para o editor preencher a coluna em que você o coloca. A altura é de 640 pixels, o bastante para a barra de ferramentas e uma estrutura pequena. Aumente o número de `height` para uma tela maior. Baixe para perto de 480 em uma página curta, ou use cerca de 800 quando os leitores precisarem de mais espaço. No celular, um quadro alto significa mais rolagem. Ajuste a altura à tarefa: um esboço rápido pode ficar mais baixo; um [esquema de reação](https://www.moldraw.com/pt/tools/free-chem-tools/chemical-reaction-drawer.html) precisa de mais espaço. ## Abrir no MolDraw Dentro do player, **Open in MolDraw** abre o editor completo em [www.moldraw.com](https://www.moldraw.com/pt/) em uma nova aba. Sua página continua aberta. Diga aos leitores uma vez: esbocem aqui e usem Open in MolDraw se quiserem a tela inteira. ## Perguntas frequentes ### Para quem é? Blogueiros de química, professores, autores de AVA, redatores de documentação e desenvolvedores de apps que querem um editor de moléculas ao lado do próprio texto. Não é uma boa escolha se você só precisa de um logo ou de uma captura de tela. Nesse caso, coloque um link para o MolDraw ou use uma imagem. ### Os leitores precisam de conta? Não. Eles podem desenhar no quadro sem se cadastrar no seu site. O Open in MolDraw está lá quando quiserem o editor completo. ### Posso mudar o tamanho depois de colar? Sim. Edite `height` no trecho. Deixe `width="100%"`, a menos que seu layout precise de uma largura fixa. A prévia nesta página tem 640 pixels de altura em telas largas e menos no celular. ### O quadro está em branco. E agora? Um quadro em branco geralmente significa que o site bloqueia iframes. Use o bloco de HTML ou de incorporação da plataforma. Se ainda assim não funcionar, envie os leitores para [www.moldraw.com](https://www.moldraw.com/pt/) com um link normal. Última atualização: 14 de outubro de 2026 ## Ferramentas e guias relacionados Continue com o [visualizador de espectros de RMN](https://www.moldraw.com/pt/tools/nmr-viewer/), o [visualizador de espectros de IV](https://www.moldraw.com/pt/tools/ir-viewer/) e o [visualizador de espectros de massas](https://www.moldraw.com/pt/tools/mass-spec-viewer/). São gratuitos e funcionam no navegador. [**Visualizador de espectros de RMN**Abra arquivos de RMN de 1H e 13C](https://www.moldraw.com/pt/tools/nmr-viewer/)[**Visualizador de espectros IV**Encontre picos e grupos funcionais](https://www.moldraw.com/pt/tools/ir-viewer/)[**Visualizador de espectros de massas**Isótopos, adutos e perdas](https://www.moldraw.com/pt/tools/mass-spec-viewer/)[**Visualizador de espectros UV-Vis**Lambda máx., Beer-Lambert, band gap](https://www.moldraw.com/pt/tools/uv-vis-viewer/)[**Guias de espectroscopia**Todos os guias de leitura](https://www.moldraw.com/guides/)[**Todas as ferramentas de química**Conversores, calculadoras, visualizadores](https://www.moldraw.com/pt/tools/)[**Editor MolDraw**Desenhe estruturas no navegador](https://www.moldraw.com/pt/)[**Aprenda MolDraw**Aulas práticas curtas](https://www.moldraw.com/learn/)