Collapsible Chat Widget
A thoughtfully done chat similar to hangout represents most of the features of the hangout. Features like scrollbar to view previous messages, the images of the sender before the messages and the name of the sender along with the time below the messages. The box also has the functional icons like minimizing the window along with closing or removal of the window. This uses the Bootstrap 3-panel components along with the header, body, and footer. The panel header contains the title, along with the icons for minimizing and closing the windows. Functions for these icons are in JS File. Next, is the panel-body containing all the messages, avatar and timestamp. Last is the panel footer containing the input group along with the primary buttons. The CSS styling exactly fits all the components inside the chart window. Along with these features, you can add maximizing the window and search feature in the header portion of the panel.