"CHATBOAT"
Bootstrap 4.1.1 Snippet by kanikamadaan

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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");
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Login and Register Modal

Questions / Comments: