index.html

<html>
<head>
	<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
	
	<script type="text/javascript" src="js/strophe.js"></script>
	
	<script type="text/javascript" src="js/xmpp_muc.js"></script>
	<script type="text/javascript" src="js/supportchat.js"></script>
	
	<style type="text/css">
		#support-chat
		{
			display:none;
		}
		#support-converse, #support-question,
		#support-converse-input, #support-question-type,
		#support-question-text
		{
			width:100%;
		}
		#support-send-button, #support-question-submit
		{
			float:right;
		}
		#support-wait, #support-converse
		{
			display:none;
		}
		#support-log
		{
			position:relative;
			top:0px;
			overflow: auto;
			height:90%;
			padding:5px;
		}
		#support-input
		{
			height:7%;
			bottom:0px;
			position:relative;
		}
		
	</style>
</head>
<body>
	<div id="support-chat">
		<div id="support-question">
			<h2>What is the nature of your question?</h2>
			<select id="support-question-type">
				<option>Sales</option>
				<option>Technical</option>
			</select>
			<h2>What is your name?</h2>
			<input id="support-question-name" type="text" />
			<h2>Your question:</h2>
			<textarea id="support-question-text"></textarea><br/>
			<input id="support-question-submit" type="submit" />
		</div>
		<div id="support-wait">Please wait...</div>
		<div id="support-converse">
			<div id="support-log">Hello</div>
			<input id="support-input" type="text" value="Hello" />
			<input id="support-send-button" type="submit" value="Send" />
		</div>
	</div>
</body>
</html>