I recently saw that someone had embedded a pretty cool molecule shape into a Hype document so I thought I’d share.
https://twitter.com/chemiftry/status/588039295367254016
To embed a Chemdoodle object, simply create your object and save an HTML file, and use the Source URL of your .html file as the ‘source URL’ of your HTML widget.
Here is an example: http://epistememedia.com/chemiftry/wp-content/uploads/Animations/index.html. The sample code used for this object be found below:
<center>
<script type="text/javascript" src="ChemDoodleWeb.js"></script>
<script type="text/css" src="ChemDoodleWeb.css"></script>
<script type="text/javascript">
var content66067 = new ChemDoodle.io.JSONInterpreter().contentFrom({"m":[{"b":[{"e":2,"b":0,"i":"b0"},{"e":4,"b":0,"i":"b1"},{"e":1,"b":0,"i":"b2"},{"e":3,"b":0,"i":"b3"},{"e":7,"b":2,"i":"b4"},{"e":6,"b":2,"i":"b5"},{"e":5,"b":2,"i":"b6"},{"e":13,"b":7,"i":"b7"},{"e":15,"b":7,"i":"b8"},{"e":14,"b":7,"i":"b9"},{"e":10,"b":4,"i":"b10"},{"e":11,"b":4,"i":"b11"},{"e":9,"b":4,"i":"b12"},{"e":17,"b":10,"i":"b13"},{"e":19,"b":10,"i":"b14"},{"e":18,"b":10,"i":"b15"},{"e":22,"b":17,"o":2,"i":"b16"},{"e":21,"b":17,"i":"b17"},{"e":20,"b":13,"i":"b18"},{"e":23,"b":18,"i":"b19"},{"e":16,"b":9,"i":"b20"},{"e":8,"b":3,"i":"b21"},{"e":12,"b":5,"i":"b22"}],"a":[{"z":1.048,"y":-0.128,"x":1.159,"i":"a0"},{"l":"H","z":1.608,"y":-1.049,"x":1.394,"i":"a1"},{"z":-0.357,"y":-0.657,"x":1.572,"i":"a2"},{"l":"O","z":1.571,"y":0.744,"x":2.188,"i":"a3"},{"z":1.775,"y":0.179,"x":-0.198,"i":"a4"},{"l":"O","z":-0.98,"y":0.382,"x":2.385,"i":"a5"},{"l":"H","z":-0.21,"y":-1.481,"x":2.283,"i":"a6"},{"z":-1.404,"y":-1.047,"x":0.543,"i":"a7"},{"l":"H","z":1.146,"y":1.612,"x":2.098,"i":"a8"},{"l":"O","z":3.143,"y":-0.311,"x":-0.109,"i":"a9"},{"z":1.328,"y":0.041,"x":-1.672,"i":"a10"},{"l":"H","z":1.946,"y":1.262,"x":-0.111,"i":"a11"},{"l":"H","z":-1.151,"y":1.156,"x":1.826,"i":"a12"},{"l":"O","z":-2.497,"y":-1.709,"x":1.184,"i":"a13"},{"l":"H","z":-1.822,"y":-0.17,"x":0.049,"i":"a14"},{"l":"H","z":-0.992,"y":-1.772,"x":-0.157,"i":"a15"},{"l":"H","z":3.145,"y":-1.28,"x":-0.171,"i":"a16"},{"z":-0.039,"y":-0.463,"x":-2.019,"i":"a17"},{"l":"O","z":1.517,"y":1.275,"x":-2.385,"i":"a18"},{"l":"H","z":2.024,"y":-0.651,"x":-2.161,"i":"a19"},{"l":"H","z":-3.145,"y":-1.94,"x":0.497,"i":"a20"},{"l":"H","z":-0.122,"y":-1.552,"x":-2.179,"i":"a21"},{"l":"O","z":-1.019,"y":0.271,"x":-2.123,"i":"a22"},{"l":"H","z":0.917,"y":1.94,"x":-2,"i":"a23"}]}]});
var component66067 = new ChemDoodle.TransformCanvas3D('component66067', 296, 400);
component66067.specs.atoms_color = '#C0C0C0';
component66067.specs.atoms_useJMOLColors = true;
component66067.specs.atoms_sphereDiameter_3D = 2.0;
component66067.specs.atoms_useVDWDiameters_3D = true;
component66067.specs.atoms_vdwMultiplier_3D = 0.3;
component66067.specs.bonds_color = '#808080';
component66067.specs.bonds_useJMOLColors = true;
component66067.specs.bonds_showBondOrders_3D = true;
component66067.specs.bonds_materialAmbientColor_3D = '#000000';
component66067.specs.shapes_color = '#FFFFFF';
component66067.specs.shapes_lineWidth_2D = 2.5;
component66067.loadContent(content66067.molecules, content66067.shapes);
component66067.rotationMatrix = ChemDoodle.lib.mat4.createFrom(-0.004468778450068702,-0.46895863799271537,-0.8832088234790437,0.0,0.9336254232797593,-0.318348498348873,0.1643100806546332,0.0,-0.35822283431528423,-0.8238519463174747,0.4392543358056756,0.0,0.0,0.0,0.0,1.0);
component66067.repaint();
</script>
</center>