<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/owens2024/bootstrap-orgchart@master/src/orgchart.css" integrity="sha384-sZONE6dA1Op1IFvjIbG/8RP2D2wKQ8mETOcoqA2qSDL4nvYmIB3e6gXr3EF2PHUT" crossorigin="anonymous"> <h1>Org Tree</h1> <div class="container-fluid"> <h2>Standard Tree</h2> <div id="tree"></div> </div> <script src="https://cdn.jsdelivr.net/gh/owens2024/bootstrap-orgchart@master/src/orgchart.js" integrity="sha384-/iApj+QmMLxd85NcQC4uafVh6A8UU0SLzkKJkyYTyAdzsu3KuYa2WUzw6EtuDv/8" crossorigin="anonymous"></script>

$(document).ready(function(){ $.ajax({ dataType: "json", url: "https://owens2024.github.io/bootstrap-orgchart/sample.json"}).done( function( data ) { OrgTree.makeOrgTree($('#tree'), data); }); });