Recently I had a great opportunity to work on a small part of a Lync Powered Expert Question Answer Service. My portion of the code was a simple one page HTML popup that allowed a person to chat with an expert.
One of the cool things I found out about during the project was the HTML5 Dialog Element
The dialog element represents a conversation, meeting minutes, a chat transcript, a dialog in a screenplay, an instant message log, or some other construct in which different players take turns in discourse.
Nifty, eh? I use jquery to insert the root dialog element, then whenever a message is sent or received I inject the dt and dd elements. Here is an example of what the conversation looks like in HTML
By default, the browser will display this like this:
Now that's kinda lame, I want it to look like a real chat screen (with some slick Metro UI Styling), so I added some CSS (take a look at the JSSFiddle CSS Tab for my styles) to hide the dt element and give it a nice blue bubble look. I even added some nice CSS triangles into the mix for some minor speaker perspective.
I've put up a fully coded example with a boring chat bot over at jsFiddle for you to enjoy and mess around with.
Now Playing - La Roux - In For The Kill (Skream Remix) [WTC Mashup]
Jacob
