•  hiephib@gmail.com
  •  0974.080.227
  • Thiết kế web Hải Phòng giá rẻ - Bảo hành vĩnh viễn - Dịch vụ uy tín hàng đầu Hải Phòng

Gọi ngay hotline: 0974.080.227 - hoặc gửi email qua : hiephib@gmail.com
Bạn sẽ có được thông tin nhanh nhất về các bước thiết kế web, chi phí hàng năm cũng như những ưu đãi về giá, thủ tục và những gì cần phải chuẩn bị trước khi thiết kế web.

Tìm kiếm

Với website ngày nay, việc tạo ra các công cụ hỗ trợ bán hàng như chat trực tuyến, nút gọi điện thoại nhanh trên website là không thể thiếu được.

Sau đây mình xin hướng dẫn cách tạo 1 công cụ hỗ trợ chat trực tuyến rất hiệu quả cho website.

Đây là một công cụ Jquery đã nhúng sẵn ứng dụng chat zalo, facebook và nút bấm gọi trực tiếp được trình bày rất khoa học chạy dọc theo 2 bên website.

Cùng hiệu ứng Jquery đẹp.

Code jquery chat trực tuyến chạy động theo website

Đầu tiên bạn phải chền đoạn Jquery sau vào phần Head của website : 

<style rel="stylesheet">
@import url("https://fonts.googleapis.com/css?family=Roboto+Slab:400,700");

@media only screen and (min-device-width: 481px) and (max-device-width: 2000px){
.navhotline {
list-style: none;
padding: 0;
margin: 0;
background: #292929;
display: inline-block;
position: fixed;
bottom: 5%;
left:0%;
}
.navhotline li {
cursor: pointer;
margin-bottom: -1px;
width: 50px;
height: 60px;
line-height: 60px;
font-size: 18px;
font-family: "Roboto Slab", serif;
color: #ffffff;
}
.navhotline li div,
.navhotline li div {
position: absolute;
text-align: center;
animation-duration: 0.34s;
}
.navhotline li div {
margin-left: 50px;
text-align: center;
width: 140px;
}

.navhotline li div {
display: none;
z-index: 9999;
background: #ed1c24;
}

.navhotline li:hover > .slideInLeft {
display: inline-block;
background: #ed1c24;
}
.navhotline li:hover div {
background: #ed1c24;
}
.navhotline li:hover span {
background: #ed1c24;
}

.navhotline li .imgnone {
line-height: 60px;
width: 50px;
z-index: 9999;

}
.navhotline li .imgnone {
line-height: 60px;
width: 50px;
z-index: 9;
background: #292929;
}
.navhotline li .imgnone {
position: absolute;
text-align: center;
animation-duration: 0.34s;
}
.imgnone
{
line-height: 60px;
height: 60px;
background: #ed1c24;
}
.slideInLeft .imga
{

}
.imga
{
padding-top:20px;
z-index:999;
}
.linka
{
color:white;
font-weight:bold;

}
}

@media only screen and (min-device-width:230px) and (max-device-width: 480px){

.navhotline {
list-style: none;
padding: 0;
margin: 0;
background: #292929;
display: inline-block;
position: fixed;
bottom: 0%;
left:0%;
width:100%;
}

.navhotline li {
width:33%;
float:left;
}
.navhotline li div,
.navhotline li div {
position: absolute;
text-align: center;
animation-duration: 0.34s;
}
.navhotline li div {

text-align: center;
width: 100px;
line-height:60px;
}

.navhotline li div {
display: none;
z-index: 9999;
background: #ed1c24;
}

.navhotline li:hover > .slideInLeft {
display: inline-block;
background: #ed1c24;
}
.navhotline li:hover div {
background: #ed1c24;
}
.navhotline li:hover span {
background: #ed1c24;
}

.navhotline li .imgnone {
line-height: 60px;
width: 50px;
z-index: 9999;

}
.navhotline li .imgnone {
line-height: 60px;
width: 30%;
float:left;
z-index: 9;
background: #292929;
}
.navhotline li .imgnone {

text-align: center;
animation-duration: 0.34s;
}
.imgnone
{
line-height: 60px;
height: 60px;
background: #ed1c24;
}
.slideInLeft
{
width: 70%;
float:left;
}
.imga
{
padding-top:13px;
z-index:999;
}
.linka
{
color:white;
font-weight:bold;

}
}

</style>

<link rel='stylesheet' href='animate.min.css'>

Và file animate.min.css bạn có thể tải ở LInk : Link css

Tiếp theo : 

Cần chèn đoạn code sau nằm trong thẻ <body> của website: 

<ul class="navhotline">
<li>
<span class="imgnone">
<a target="_blank" href="/ https://zalo.me/0962958029">
<img class="imga" width="30px" src="/mobile_bot_nav_icon2.png"/>
</a>
</span>
<div class="animated slideInLeft">
<a class="linka" target="_blank" href="/ https://zalo.me/0962958029">
Chat Zalo
</a>
</div>
</li>
<li>
<span class="imgnone">
<a target="_blank" href="https://www.messenger.com/t/205866670028213?fbclid=IwAR2b66CE9a2Rk-YJXQ-8t9JQOXpp3hA9oQV490-K-eJiy_UVOyaz__mArb0">
<img class="imga" width="30px" src="/mobile_bot_nav_icon1.png"/>
</a>
</span>
<div class="animated slideInLeft">
<a class="linka" target="_blank" href="https://www.messenger.com/t/205866670028213?fbclid=IwAR2b66CE9a2Rk-YJXQ-8t9JQOXpp3hA9oQV490-K-eJiy_UVOyaz__mArb0">
Chat FB
</a>
</div>
</li>

<li>
<span class="imgnone">
<a target="_blank" href="tel:0936000111">
<img class="imga" width="30px" src="/call.png"/>
</a>
</span>
<div class="animated slideInLeft"><a class="linka" target="_blank" href="tel:0962958029">Gọi điện</a></div>
</li>
</ul>

Bạn có thể tải demo tại Link : http://www.thietketot.com/images/css-download/hotline-chat.zip