Embedding Jolecule Widgets

Jolecule has been designed to be easily embeddable on webpages on external websites.

The modules are self-contained with a clean API. You can even put multiple Jolecule widgets on the same page.

The Jolecule widget adapts to the size of a parent <div>. In the following snippet, a default id of 'jolecule-embed' is used for the parent <div>, but this can be changed. The <div> can be resized to your specification, whether directly in the tag, or through CSS styles.

To insert the widget into your page, add the following snippet into your HTML. This will show the protein '1mbo' as shown in the Jolecule widget to the right.

HTML Code Snippet

      <!-- jolecule widget will be inserted here, set the size with styles -->
<div id="jolecule-embed"></div>
<script
    type="text/javascript"
    src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js">
</script>
<script>
  require(['http://jolecule.com/js/jolecule.js'], function(jolecule) {
    var joleculeWidget = jolecule.initEmbedJolecule({
      divTag: '#jolecule-embed',
      viewId: '',
      animateState: 'none',
      isSequenceBar: false,
      isGrid: false,
      isRotate: false,
      isEditable: false,
      isPlayable: true,
      backgroundColor: 0x000000,
      maxWaitStep: 50
    })
    joleculeWidget.asyncAddDataServer(
      jolecule.makeDataServer(
        "1mbo",
        "",
        false,
        'http://jolecule.com'))
  })
</script>
      

The included files are:

  • require.js
  • jolecule.js

The parameters in the calling function can be changed. For instance, animation looping can be turned on or off. The text for each view can be hidden or shown.