<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container chatBoxContainer">
<div class="row chatBoxHeader" id="chatHeader">
<div class="col-md-10"><text>Chat</text></div>
<div class="col-md-2"><button type="button" class="chat-close-button" onclick="togglePreviewChatBox()"></button></div>
</div>
<div class="row chatBoxArea" id="chatSpace">
</div>
<form onsubmit="return submitPreviewText(document.getElementById('inputBox').value)" id="form">
<div class="row inputRow form-group" id="previewTextInputArea">
<input type="text" class="form-control" placeholder="Preview Reply" id="inputBox">
<input type="submit" value="submit" style="position: absolute; left: -9999px" />
</div>
</form>
</div>
.chatBoxContainer{
position:fixed;
bottom:0px;
left:0px;
height:300px;
width:200px;
overflow:hidden;
}
.chatBoxHeader{
background-color:dodgerblue;
display:none;
}
.chatBoxArea{
position:relative;
background:white;
border-style:solid;
border-width:1px;
border-color:#E2E1E1;
height:100%;
overflow-x:hidden;
padding-bottom:60px;
display:none;
}
.inputRow{
position:absolute;
bottom:0;
width:100%;
margin-bottom:0;
padding-bottom:0;
}
.chat-close-button
{
display:block;
box-sizing:border-box;
width:20px;
height:20px;
border-width:3px;
border-style: solid;
border-color:red;
background: -webkit-linear-gradient(-45deg, transparent 0%, transparent 46%, white 46%, white 56%,transparent 56%, transparent 100%), -webkit-linear-gradient(45deg, transparent 0%, transparent 46%, white 46%, white 56%,transparent 56%, transparent 100%);
background-color:red;
box-shadow:0px 0px 4px 2px rgba(0,0,0,0.5);
transition: all 0.3s ease;
}
.speech-bubble-user {
position: relative;
background: #b5bbb4;
border-radius: .4em;
word-wrap:break-word;
}
.speech-bubble-user:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
border: 9px solid transparent;
border-top-color: #b5bbb4;
border-bottom: 0;
border-right: 0;
margin-left: -4.5px;
margin-bottom: -9px;
}
.speech-bubble-bot {
position: relative;
background: #42bb4d;
border-radius: .4em;
word-wrap:break-word;
}
.speech-bubble-bot:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
border: 9px solid transparent;
border-top-color: #42bb4d;
border-bottom: 0;
border-left: 0;
margin-left: -4.5px;
margin-bottom: -9px;
}
.chatBoxMessage{
padding:2px;
}
p{
padding:5px;
}
function submitPreviewText(text){
//if chat is not visible, make it popup
if($('#chatSpace').css('display') == 'none'){
togglePreviewChatBox();
}
//makes text appear as a bubble in the chat areas
var chat = $("#chatSpace")[0];
var htmlstring = '<div class="col-md-12 chatBoxMessage"><text class="speech-bubble-user" style="padding-left:10px">' + text + '</p></div>';
chat.insertAdjacentHTML('beforeend',htmlstring);
//submit this text to the server
//get response back from the server
$('#inputBox').val("");
//display this response as a bubble in the chat window
return false;
}
function togglePreviewChatBox(){
var chatSpace = $('#chatSpace');
var header = $('#chatHeader');
if (chatSpace.css('display') == 'none') {
chatSpace.css('display',"block");
header.css('display',"block");
} else {
chatSpace.css('display',"none");
header.css('display',"none");
chatSpace.html('');
}
}
