Showing results for 
Search instead for 
Did you mean: 

Jabber SDK Chat Demo with Material Design

Cisco Employee

UPDATE: Big changes, many not visible, though.

4/22/2015: Lots of bug fixes.  I added a "fixit" function so that I can now use the latest materialize.js and materialize.css.

This version has major changes, including but not limited to:

  1. Removed all jQuery-UI components except resizable and draggable, replace with materialize components
  2. Discarded the ugly icons on the contacts, replaced with dropdown menu
  3. Group chat now integrated into the chat window instead of having its own window (unfortunately, group chat still doesn't work with Cisco Webex Connect yet)
  4. If you get a message from someone who is not in your roster, that person is automatically added to the "Unassigned" group.
  5. Other less visible changes too numerous to mention

Desktop notifications will appear when you receive a message while the app is not active and in focus. You can set the duration of the notifications in the Settings dialog.

This code is not fully optimized or cleaned yet.  But it's perfectly usable even as is. I have been using it as my default Jabber client at work for a while now. 

If you try this, note that the log no longer appears by default. If you want to watch the log, use the corner menu and select Show Log.

Enjoy, and feel free to post feedback about what you'd like added/changed.  Thanks!

Some screen shots:

Main Header/Menu and Roster


Custom Status:






Forgive my ignorance on this topic, but I had a question regarding the above. You said "This code is not fully optimized or cleaned yet.  But it's perfectly usable even as is. I have been using it as my default Jabber client at work for a while now. "

I just wanted to know how you are doing that? Keep in mind that I'm not a coder. I know some HTML & CSS, but a small bit of hand-holding would be helpful.

My goal is to get Jabber chat into a browser b/c we have 2 UCM clusters and thus 2 different groups of Jabber users.

Hope you can help

EDIT: I am able to use the old chat demo, but the new one isn't working. I click the menu button, but nothing happens. I don't even get a login box like the old demo. Ideas???

Cisco Employee

I just uploaded the latest version, which has some fixes in it, but the group chat is not working, as I am actively modifying how it works.

You need some information about your Jabber (I assume Cisco IM&P) server to try it.  Edit the HTML file (jqchatdemo.html).  Look for this, which is what you should edit:

var demoConfig = {
httpBindingURL: "your BOSH url",
username: "",
password: "",
unsecureAllowed: true,
domain: "yourdomain",
resource: "jqchat",
appTag: "app-data-8",

You'll need to set the BOSH url.  It is most likely something like this:


If your server is set for secure connections, then just change it to use https instead of http.  If it is set for secure connections, then change unsecureAllowed to false. 

Then change the domain to be whatever domain your server is set to use.  In most cases, this will probably be your server's domain, such as for Cisco.  It all depends on how you have your Jabber server set up.

You can use the default resource (jqchat) or you can set it to just about anything you want. 

Technically, you don't have to edit any of this, since you can specify these values at the login screen.  But I find it easier to edit most of these default values except for username and password, which I enter at the login screen.



Thanks for the reply. The problem is that I don't ever get a "login" screen. Also, when I click the menu button, nothing happens.

See below.

Mozilla Firefox and jqchatdemo.html and jqchatdemo.html

EDIT: Found 2 issues I think:

1. jquery-ui-custom folder w/ file jquery-ui.js was missing from build

     - I create that manually

2. jqchatdemo.html referenced <script type="text/javascript" src="materialize/js/materializenp.js"></script>

     - I changed this to <script type="text/javascript" src="materialize/js/materialize-new.js"></script>

After doing this, I am able to get to the below:

jqchatdemo.html and Jabber: Jabber SDK Chat Demo with Material Design | Cisco Communities




I know I am bumping an old thread... But... I am in the middle of researching how to embed Jabber client into a corporate angular webapp, and this is exactly what I was looking for... Thank You! Your work on this was definitely ahead of its time. if you have completed any further progress on this, I would definitely love to see it.

Content for Community-Ad