To chat with our bot, we'll need three sets of areas on our web page. To make the development process easier, we'll import jQuery into our web page. To do this, we'll add a script tag to our <head> section and pull in jQuery (http://jquery.com/) from the Google CDN:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"> </script>
Then for our page elements, we'll first add a simple login form:
<div class="login"> <label for="jid">JID</label><input type="text" name="jid" placeholder="jid" /> <label for="password">Password</label><input type="password" name="password" /> <p class="connection-status">Offline</p> <button type="button" name="login">Login</button> </div>
Then we'll add an area to send our messages from:
<div class="send"> <label for="outgoing-message">...