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, style this yourself -->
<div id="jolecule-embed"></div> 

<link rel="stylesheet" type="text/css" href="http://jolecule.com//jolecule.css" />
<script type="text/javascript" src="http://jolecule.com/js/require.js"></script>

<script>
  (function() {
    require(
      ['http://jolecule.com/js/jolecule.js'],
      function(jolecule) {
        var j = jolecule.initEmbedJolecule({
            divTag: '#jolecule-embed',
            viewId: '',
            viewHeight: 60,
            isLoop: false,
            isGrid: false,
            isEditable: false,
          });
        require(
          ['http://jolecule.com/data_server.js?pdb_id=1mbo&name=data_server_1mbo'],
          function(dataServer) {
            j.addDataServer(dataServer);
          });
      });
  })();
</script>

The included files are:

  • jolecule.js
  • jolecule.css
  • jquery-2.0.3.js
  • embeds the protein coordinates and views

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.