We would like to share How to create live chat box in website. Lets go to see how to create. Live chat is easy to use for get quick information. This chat is simple and easy to use.
Go to see coding and demo video. See the demo video get quick knowledge. Download the code.
Html code:
<button class="chatbox-open">
<i class="fa fa-comment fa-2x" aria-hidden="true"></i>
</button>
<button class="chatbox-close">
<i class="fa fa-close fa-2x" aria-hidden="true"></i>
</button>
<section class="chatbox-popup">
<header class="chatbox-popup__header">
<aside style="flex:3">
<i class="fa fa-user-circle fa-4x chatbox-popup__avatar" aria-hidden="true"></i>
</aside>
<aside style="flex:8">
<h1>sanwebcorner</h1>
</aside>
<aside style="flex:1">
<button class="chatbox-maximize"><i class="fa fa-window-maximize" aria-hidden="true"></i></button>
</aside>
</header>
<main class="chatbox-popup__main">
Tell me what can i help you<br>
</main>
<footer class="chatbox-popup__footer">
<aside style="flex:1;color:#888;text-align:center;">
<i class="fa fa-camera" aria-hidden="true"></i>
</aside>
<aside style="flex:10">
<textarea type="text" placeholder="Type your message here..." autofocus></textarea>
</aside>
<aside style="flex:1;color:#888;text-align:center;">
<i class="fa fa-paper-plane" aria-hidden="true"></i>
</aside>
</footer>
</section>
<section class="chatbox-panel">
<header class="chatbox-panel__header">
<aside style="flex:3">
<i class="fa fa-user-circle fa-3x chatbox-popup__avatar" aria-hidden="true"></i>
</aside>
<aside style="flex:6">
<h1>Sussanah Austin</h1> Agent (Online)
</aside>
<aside style="flex:3;text-align:right;">
<button class="chatbox-minimize"><i class="fa fa-window-restore" aria-hidden="true"></i></button>
<button class="chatbox-panel-close"><i class="fa fa-close" aria-hidden="true"></i></button>
</aside>
</header>
<main class="chatbox-panel__main" style="flex:1">
What can i help you
</main>
<footer class="chatbox-panel__footer">
<aside style="flex:1;color:#888;text-align:center;">
<i class="fa fa-camera" aria-hidden="true"></i>
</aside>
<aside style="flex:10">
<textarea type="text" placeholder="Type your message here..." autofocus></textarea>
</aside>
<aside style="flex:1;color:#888;text-align:center;">
<i class="fa fa-paper-plane" aria-hidden="true"></i>
</aside>
</footer>
</section>
Css code:
$base-height: 377px;
$base-dimension: 16px;
$base-border-radius: 12px;
$base-button-size: 52px;
$primary-color: purple;
$accent-color: #f6f7f9;
$background-color: #fff;
$font-color: #888;
@mixin chabox-container {
display: flex;
position: absolute;
box-shadow: 5px 5px 25px 0 rgba(46, 61, 73, 0.2);
flex-direction: column;
}
@mixin chatbox-header {
box-sizing: border-box;
display: flex;
width: 100%;
padding: $base-dimension;
color: $background-color;
background-color: purple;
align-items: center;
justify-content: space-around;
}
@mixin chatbox-main {
box-sizing: border-box;
width: 100%;
padding: calc(2 * #{$base-dimension}) #{$base-dimension};
line-height: calc(#{$base-dimension} + #{$base-dimension} / 2);
color: $font-color;
text-align: center;
}
@mixin chatbox-footer {
box-sizing: border-box;
display: flex;
width: 100%;
padding: $base-dimension;
border-top: 1px solid #ddd;
align-items: center;
justify-content: space-around;
}
@mixin chatbox-floating-button {
position: fixed;
bottom: 0;
right: 0;
width: $base-button-size;
height: $base-button-size;
color: $background-color;
background-color: $primary-color;
background-position: center center;
background-repeat: no-repeat;
box-shadow: 12px 15px 20px 0 rgba(46, 61, 73, 0.15);
border: 0;
border-radius: 50%;
cursor: pointer;
}
body {
margin: 0;
padding: 0;
font-family: "Lato", sans-serif;
background-color: $accent-color;
}
h1 {
margin: 0;
font-size: $base-dimension;
line-height: 1;
}
button {
color: inherit;
background-color: transparent;
border: 0;
outline: 0 !important;
cursor: pointer;
&.chatbox-open {
@include chatbox-floating-button;
margin: $base-dimension;
}
&.chatbox-close {
@include chatbox-floating-button;
display: none;
margin: $base-dimension calc(2 * #{$base-dimension} + #{$base-button-size})
$base-dimension $base-dimension;
}
}
textarea {
box-sizing: border-box;
width: 100%;
margin: 0;
height: calc(#{$base-dimension} + #{$base-dimension} / 2);
padding: 0 calc(#{$base-dimension} / 2);
font-family: inherit;
font-size: $base-dimension;
line-height: calc(#{$base-dimension} + #{$base-dimension} / 2);
color: $font-color;
background-color: none;
border: 0;
outline: 0 !important;
resize: none;
overflow: hidden;
&::placeholder {
color: $font-color;
}
}
.chatbox-popup {
@include chabox-container;
display: none;
bottom: calc(2 * #{$base-dimension} + #{$base-button-size});
right: $base-dimension;
width: $base-height;
height: auto;
background-color: $background-color;
border-radius: $base-dimension;
.chatbox-popup__header {
@include chatbox-header;
border-top-right-radius: $base-border-radius;
border-top-left-radius: $base-border-radius;
.chatbox-popup__avatar {
margin-top: -32px;
background-color: $primary-color;
border: 5px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
}
}
.chatbox-popup__main {
@include chatbox-main;
}
.chatbox-popup__footer {
@include chatbox-footer;
border-bottom-right-radius: $base-border-radius;
border-bottom-left-radius: $base-border-radius;
}
}
.chatbox-panel {
@include chabox-container;
display: none;
top: 0;
right: 0;
bottom: 0;
width: $base-height;
background-color: $background-color;
.chatbox-panel__header {
@include chatbox-header;
flex: 0 0 auto;
}
.chatbox-panel__main {
@include chatbox-main;
flex: 1 1 auto;
}
.chatbox-panel__footer {
@include chatbox-footer;
flex: 0 0 auto;
}
}
Javascript code:
const chatbox = jQuery.noConflict();
chatbox(() => {
chatbox(".chatbox-open").click(() =>
chatbox(".chatbox-popup, .chatbox-close").fadeIn()
);
chatbox(".chatbox-close").click(() =>
chatbox(".chatbox-popup, .chatbox-close").fadeOut()
);
chatbox(".chatbox-maximize").click(() => {
chatbox(".chatbox-popup, .chatbox-open, .chatbox-close").fadeOut();
chatbox(".chatbox-panel").fadeIn();
chatbox(".chatbox-panel").css({ display: "flex" });
});
chatbox(".chatbox-minimize").click(() => {
chatbox(".chatbox-panel").fadeOut();
chatbox(".chatbox-popup, .chatbox-open, .chatbox-close").fadeIn();
});
chatbox(".chatbox-panel-close").click(() => {
chatbox(".chatbox-panel").fadeOut();
chatbox(".chatbox-open").fadeIn();
});
});
0 Comments