<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/css/new.css">
<script src="https//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="chatbot2 d-none">
<div class="chatbot-wrapper2">
<div class="upper-part chat-header">
<div class="chat-buttons">
<button class="chat-button button-collapse2" type="button" tooltip="Minimize widget"
onclick="openChat()">
<i class="fa fa-expand" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
<div class="chatbot" id="chatbot">
<div class="chatbot-wrapper">
<div class="upper-part chat-header">
<div class="chat-buttons">
<button class="chat-button button-close" type="button" onclick="closeChat()" tooltip="Close widget">
<i class="fa fa-times" aria-hidden="true"></i></button>
<button class="chat-button button-collapse d-none" type="button" tooltip="Minimize widget"
onclick="increaseHeight()">
<i class="fa fa-expand" aria-hidden="true"></i>
</button>
<button class="chat-button button-increase d-none" type="button" onclick="minimizeHeight()"
tooltip="Increase widget size">
<i class="fa fa-compress" aria-hidden="true"></i>
</button>
</div>
<!-- end buttons div -->
<strong class="header-title title-floating" tooltip="Have a Question?"> Have a Question?</strong>
<!-- <strong class="header-title title-floating d-none" tooltip="Get Instant Answers:"> Get Instant Answers:</strong> -->
</div>
<div class="lower-part">
<div class="chat-content">
<div class="chat-conversation">
<div class="conversation-ui">
<div class="conversation-ui-content d-none">
<div class="conversation-log">
<div class="conversation-log-scrollable scrollable">
<div class="">
<div class="msg_history">
<div class="incoming_msg">
<div class="incoming_msg_img">
<img src="assets/img/technical-support-white.png"
class="conversation-avatar conversation-avatar-bot">
</div>
<div class="received_msg">
<div class="received_withd_msg">
<div class="received_msg_inner">
<p>Hi, I am Your virtual
assistant.
</p>
<p>How can I help you today ?</p>
</div>
<span class="time_date"> 11:01 AM | June 9</span>
</div>
</div>
</div>
<div class="outgoing_msg">
<div class="sent_msg">
<div class="sent_msg_inner">
<p>Test which is a new approach to have all
solutions</p>
</div>
<span class="time_date"> 11:01 AM | June 9</span>
</div>
</div>
<div class="incoming_msg">
<div class="incoming_msg_img">
<img src="assets/img/technical-support-white.png"
class="conversation-avatar conversation-avatar-bot">
</div>
<div class="received_msg">
<div class="received_withd_msg">
<div class="received_msg_inner">
<p>Can you try rephrasing that</p>
</div>
<span class="time_date"> 11:01 AM | Yesterday</span>
</div>
</div>
</div>
<div class="outgoing_msg">
<div class="sent_msg">
<div class="sent_msg_inner">
<p>What is Error Reporting Tool?</p>
</div>
<span class="time_date"> 11:01 AM | Today</span>
</div>
</div>
<div class="incoming_msg">
<div class="incoming_msg_img">
<img src="assets/img/technical-support-white.png"
class="conversation-avatar conversation-avatar-bot">
</div>
<div class="received_msg">
<div class="received_withd_msg">
<div class="received_msg_inner">
<p>I Would like to know about your featured products.</p>
</div>
<span class="time_date"> 11:01 AM | Today</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="conversation-query-section" onkeyup="expand()">
<div class="query-section">
<div class="query-section-inner">
<div class="query-section-align">
<div class="query-section-relative">
<form action="#"><input class="query-section-input" autocomplete="off"
type="text"
aria-label="Type your question here. Press Enter to search."
placeholder="Type your question here" maxlength="250">
</form>
</div>
</div>
<div class="query-section-buttons">
<div class="query-section-custom-buttons">
</div>
<button class="query-section-button" type="button" tooltip="Search by voice">
<i class="fa fa-microphone change-icon" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="query-field-suggestions query-field-suggestions--flip">
<div class="query-field-suggestion">What is <b>Error Reporting Tool</b>?</div>
<div class="query-field-suggestion">What is
<b>AML Automation</b>?</div>
<div class="query-field-suggestion">What is
<b>AML</b>?
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="toggleChat d-none">
<button class="closeButton" type="button" onclick="openChat()" tooltip="Close widget">
<i class="fa fa-times" aria-hidden="true"></i></button>
</div>
</body>
</html>
@import 'variable.css';
@import 'font-awesome.min.css';
@import 'bootstrap.min.css';
@import url("variable.css");
/* @import url("font-awesome.min.css"); */
body {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'raleway', 'arial', sans-serif, 'FontAwesome'!important;
line-height: 19px!important;
font-style: normal!important;
font-size: 16px!important;
}
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot');
src: url('../fonts/fontawesome-webfont.eot') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2') format('woff2'), url('../fonts/fontawesome-webfont.woff') format('woff'), url('../fonts/fontawesome-webfont.ttf') format('truetype'), url('../fonts/fontawesome-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "raleway";
src: url("../font/Raleway-Regular.woff");
font-weight: normal;
font-style: normal;
}
.chatbot, .chatbot2 {
bottom: 10px;
right: 10px;
left: auto;
font-size: 14px;
position: fixed;
z-index: 999999999;
box-sizing: content-box;
box-shadow: none;
white-space: normal;
direction: inherit;
background: 0 0;
border-radius: 0;
list-style: none;
font-size: inherit;
line-height: normal;
color: inherit;
height: auto;
width: auto;
padding: 0;
margin: 0;
min-width: 0;
min-height: 0;
max-width: none;
max-height: none;
text-transform: none;
transition: none;
}
.conversation-entry-bot-message-body>* {
font-size: inherit;
margin: 0;
}
.chatbot-wrapper, .chatbot-wrapper2 {
box-shadow: 0 2px 30px rgba(9,7,7,.2);
border-radius: 12px;
background: #eaeaea;
overflow: visible;
position: relative;
z-index: 2;
}
.chatbot-wrapper {
width: 290px;
transition: width 1s;
}
.chatbot-wrapper2 {
width: auto;
transition: width 1s;
}
.expand-chat{
width: 400px;
height: 580px;
}
.increaseHeight {
width: 600px!important;
height: 580px;
}
.expand-chat .conversation-ui {
height: 500px;
/* background: #fff; */
}
.expand-chat .conversation-ui-content {
height: 489px;
}
.expand-chat .conversation-ui-content {
position: relative;
height: 500px;
overflow: hidden;
}
.chatbot-wrapper:hover {
width: 400px;
/* height: 580px; */
}
.chatbot-wrapper.wide {
width: 650px;
height: 590px;
}
.chat-header {
border-radius: 11px 11px 0 0;
padding: 0 10px 0 15px;
text-align: center;
background: #003B4D;
color: #fff;
overflow: hidden;
position: relative;
z-index: 1;
display: block;
}
.chat-buttons {
float: right;
padding: 10px 0 0;
direction: ltr;
height: 20px;
}
.chat-button {
/* height: 17px; */
margin-left: 10px;
float: right;
width: 25px;
vertical-align: top;
cursor: pointer;
border: 0;
margin: 0 2px;
padding: 0;
/* text-indent: -9999px; */
background-color: transparent;
overflow: hidden;
}
.header-title {
line-height: 34px;
margin-right: 29px;
padding-top: 1px;
text-align: left;
}
.title-floating {
cursor: default;
font-family: inherit;
font-size: 18px;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 400;
user-select: none;
overflow: hidden;
display: block;
margin: 0;
}
.chat-content {
border-radius: 0 0 11px 11px;
background: #eaeaea;
position: relative;
z-index: 1;
overflow: hidden;
}
.conversation-ui {
/* height: 37px; */
background: #fff;
}
.conversation-ui-content {
background: #f5f5f5;
position: relative;
/* height: 500px; */
overflow: hidden;
}
.conversation-query-section {
border-top: 1px solid #dfdfdf;
position: relative;
z-index: 2;
}
.query-section {
position: relative;
display: block;
float: left;
}
.query-section-inner {
background: #fff;
display: table;
width: 100%;
}
.query-section-align {
vertical-align: middle;
display: table-cell;
width: 100%;
}
.query-section-relative {
position: relative;
}
.query-section-input {
padding: 8px 15px;
height: 35px;
color: #3b3b3b;
position: relative;
-webkit-tap-highlight-color: transparent;
-webkit-appearance: textfield;
font-family: inherit;
box-sizing: border-box;
background: 0 0;
border: 0;
display: block;
font-size: 16px;
line-height: 20px;
width: 100%;
outline: none;
}
.query-field-status {
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
border: 0;
padding: 0;
}
.query-section-buttons {
vertical-align: middle;
white-space: nowrap;
display: table-cell;
position: relative;
padding: 0 5px;
width: 0;
}
.query-section-custom-buttons {
vertical-align: middle;
display: inline-block;
}
.query-section-button {
padding: 5px 7px;
-webkit-tap-highlight-color: transparent;
vertical-align: middle;
display: inline-block;
background: 0 0;
cursor: pointer;
border: 0;
margin: 0;
/* text-indent: -9999px; */
overflow: hidden;
}
.query-section-button i {
width: 17px;
display: block;
color: #818282;
font-size: 22px;
}
.chat-button i {
color: #fff;
font-size: 20px;
}
.closeButton i {
color: #fff;
font-size: 20px;
background: #003B4D;
border-radius: 10px;
padding: 5px;
box-shadow: 0 2px 30px rgba(9,7,7,.2);
}
i.fa-paper-plane{
color: #003b4d;
font-size: 20px;
transform: rotate(45deg);
margin-right: 10px;
}
.stage-4 .button-increase, .stage-4 .button-close, .stage-4 .chat-content {
display: none!important;
}
.conversation-log {
position: relative;
font-size: 16px;
line-height: 20px;
height: 100%;
}
.conversation-log:after, .conversation-log:before {
box-shadow: 0 -45px 50px 41px rgba(0,0,0,.35);
position: absolute;
z-index: 1;
height: 0;
right: 0;
left: 0;
top: 0;
content: '';
}
.scrollable {
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
overflow-x: hidden;
overflow: auto;
height: 100%;
scrollbar-width: thin;
scrollbar-color: #ccc #eaeaea;
padding: 15px;
}
.conversation-log-entry {
margin: 0;
padding: 15px;
/* margin: 15px; */
}
.conversation-entry-bot-container {
padding-left: 40px;
overflow: visible;
text-align: left;
direction: ltr;
/* overflow: hidden; */
position: relative;
}
.conversation-entry-bot-profile-column {
height: auto;
float: none;
margin-right: 0;
width: auto
}
.conversation-entry-bot-profile {
width: 30px;
bottom: 0;
left: 0;
position: absolute;
max-width: 30px;
}
.conversation-avatar {
position: relative;
display: block;
}
.conversation-avatar-bot {
width: 35px;
height: 35px;
}
.conversation-entry-bot-align {
-webkit-animation: none;
-webkit-animation: bc-bot-from-persistent .25s cubic-bezier(.215, .61, .355, 1);
animation: bc-bot-from-persistent .25s cubic-bezier(.215, .61, .355, 1);
overflow: visible;
}
.conversation-entry-bot-wrap {
overflow: visible;
position: relative;
overflow: hidden;
max-width: 100%
}
.conversation-entry-bot-content {
max-width: 100%;
float: left;
box-shadow: 0 0 10px rgba(0,0,0,.1);
border-radius: 11px 11px 11px 0;
}
.conversation-entry-bot-main {
box-shadow: 0 0 10px rgba(0,0,0,.1);
border-radius: 11px 11px 11px 0;
position: relative;
overflow: hidden;
}
.conversation-entry-bot-author {
position: absolute;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
top: -9999px;
}
.conversation-entry-bot-message {
background: #fff;
border-radius: 11px 11px 11px 0;
/* border-radius: 15px 15px 15px 0; */
padding: 10px 12px;
/* background: #e6e6e6; */
color: #4a4a4a;
box-sizing: border-box;
overflow: hidden;
word-wrap: break-word;
}
.conversation-entry-date {
margin-bottom: 0;
text-align: center;
}
.conversation-entry-date-text {
color: #767676;
display: inline-block;
font-size: 12px;
padding: 5px 10px;
border-radius: 40px;
}
.conversation-avatar-bot {
background-color: #003b4d;
border-radius: 10px;
padding: 5px;
}
.conversation-entry-user-message {
background: #003B4D;
border-radius: 15px 15px 0;
padding: 10px 12px;
color: #fff;
float: right;
max-width: 100%;
box-sizing: border-box;
word-wrap: break-word;
}
.conversation-entry-bot-caption {
background: #fff;
font-weight: 400;
padding: 8px 21px;
text-align: left;
border-radius: 11px 11px 0 0;
color: #4a4a4a;
}
.conversation-choices-button {
background: #fff;
color: #003B4D;
transition: background .15s cubic-bezier(.645,.045,.355,1),color .15s;
border-width: 1px 0 0;
font-family: inherit;
box-sizing: border-box;
border: solid #dfdfdf;
/* border-width: 1px 1px 0; */
padding: 8px 21px;
/* background: #fff; */
cursor: pointer;
display: block;
width: 100%;
text-align: left;
}
.conversation-choices-button:hover {
background: #003B4D;
color: #fff;
}
.conversation-choices-button-last {
border-radius: 0 0 11px;
border-width: 1px 0 0;
}
.conversation-entry-bot-persistent .conversation-entry-bot-main {
box-shadow: none;
border-radius: 0;
}
.query-field-suggestions {
box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .07);
border: solid #e2e2e2;
border-width: 1px 0;
background: #fff;
color: #3b3b3b;
position: absolute;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
top: 100%;
width: 100%;
}
.query-field-suggestions--flip {
box-shadow: 0 -15px 30px 0 rgba(0, 0, 0, .07);
top: auto;
bottom: 100%;
}
.query-field-suggestion {
font-size: 13px;
padding: 10px 15px;
cursor: default;
}
.query-field-suggestion--active, .query-field-suggestion:hover {
background: #eee;
}
.active_chat {
background: #e8f6ff;
}
.incoming_msg_img {
display: inline-block;
/* width: 10%; */
width: auto;
}
/* .incoming_msg_img img {
width: 100%;
} */
.received_msg {
display: inline-block;
padding: 0 0 0 10px;
vertical-align: top;
width: 88%;
}
.received_withd_msg .received_msg_inner {
/* background: #ebebeb none repeat scroll 0 0; */
background: #fff;
border-radius: 11px 11px 11px 0;
color: #555;
font-size: 14px;
margin: 0;
padding: 8px 10px 8px 12px;
width: 100%;
box-shadow: 0 0 10px rgba(0,0,0,.1);
}
.time_date {
color: #747474;
display: block;
font-size: 11px;
margin: 3px 0px 0 10px;
}
.received_withd_msg {
width: 80%;
}
.mesgs{
float: left;
padding: 30px 15px 0 25px;
width:70%;
}
.sent_msg .sent_msg_inner{
background: #003b4d;
border-radius: 12px 15px 0px 15px;
font-size: 14px;
margin: 0;
color: #fff;
padding: 8px 10px 8px 12px;
width: 100%;
box-shadow: 0 0 10px rgba(0,0,0,.1);
}
.sent_msg p, .received_msg p {
margin-bottom: 0px!important;
}
.outgoing_msg {
overflow: hidden;
margin: 26px 0 26px;
}
.sent_msg {
float: right;
width: 70%;
}
.input_msg_write input {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: medium none;
color: #4c4c4c;
font-size: 15px;
min-height: 48px;
width: 100%;
outline:none;
}
.type_msg {
border-top: 1px solid #c4c4c4;
position: relative;
}
.msg_send_btn {
background: #05728f none repeat scroll 0 0;
border:none;
border-radius: 50%;
color: #fff;
cursor: pointer;
font-size: 15px;
height: 33px;
position: absolute;
right: 0;
top: 11px;
width: 33px;
}
.messaging {
padding: 0 0 50px 0;
}
.scrollable::-webkit-scrollbar-button {
width: 5px;
height: 0;
}
.scrollable::-webkit-scrollbar, .scrollable::-webkit-scrollbar-button {
width: 5px;
height: 0;
}
.scrollable::-webkit-scrollbar-corner {
background: 0 0;
}
.scrollable::-webkit-scrollbar-thumb {
background: #ccc;
}
.scrollable::-webkit-scrollbar-track {
background: #eaeaea;
}
.conversation-log__scrollable:after {
content: '';
display: block;
height: 60px;
}
/* .msg_history {
height: 516px;
overflow-y: auto;
} */
function expand() {
var expandHeight = document.querySelector(".chatbot-wrapper");
var collapse = document.querySelector(".button-collapse");
var increase = document.querySelector(".button-increase");
var content = document.querySelector(".conversation-ui-content");
var icon = document.querySelector(".change-icon");
document.querySelector(".header-title").innerHTML = "Get Instant Answers:"
expandHeight.classList.add("expand-chat");
collapse.classList.remove("d-none");
increase.classList.remove("d-none");
content.classList.remove("d-none");
// icon.classList.remove("fa-microphone");
icon.classList.toggle("fa-paper-plane");
}
function minimizeHeight() {
var expandHeight = document.querySelector(".chatbot-wrapper");
var collapse = document.querySelector(".button-collapse");
var increase = document.querySelector(".button-increase");
expandHeight.classList.remove("expand-chat");
expandHeight.classList.remove("increaseHeight");
collapse.classList.add("d-none");
increase.classList.add("d-none");
}
function increaseHeight() {
var expandHeight = document.querySelector(".chatbot-wrapper");
// expandHeight.classList.remove("expand-chat");
expandHeight.classList.toggle("increaseHeight");
}
function closeChat() {
var closeChat = document.querySelector("#chatbot");
var closeChat2 = document.querySelector(".chatbot2")
var expandHeight = document.querySelector(".chatbot-wrapper");
var toggleChat = document.querySelector(".toggleChat");
closeChat.classList.add("d-none");
closeChat2.classList.remove("d-none");
// closeChat.classList.toggle("stage-4");
// expandHeight.classList.remove("expand-chat");
// toggleChat.classList.remove("d-none");
// var collapse = document.querySelector(".button-collapse") ;
// var increase = document.querySelector(".button-increase") ;
// var close = document.querySelector(".button-close") ;
// collapse.classList.add("d-none");
// increase.classList.add("d-none");
// close.classList.toggle("d-none");
}
function openChat() {
var closeChat2 = document.querySelector(".chatbot2");
var closeChat = document.querySelector("#chatbot");
closeChat2.classList.add("d-none");
closeChat.classList.remove("d-none");
}
