PubChem Widgets v2.0f

Note: if you are using previous version of PubChem widgets, please click here for a conversion guide to be able to use the widgets recommended here.

 

PubChem widgets enable you to display PubChem data in your pages. You may choose various data views or add autocomplete functionality to your website.

 

Data View Widgets  

Any section or subsection of PubChem summary or record pages (except for section=Top) can be turned into a widget to be embedded into any web page.

 

For instance, below is an InChI section from compound summary page for tiformin (https://pubchem.ncbi.nlm.nih.gov/compound/tiformin#section=InChI) embedded into this page as a widget.

 

To embed a PubChem widget from above example, add the following code to your page at the location where you want the widget to appear:

<iframe class="pubchem-widget" src="https://pubchem.ncbi.nlm.nih.gov/compound/tiformin#section=InChI&embed=true" style="border: 0;  width: 100%; height: 250px;"></iframe>

 

To find a src for the iframe of a PubChem widget, go to the section of interest, click the icon of "View this section in full screen" (  ). In the following page, copy the URL from the address location, and replace the "fullscreen=true" in the URL with "embed=true".

For example, on the full screen page of the PubChem widget from above example, the URL you will see is:

"https://pubchem.ncbi.nlm.nih.gov/compound/tiformin#section=InChI&fullscreen=true"

Remove the "fullscreen=true", and add "embed=true", you then get the src of the iframe:

"https://pubchem.ncbi.nlm.nih.gov/compound/tiformin#section=InChI&embed=true"
 

 

Note that you can wrap the widget in a container, which can be styled as you like:

<div style="border: solid 1px #ccc; padding: 2px; width: 80%;"><iframe class="pubchem-widget" src="https://pubchem.ncbi.nlm.nih.gov/compound/tiformin#section=InChI&embed=true" style="border: 0;  width: 100%; height: 250px;"></iframe></div>

 

 

Adjusting Widget Size

As shown in examples above, the iframe has to have the width and the height set inside the style attribute.

  • Setting the Width

    It is generally a good idea to set the iframe width parameter to 100%, and if a smaller width is desired, wrap the iframe in a container with a desired width set in the container's style parameter. See the code examples above.

     

  • Setting the Height

    Setting the iframe height to an optimal value can be more difficult. If the content height exceeds the iframe height, a vertical scrollbar appears in the iframe. On the other hand, if the iframe height is set to a high value, there can be a lot of empty space below the content.

     

  • Adjusting Widget Height to Accomodate Content Height

    If you would like to avoid vertical scrollbars on the widgets, we provide a method to automatically adjust the widget iframe height to that of the content.

    To use this method, add scrolling="no" attribute to the iframe and do not set the height on the iframe or the container as shown below:

    <div style="border: solid 1px #ccc; padding: 2px; width: 80%;"><iframe class="pubchem-widget" scrolling="no" src="https://pubchem.ncbi.nlm.nih.gov/compound/tiformin#section=InChI&embed=true" style="border: 0; width: 100%;"></iframe></div>

    In addition, add the following code (open source iframe resizer) to your page (only once, even if you have multiple pubchem widgets on the page) just before the closing body tag:

    <script type="text/javascript" src="https://pubchem.ncbi.nlm.nih.gov/pcfe/libs/iframeResizer.min.js"></script>
    <script type="text/javascript">iFrameResize({log:false,checkOrigin:false}, '.pubchem-widget')</script>

     

Note that some PubChem page sections can be very long, and thus, it is up to you to decide whether a vertical scrollbar is better suitable for your pages.

 

 

 

Suppressing Record Title

In some cases, when the page prominently includes record title (such as "Tiformin" it might be desirable to leave out the record title from the widget.

To do so, use the option hide_title=true in the iframe src attribute as shown below:

<iframe class="pubchem-widget" src="https://pubchem.ncbi.nlm.nih.gov/compound/tiformin#section=InChI&embed=true&hide_title=true" style="border: 0;  width: 100%; height: 250px;"></iframe>

 

 

 

 

What Happens if a Widget Links to a Nonexistent PubChem Record or Record Section?

If the URL provided in the iframe src attribute does not exist in PubChem, the results of what shows up in the iframe might be unpredictable - it could be a 404 page or a search interface depending on what exactly was in the src attribute.

However, if the widget links to a nonexistent section of a valid PubChem record, then the widget will simply display a message saying that the section for that particular record does not exist, see below:

 

 

 

Widget Examples

  1. Widget Example: BioAssay Description

     

    Get the code:

    <iframe class="pubchem-widget" src="https://pubchem.ncbi.nlm.nih.gov/bioassay/157#section=Description&embed=true" style="border: 0;  width: 100%; height: 220px;"></iframe>
  2.  

     

     

  3. Widget Example: BioAssay Data Table

     

    Get the code:

    <iframe class="pubchem-widget" src="https://pubchem.ncbi.nlm.nih.gov/bioassay/157#section=Data-Table&embed=true" style="border: 0;  width: 100%; height: 750px;"></iframe>
  4.  

     

     

  5. Widget Example: Compound 3D Conformer

     

    Get the code:

    <iframe class="pubchem-widget" src="https://pubchem.ncbi.nlm.nih.gov/compound/aspirin#section=3D-Conformer&amp;embed=true" style="border: 0;  width: 400px; height: 600px;"></iframe>

  6.  

     

     

  7. Widget Example: Compound Bioactivities

     

    Get the code:

    <iframe class="pubchem-widget" src="https://pubchem.ncbi.nlm.nih.gov/compound/aspirin#section=BioAssay-Results&embed=true" style="border: 0;  width: 100%; height: 700px;"></iframe>
  8.  

     

     

  9. Widget Example: Compound Citations

     

    Get the code:

    <iframe class="pubchem-widget" src="https://pubchem.ncbi.nlm.nih.gov/compound/aspirin#section=Depositor-Provided-PubMed-Citations&embed=true" style="border: 0;  width: 100%; height: 800px;"></iframe>
  10.  

     

     

  11. Widget Example: Compound Patents

     

    Get the code:

    <iframe class="pubchem-widget" src="https://pubchem.ncbi.nlm.nih.gov/compound/aspirin#section=Depositor-Supplied-Patent-Identifiers&embed=true" style="border: 0;  width: 100%; height: 650px;"></iframe>
  12.  

     

     

  13. Widget Example: Substance Bioactivities

     

    Get the code:

    <iframe class="pubchem-widget" src="https://pubchem.ncbi.nlm.nih.gov/substance/67890#section=BioAssay-Results&embed=true" style="border: 0;  width: 100%; height: 650px;"></iframe>
  14.  

     

     

  15. Widget Example: Classification

     

    Get the code:

    <iframe class="pubchem-widget" src="https://pubchem.ncbi.nlm.nih.gov/compound/aspirin#section=KEGG--OTC-drugs&embed=true" style="border: 0;  width: 100%; height: 550px;"></iframe>
  16.  

     

     

  17. Widget Example: Related Records

     

    Get the code:

    <iframe class="pubchem-widget" src="https://pubchem.ncbi.nlm.nih.gov/compound/aspirin#section=Related-Compounds-with-Annotation&embed=true" style="border: 0;  width: 100%; height: 550px;"></iframe>

 

Note that this list of examples is not exhaustive and that any section or subsection in the table of contents of Compound Summary or BioAssay/Substance Record pages can be embedded as a widget. However, please keep in mind that some sections might be more useful than others as standalone widgets.

 

 


Log of Changes to Widgets

  • 16 Aug 2016 - Release of version 2.0f of PubChem Widgets
  • 01 Oct 2012 - Initial release of version 1.0b of PubChem Widgets