Upload the Mumble Channel Viewer files to your Web server, specifically they must be placed into a directory immediately off the root called mumbleViewer (i.e. the URL will be http://mysite.org/mumbleViewer/).
Once the files are uploaded your first step should be to modify the included demo.html file with your information. On line 12 of demo.html you will see the following line:
<script type="text/javascript">
var mumbleChannelViewerJsonUri = "http://10.0.0.1/json?callback=?";
</script>Replace http://10.0.0.1/json with your JSON URL. Make sure to keep the ?callback=? at the end of the URL, unless your JSON URL already includes a query string, in which case the first ? should be changed to an ampersand (i.e. &callback=?).
Next, save demo.html and open it in your browser: http://mysite.org/mumbleViewer/demo.html
You should now see a listing of your Mumble channels, and who is in each channel along with their status. If you do not see this, make sure that your JSON URL is correct.
Once it is working you can copy the HTML from demo.html into your page. In demo.html there are two code blocks that you will want to copy. Each block begins and ends with the comment: Begin/End Mumble Channel Viewer block. You need to copy everything from in between these blocks into your page.
The first block needs to be placed in between your head tags. The second code block needs to be placed where you want the viewer to appear on the page.
Save your page, and open it in the browser. It should have the Mumble Channel Viewer now.
