By default the TSViewer background-color is transparent and the width/height dynamic, meaning only the necessary height and maximum width (of the parent element) will be used for the rendering. Here you can change that.
Place this code in your site HTML. The TSViewer will be shown at the selected placement.
The <div> is an placeholder for the TSViewer. The first <script> loads the TSViewer Loader, the second <script> controls the Loader and contains in the long URL your Viewer settings. The Loader loads the TSViewer and does place him into the placeholder <div>.
Code placement optimizationoptional
If possible, place just the <div> at the correct spot in your HTML. Whereas both <script> tags at the end of your HTML (but before </body>). That way the TSViewer Loader will be loaded just after your site has been fully received and rendered by your browser.
The TSViewer gets generated from the live data of your TeamSpeak 3 server. At each call of the TSViewer the TSViewer.com server does gets queried. The server queries your TeamSpeak 3 server (max 1x/minute) and generates the TSViewer tree. If the TSViewer gets called more often than 1x/minute, it will return the most recently generated tree.