Chat-windowBootstrap CSS HTML Javascript 

Chat window Functionality Using Jquery, and Style in CSS

Nowadays Chat in every website is becoming popular, so here is one Chat window Concept For your Website.

You can integrate this in any Backend coding  and also with “WebRTC Chat Concept”.

Step 1:First you need to include these Libraries – jquery and bootstrap

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Script Lib

Step 2: then include this Html

<div class="col-md-3 fixedonscroll">
                <h3 class="headerstyle">Messages</h3>
				<div class="showOnClick" style="display: none;">
                <div class="row chat-window">
                    <div class="talk-bubble-left tri-right left-top">
                        <div class="talktext">
                            <p><span>SuperAdmin:</span>&nbsp;<small>Device # 123 giving incorrect reading. PLEASE CHECK THE DEVICE!!!</small></p>
                        </div>
                    </div>

                    <div class="talk-bubble-right tri-right right-top">
                        <div class="talktext">
                            <p><span>Me:</span>&nbsp;<small>Device # 123 ISSUE FIXED...</small></p>
                        </div>
                    </div>

                    <div class="talk-bubble-left tri-right left-top">
                        <div class="talktext">
                            <p><span>SuperAdmin:</span>&nbsp;<small>Device # 123 giving incorrect reading. PLEASE CHECK THE DEVICE!!!</small></p>
                        </div>
                    </div>

                    <div class="talk-bubble-right tri-right right-top">
                        <div class="talktext">
                            <p><span>Me:</span>&nbsp;<small>Device # 123 ISSUE FIXED...</small></p>
                        </div>
                    </div>

                    <div class="talk-bubble-left tri-right left-top">
                        <div class="talktext">
                            <p><span>SuperAdmin:</span>&nbsp;<small>Device # 123 giving incorrect reading. PLEASE CHECK THE DEVICE!!!</small></p>
                        </div>
                    </div>

                    <div class="talk-bubble-right tri-right right-top">
                        <div class="talktext">
                            <p><span>Me:</span>&nbsp;<small>Device # 123 ISSUE FIXED...</small></p>
                        </div>
                    </div>

                    <div class="talk-bubble-left tri-right left-top">
                        <div class="talktext">
                            <p><span>SuperAdmin:</span>&nbsp;<small>Device # 123 giving incorrect reading. PLEASE CHECK THE DEVICE!!!</small></p>
                        </div>
                    </div>

                    <div class="talk-bubble-right tri-right right-top">
                        <div class="talktext">
                            <p><span>Me:</span>&nbsp;<small>Device # 123 ISSUE FIXED...</small></p>
                        </div>
                    </div>

                    <div class="talk-bubble-left tri-right left-top">
                        <div class="talktext">
                            <p><span>SuperAdmin:</span>&nbsp;<small>Device # 123 giving incorrect reading. PLEASE CHECK THE DEVICE!!!</small></p>
                        </div>
                    </div>

                </div>

                <form id="formSendMsg">
                    <div class="input-group myMessageBox">
                        <span class="input-group-addon" id="message-text"><i class="fa fa-envelope"></i></span>
                        <input type="text" id="myMessage" class="form-control" autocomplete="off" required="required" placeholder="Enter your message here..." aria-describedby="message-text" />
                    </div>
                </form>
				</div>
            </div>
			

HTML

Step 3: After HTML then include CSS for Style.

.talk-bubble-left {
    margin: 5px 0px 5px 20px;
    display: inline-block;
    position: relative;
    width: 200px;
    height: auto;
    background-color: #FF9800;
    color: #fff;
    box-shadow: 2px 2px 7px #333, 3px 2px 3px #FF9800;
}

.border {
    border: 8px solid #666;
}

.round {
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
}

<yoastmark class='yoast-text-mark'>.tri-right.border.left-top:before {</yoastmark>
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: -40px;
    right: auto;
    top: -8px;
    bottom: auto;
    border: 32px solid;
    border-color: #666 transparent transparent transparent;
}

.tri-right.left-top:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: -20px;
    right: auto;
    top: 0px;
    bottom: auto;
    border: 22px solid;
    border-color: #FF9800 transparent transparent transparent;
}



.talk-bubble-right {
    margin: 5px 0px 5px 100px;
    display: inline-block;
    position: relative;
    width: 200px;
    height: auto;
    background-color: #009688;
    color: #fff;
    box-shadow: 0px 1px 2px #333, 0px 1px 2px #009688;
}


.chat-window {
    overflow-x: hidden;
    overflow-y: auto;
    height: 405px;
}

    .chat-window p span {
        color: #000;
        font-variant: small-caps;
        font-weight: 900;
    }

<yoastmark class='yoast-text-mark'>.tri-right.border.right-top:before {</yoastmark>
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: auto;
    right: -40px;
    top: -8px;
    bottom: auto;
    border: 32px solid;
    border-color: #666 transparent transparent transparent;
}

.tri-right.right-top:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: auto;
    right: -20px;
    top: 0px;
    bottom: auto;
    border: 20px solid;
    border-color: #009688 transparent transparent transparent;
}

.talktext {
    padding: 1em;
    text-align: left;
    line-height: 1.5em;
}

    .talktext p {
        <yoastmark class='yoast-text-mark'>-webkit-margin-before: 0em;</yoastmark>
        -webkit-margin-after: 0em;
    }
.headerstyle{
    background-color: darkgray;
    padding: 9px;
    color: #fff;
	cursor: pointer;
}
.fixedonscroll{
position: fixed;
    bottom: 0px;
}
CSS

Step 4: At last, But Most Important Javascript part should be included

/* To Toggle the chat-window*/
$(".headerstyle").click(function(){
	$(".showOnClick").toggle('slow');
});

/*Chat functionality*/
$('#formSendMsg').submit(function (e) {
    e.preventDefault();

    var myMsgBubble = $('<div>').addClass('talk-bubble-right tri-right right-top animated bounceInRight').appendTo('.chat-window');
    var myMsgArea = $('<div>').addClass('talktext').appendTo(myMsgBubble);
    var myMsgBody = $('<p>').appendTo(myMsgArea);
    $('<span>').text('Me: ').appendTo(myMsgBody);
    $('<small>').text($('#myMessage').val()).appendTo(myMsgBody);
    $(".chat-window").animate({ scrollTop: $('.chat-window').prop("scrollHeight") }, 500);
    var audio = new Audio('../audio/msg_pop.mp3');
    audio.play();

    $('#formSendMsg').trigger('reset');
});
Javascript

You can also download code from GITHUB : Click Here to Download

Arjun is is a web developer/designer, who is fond of the web. He lives in Manipal, Karnataka, India.
Also Read:  How to create server side session using javascript

Related posts