Skip to main content
Chemistry LibreTexts

5.4: Interactive Molecules and Proteins - Direct Embedding

  • Page ID
  • \( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \) \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)\(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\) \(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\)\(\newcommand{\AA}{\unicode[.8,0]{x212B}}\)

    Our molecule adding video tutorial on YouTube:

    An interactive protein/chemical can be embedded into pages via the following steps. A more advanced Molecule Generator is discussed elsewhere.

    Step 1: Identify the page you want to edit

    For example, let’s say we want to edit this page:

    and swap out the collagen image for an interactive image


    Step 2: Identify the desired ID code

    There are several ways, but best to just grab the PDB code. From the PDB, we can see the code we want is 1BKV:


    Step 3: Edit the page (in edit mode)

    Edit the page using "Edit" on black bar.


    Step 4: Press Elements on toolbar


    Step 5: Press Templates on toolbar


    Step 6: Press “EmbedGLMol” and when queried press “Insert template”


    Step 7: Edit Code

    The above steps insert this red box with code. You can edit the second line (<script type…) accordingly. The simple thing is to change the code “=1a3n” to the PDB code you desire, in this case “=1bkv” and save


    Step 8: Review

    Review and if cool, we erase the old image (but keep the caption). There are many options to this system and we are still working them out, but you can see them in the Molecular Generator:


    5.4: Interactive Molecules and Proteins - Direct Embedding is shared under a CC BY 1.3 license and was authored, remixed, and/or curated by LibreTexts.

    • Was this article helpful?