index.html

<!DOCTYPE html>
<html>

  <head>

    <style>
        #pdb-rna-viewer {
          width: 500px;
          height: 500px;
        }
        #mainMenu {
          width: 502px;
        }
    </style>
    <!-- PDB RNA Viewer CSS -->
    <link rel="stylesheet" type="text/css" href="build/pdb-rna-viewer-0.1.0.css">

  </head>

  <body>
    <h4>PDB RNA Viewer Plugin Demo</h4>
    
    <!-- PDB RNA Viewer container -->
    <div id="pdb-rna-viewer" style="float: left;"></div>
    
    <!-- d3.js dependency script -->
    <script src="https://cdn.jsdelivr.net/npm/d3@5.9.2"></script>
    
    <!-- PDB RNA Viewer JS -->
    <script type="text/javascript" src="build/pdb-rna-viewer-plugin-0.1.0.js"></script>
    <script>
        //Create plugin instance
        const pluginInstance = new PdbRnaViewerPlugin();

        //Get element from HTML/Template to place the view
        const viewContainer = document.getElementById('pdb-rna-viewer');

        const options = {
          pdbId: '4v9d',
          entityId: '25',
          chainId: 'CA',
        } 
    
        //Call render method to display the 2D view
        pluginInstance.render(viewContainer, options);
      
    </script>
  </body>

</html>