a viewer can be automatically instantiated by simply assigning the class viewer_3dmoljs to a div.
the viewer will be styled according to the containing div, so be sure to set a height and width.
the code below is all that is needed to create the displayed viewer.

{@lang xml} <script src="http://3dchem.cn/build/3dmol-min.js"></script> </head>    
         <div style="height: 400px; width: 400px; position: relative;" class='viewer_3dmoljs' data-pdb='2por' data-backgroundcolor='0xffffff' data-style='stick'></div>

the contents of the viewer can be set and manipulated through the use of data- tags, as shown above. supported tags include:

• data-pdb the value describes a pdb id to be loaded into the viewer.
• data-href the value is a url to a molecular data file.
• data-element the value is the id of an html element on the current page that has molecular data embedded in it.
• data-type the value is the file format (default pdb; can be pdb, sdf, xyz, mol2, or cube).
• data-backgroundcolor the background color (default black).
• data-select the value is an atomspec selection specification.
• data-style the value is a style specification.
• data-surface a surface style specification.

• data-labelres a residue label style specification.

  multiple selections, styles, residue labels, and surfaces can be provided by appending a suffix
  each tag. for example.

  {@lang xml} 
        <div style="height: 400px; width: 400px; position: relative;" class='viewer_3dmoljs' data-pdb='1ycr' data-backgroundcolor='0xffffff' 
        data-select1='chain:a' data-style1='cartoon:color=spectrum' data-surface1='opacity:.7;color:white' data-select2='chain:b' data-style2='stick'></div>

  once created, the 3dmol viewer can be accessed using the id of the container div in $3dmol.viewers.