Incorpore o editor MolDraw no seu site
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.
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. 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.
<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 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.
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 precisa de mais espaço.
Abrir no MolDraw
Dentro do player, Open in MolDraw abre o editor completo em www.moldraw.com 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 com um link normal.