Tạo hộp liên hệ nhỏ gọn ở cạnh bên trượt dọc theo website

Đây là một widget thường dùng cho các website bán hàng, khách hàng có thể dễ dàng liên hệ với bạn thông qua Số điện thoại, Facebook hoặc Zalo.

Đặc biệt widget này có thêm nút đóng ẩn tiện ích không làm khách hàng cảm thấy khó chịu nếu vô tính widget này che mất sản phẩm.

Và cuối cùng tiện ích làm hoàn toàn bằng CSS nên sẽ không làm ảnh hưởng đến tốc độ tải trang của website bạn.

Cách thực hiện

1Vào Chủ đề >> Chỉnh sửa HTML và dán vào trước ]]></b:skin> thẻ đoạn CSS

/* Online Support */
.closebox{background:#fff;border:1px solid #eaeaea;position:absolute;top:-110px;right:-15px;cursor:pointer;font-size:18px;font-weight:700;color:#333;border-radius:100%;width:26px;z-index:9999;transition:background-color .3s ease 0s;transition:all .5s ease-in-out;transition-delay:.1s}
.closebox:hover{color:#ffe700;border:1px solid #ffe700}
ul,li{list-style-type:none;list-style-position:inside;margin:0;padding:0}
i[class^="icon-"]{display:inline-block;text-align:center}
.icon-icon-phone{background-image:url(https://3.bp.blogspot.com/-Iurp8lgL-tk/WkXZDEJch4I/AAAAAAAAFdg/D2riO4gzJT4EE2a8cAvneRtigtY2DxAmwCLcBGAs/s1600/call-phone.png);background-size:100%;width:24px;height:24px;margin-left:-4px}
.icon-icon-chat{background-image:url(https://3.bp.blogspot.com/-agNTEhbOzD0/WkXZC0-yTSI/AAAAAAAAFdc/3SHDjhZ-XXMNfYDmTX3yajN1Uj_djBlmQCLcBGAs/s1600/messenger.png);background-size:100%;width:20px;height:20px}
.icon-icon-zalo{background-image:url(https://2.bp.blogspot.com/-IL-s_NEy_xQ/WkXZC9QoKbI/AAAAAAAAFdY/Eha-8Dopjfo-O3-nJKQb75C8RSIhh26jgCLcBGAs/s1600/zalo.png);background-size:100%;width:18px;height:18px;border-radius:5px}
.widget.widget_why_choose_us_widget{padding:15px;background-color:#f0f0f0;border-radius:5px}
@media only screen and (max-width:768px){.online-support.online-support-product-details{bottom:32px}}
@media only screen{.online-support{display:block;position:fixed;left:150px;bottom:20px;z-index:999}.online-support .btn--support{font-size:16px;padding:5px 16px;border:0;background:#d51e29;color:#fff;display:none;-webkit-border-radius:6px 6px 0 0;-moz-border-radius:6px 6px 0 0;border-radius:6px 6px 0 0}.online-support .btn--support:active,.online-support .btn--support:hover,.online-support .btn--support:focus{font-size:16px;border:0}.online-support .dropup.force-open>.dropdown-2-menu{display:block!important}.online-support .dropup>.dropdown-2-menu{}.online-support .dropup>.dropdown-2-menu.dropdown-2-menu-right{left:auto!important;right:0!important}.online-support .dropdown-2-menu li{position:relative}.online-support .dropdown-2-menu li>a:hover,.online-support .dropdown-2-menu li>a:focus,.online-support .dropdown-2-submenu:hover>a{background:#ffe700}.online-support .dropdown-2-menu li a{padding:3px 10px 3px 10px;text-align:left;min-height:18px;line-height:18px;font-size:13px}.online-support .dropdown-2-menu li a i{vertical-align:middle;margin-right:8px}.online-support li.dropdown-2-submenu li a{padding-right:10px}.online-support .dropdown-2-submenu>a:after{display:none}.online-support .dropdown-2-submenu .dropdown-2-menu{right:0!important;top:auto!important;bottom:100%!important;left:auto!important;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.dropdown-2-submenu{position:relative}.dropdown-2-submenu>.dropdown-2-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.dropdown-2-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#ccc;margin-top:5px;margin-right:-10px}.dropdown-2-submenu:hover>a:after{border-left-color:#555}.dropdown-2-submenu.pull-left,.dropdown-2-submenu.pull-right{float:none}.dropdown-2-submenu.pull-left>.dropdown-2-menu{left:auto;right:0;bottom:100%;margin-left:10px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}}
.dropdown-2-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:140px;padding:5px 0;margin:2px 0 0;list-style:none;background-color:#fff;border:1px solid #ccc;border:1px solid rgba(0,0,0,.2);*border-right-width:2px;*border-bottom-width:2px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);-moz-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2);-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box}
.dropdown-2-menu.pull-right{right:0;left:auto}
.dropdown-2-menu .divider{*width:100%;height:1px;margin:9px 1px;*margin:-5px 0 5px;overflow:hidden;background-color:#e5e5e5;border-bottom:1px solid #fff}
.dropdown-2-menu li>a{display:block;padding:3px 20px;clear:both;font-weight:normal;line-height:20px;color:#333;white-space:nowrap}
.dropdown-2-menu li>a:hover,.dropdown-2-menu li>a:focus,.dropdown-2-submenu:hover>a{color:#fff;text-decoration:none;background-color:#0081c2;background-image:-moz-linear-gradient(top,#08c,#0077b3);background-image:-webkit-gradient(linear,0 0,0 100%,from(#08c),to(#0077b3));background-image:-webkit-linear-gradient(top,#08c,#0077b3);background-image:-o-linear-gradient(top,#08c,#0077b3);background-image:linear-gradient(to bottom,#08c,#0077b3);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc',endColorstr='#ff0077b3',GradientType=0)}
.dropdown-2-menu .active>a,.dropdown-2-menu .active>a:hover{color:#fff;text-decoration:none;background-color:#0081c2;background-image:-moz-linear-gradient(top,#08c,#0077b3);background-image:-webkit-gradient(linear,0 0,0 100%,from(#08c),to(#0077b3));background-image:-webkit-linear-gradient(top,#08c,#0077b3);background-image:-o-linear-gradient(top,#08c,#0077b3);background-image:linear-gradient(to bottom,#08c,#0077b3);background-repeat:repeat-x;outline:0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc',endColorstr='#ff0077b3',GradientType=0)}
.dropdown-2-menu .disabled>a,.dropdown-2-menu .disabled>a:hover{color:#999}
.dropdown-2-menu .disabled>a:hover{text-decoration:none;cursor:default;background-color:transparent;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}
.open{*z-index:1000}
.open>.dropdown-2-menu{display:block}
.pull-right>.dropdown-2-menu{right:0;left:auto}
.dropup .caret,.navbar-fixed-bottom .dropdown-2 .caret{border-top:0;border-bottom:4px solid #000;content:""}
.dropup .dropdown-2-menu,.navbar-fixed-bottom .dropdown-2 .dropdown-2-menu{top:auto;bottom:100%;margin-bottom:1px}
.dropdown-2-submenu{position:relative}
.dropdown-2-submenu>.dropdown-2-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px}
.dropdown-2-submenu:hover>.dropdown-2-menu{display:block}
.dropup .dropdown-2-submenu>.dropdown-2-menu{top:auto;bottom:0;margin-top:0;margin-bottom:-2px;-webkit-border-radius:5px 5px 5px 0;-moz-border-radius:5px 5px 5px 0;border-radius:5px 5px 5px 0}
.dropdown-2-submenu>a:after{display:block;float:right;width:0;height:0;margin-top:5px;margin-right:-10px;border-color:transparent;border-left-color:#ccc;border-style:solid;border-width:5px 0 5px 5px;content:" "}
.dropdown-2-submenu:hover>a:after{border-left-color:#fff}
.dropdown-2-submenu.pull-left{float:none}
.dropdown-2-submenu.pull-left>.dropdown-2-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px}
.dropdown-2 .dropdown-2-menu .nav-header{padding-right:20px;padding-left:20px}
body.single-product .online-support{bottom:32px!important}

2Cuối cùng bạn tìm đến thẻ </body> và dán đoạn code bên dưới vào trước thẻ đó

<!-- Online support -->
<div class="online-support" id="support-box">
<input class='closebox' onclick='document.getElementById(&#39;support-box&#39;).style.display=&#39;none&#39;;' title='Đóng' type='button' value='×'/>
    <div class="dropup force-open"><a class="btn btn--support" data-toggle="dropdown-2">Hỗ trợ trực tuyến</a>
        <ul class="dropdown-2-menu dropdown-2-menu-right dropdown-2--support">
            <li><a href="tel:01234567890"><i class="icon-icon-phone"></i> GỌI HOTLINE</a></li>
            <li><a href="//m.me/iristipsblog" target="_blank" rel="noopener"><i class="icon-icon-chat"></i> INBOX FB</a></li>
            <li><a href="//zalo.me/01234567890" target="_blank" rel="noopener"><i class="icon-icon-zalo"></i> CHAT ZALO</a></li>
        </ul>
    </div>
</div>

• DEMO

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm