MOLVWR

a WebGL molecule viewer built with Babylon.js

Want to know every crazy things you can do with Molvwr ? checkout the molecule catalog demo !
triglyceride
Embedding Molvwr into your site is totally free and very easy. The most simple way is to add the script "molvwr-bundle.js" to your page, just like this:
<script src="lib/molvwr-bundle.js"></script>
This script contains a bundle of Molvwr, Babylon.js (a WebGL 3D Engine) and hand.js (a polyfill for pointer events that enables touch interaction).
You could also add the different files separately if you would like to use Babylon somewhere else in your site.

When your script is ready, add a bloc in your page with a "data-molvwr" attribute containing the path of your molecule file :
<div class="mol mol-left" data-molvwr="mol.sdf"></div>
Now you just need to call "Molvwr.process()" to have your bloc turning into a 3D molecule
<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function() {
    Molvwr.process();
  });
</script>
The "process" function can be called without parameters, or you could explicitely provide an HTML element (or an array of elements).
vitamin B12
You could use some other parameters to customize experience a little bit. First you could add a "data-molvwr-format" to specify the molecule format. Molvwr currently support "mol", "sdf", and "xyz" formats.

You could also specify how the molecule get rendered with "data-molvwr-view". By default, atoms are rendered as "spheres" but you could also use "sticks" "ballsandsticks".
If you want to use Molvwr in your website, request feature, or file a bug, visit our github page.