Update index.html with Demo section

converse.js

@@ -1915,7 +1915,7 @@
         this.auto_subscribe = chatdata.attr('auto_subscribe') === "True" || false;
         this.chatboxes = new this.ChatBoxes();
         this.chatboxesview = new this.ChatBoxesView({model: this.chatboxes});
-        $('a#toggle-online-users').bind(
+        $('a.toggle-online-users').bind(
             'click', 
             $.proxy(function (e) { 
                 e.preventDefault(); this.toggleControlBox(); 

index.html

@@ -29,8 +29,8 @@
     <!-- MAIN CONTENT -->
     <div id="main_content_wrap" class="outer">
     <section id="main_content" class="inner">
-    <p><strong>Converse.js</strong> implements an <a href="http://xmpp.org">XMPP</a> based instant messaging client in the browser.</p>
-    <p>It is used by <a href="http://github.com/collective/collective.xmpp.chat">collective.xmpp.chat</a>, which is a <a href="http://plone.org">Plone</a> instant messaging add-on.</p>
+    <p><strong>Converse.js</strong> implements an <a href="http://xmpp.org" target="_blank">XMPP</a> based instant messaging client in the browser.</p>
+    <p>It is used by <a href="http://github.com/collective/collective.xmpp.chat" target="_blank">collective.xmpp.chat</a>, which is a <a href="http://plone.org" target="_blank">Plone</a> instant messaging add-on.</p>
     <p>The ultimate goal is to enable anyone to add chat functionality to their websites, regardless of the backend.</p>
     <p>This is currently possible, except for adding new contacts, which still makes an XHR call to the (Plone) backend to fetch user info.</p>
 
@@ -49,26 +49,62 @@
 
     <h2>Screencasts</h2>
     <ul>
-        <li><a href="http://opkode.com/media/blog/instant-messaging-for-plone-with-javascript-and-xmpp">Screencast 1</a>:
+        <li><a href="http://opkode.com/media/blog/instant-messaging-for-plone-with-javascript-and-xmpp" target="_blank">Screencast 1</a>:
             Integrated into a Plone site via <strong>collective.xmpp.chat</strong>.
         </li>
-        <li><a href="http://opkode.com/media/blog/2013/04/02/converse.js-xmpp-instant-messaging-with-javascript">Screencast 2</a>:
+        <li><a href="http://opkode.com/media/blog/2013/04/02/converse.js-xmpp-instant-messaging-with-javascript" target="_blank">Screencast 2</a>:
             A static HTML page with <em>Converse.js</em>. Here we chat to external XMPP accounts on Jabber.org and Gmail.
         </li>
     </ul>
 
+    <h2>Demo</h2>
+    <p>
+        The code in Converse.js is pretty solid and already used in production
+        in Plone installations. It's however not yet 100% ready for prime-time
+        as a standalone client.
+    </p>
+    <p>
+        Nevertheless, you can try out the current functionality on this page. 
+    </p>
+    <p>
+        <a href="#" class="chat toggle-online-users">Click this link</a> or
+        click the link on the bottom right corner.
+        </a>
+    </p>
+    <p>
+        Besides providing valid credentials for an XMPP/Jabber account, you'll also have to provide
+        the details of a <a target="_blank" href="http://metajack.im/2008/09/08/which-bosh-server-do-you-need">BOSH Connection Manager</a>.
+        I intend to set up a connection manager for people to play with in the
+        near future, but for the moment I unfortunately can't help you there.
+   </p>
+    <p>
+        You can create a Jabber/XMPP account at any of these providers:
+        <ul>
+            <li>
+                <a href="http://jabber.org" target="_blank">jabber.org</a>
+            </li>
+            </li>
+            <li>
+                <a href="https://jappix.com" target="_blank">jappix.com</a>
+            </li>
+            <li>
+                <a href="https://gmail.com" target="_blank">gmail.com</a>
+            </li>
+        </ul>
+   </p>
+
     <h2>Dependencies</h2>
     <p><strong>Converse.js</strong> depends on a few third party libraries, including: 
     <ul>
-        <li><a href="http://strophe.im/strophejs">strophe.js</a></li>
-        <li><a href="http:/backbonejs.org">backbone.js</a></li>
-        <li><a href="http:/requirejs.org">require.js</a></li>
+        <li><a href="http://strophe.im/strophejs" target="_blank">strophe.js</a></li>
+        <li><a href="http:/backbonejs.org" target="_blank">backbone.js</a></li>
+        <li><a href="http:/requirejs.org" target="_blank">require.js</a></li>
     </ul>
     </p>
 
     <h2>Licence</h2>
-    <p><strong>Converse.js</strong> is released under both the <a href="http://opensource.org/licenses/mit-license.php">MIT</a> 
-    and <a href="http://opensource.org/licenses/gpl-license.php">GPL</a> licenses.</p>
+    <p><strong>Converse.js</strong> is released under both the <a href="http://opensource.org/licenses/mit-license.php" target="_blank">MIT</a> 
+    and <a href="http://opensource.org/licenses/gpl-license.php" target="_blank">GPL</a> licenses.</p>
 </section>
 </div>
 
@@ -83,8 +119,8 @@
 <div id="chatpanel">
     <div id="collective-xmpp-chat-data"></div>
     <div id="toggle-controlbox">
-        <a href="#" class="chat" id="toggle-online-users">
-            <span class="conn-feedback">Click here to chat</span> <strong style="display: none" id="online-count">(0)</strong>
+        <a href="#" class="chat toggle-online-users">
+            <strong class="conn-feedback">Click here to chat</strong> <strong style="display: none" id="online-count">(0)</strong>
         </a>
     </div>
 </div>