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.
Đầ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
LBL_RELATEDNAME
Bài viết nổi bật
- Hướng dẫn cách tăng tương tác facebook cá nhân cực kỳ hiệu quả - 13/12/2018 20:39
- Hướng dẫn nhúng file videos và file nhạc audio trên google drive vào website - 04/06/2018 22:02
- Hướng dẫn cài đặt chat trực tuyến vào website - 01/06/2018 19:54
- Chia sẻ module kiểm tra tên miền cho joomla - 28/05/2018 22:47
- Hướng dẫn tạo nút bấm gọi ngay trên website - 24/05/2018 14:55