Simple REST API Viewer Example

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.planetteamspeak.com/js/jquery.ts3viewer/1.0.0/themes/colored/tree.css">
<script src="https://cdn.planetteamspeak.com/js/jquery.ts3viewer/1.0.0/jquery.ts3viewer.min.js"></script>
<div class="container">
    
    <h1>TS3 Server Tree</h1>
    
    <p>
        <button type="button" class="btn btn-success btn-sm" id="refresh">
            <span class="glyphicon glyphicon-refresh"></span> Refresh
        </button>
        
        <button type="button" class="btn btn-info btn-sm" id="expand">
            <span class="glyphicon glyphicon-plus"></span> Expand All
        </button>
        
        <button type="button" class="btn btn-info btn-sm" id="collapse">
            <span class="glyphicon glyphicon-minus"></span> Collapse All
        </button>
    </p>
    
    <div id="tsviewer"></div>
    
</div>

CSS

/**
 * Simple REST API Viewer Example
 * ------------------------------
 * ServerQuery connections are initiated 
 * from the following IPs:
 *
 * - 37.59.113.89
 * - 167.114.184.17
 * - 151.80.148.48
 *
 * Please consider adding those IPs to your 
 * TeamSpeak 3 Servers whitelist file.
 */

JavaScript

$("#tsviewer").tsviewer({
    // mandatory server address
    host: "82.211.30.15",
    port: "9987",
    // optional tooltip patterns
    serverTip:  "Clients: $users/$slots",
    channelTip: "Codec: $codec",
    clientTip:  "Version: $version on $platform",
    // optional callbacks
    onNode:  function(elem, node) {
      // your code
    },
    onReady: function(data, count) {
      // your code
    },
    onError: function(error) {
      // your code
    }
});

$("#refresh").click(function() {
    // shortcut to refresh the tree
    $("#tsviewer").tsviewerRefresh(true);
});
      
$("#expand").click(function() {
    // shortcut to expand all nodes
    $("#tsviewer").tsviewerExpand();
});
      
$("#collapse").click(function() {
    // shortcut to collapse all nodes
    $("#tsviewer").tsviewerCollapse();
});