4 Mẫu Code Chèn Hotline – Facebook – Zalo Vào Website

Ở bài trước mình cũng có chia sẻ một mẫu code chèn hotline – facebook – zalo, bài này mình tiếp tục chia sẻ tiếp tới mọi người 4 mẫu code nữa đẹp hơn.

Thay vì dùng các plugin gây nặng về website thì tự code sẽ giúp các bạn tối ưu hơn. Các file javaScript mình khuyên các bạn nên để ở footer nhé.

Nếu như các bạn không chuyên về code hay trong quá trình làm muốn tùy biến khác thì có thể liên hệ với mình. Phí cũng chỉ bằng cốc trà sữa ủng hộ mình dể duy trì server ạ.

Hướng Dẫn Code Chèn Hotline – Zalo – Facebook Vào Website

Bước 1: File html thì các bạn lưu footer.php.

Các bạn truy cập vào trang quản trị Chọn Giao diện ➱ Sửa giao diện ➱ Tìm file  footer.php và chèn đoạn code dưới đây vào trước thẻ </body> nhé.

Bước 2: File Css thì các bạn lưu lại trong tùy biến của giao diện ở phần Css bổ sung. Mỗi giao diện sẽ có cách hiển thị khác chút nhưng chắc chắn có nhé.

Bước 3: Một số theme có phần bạn thêm tùy chỉnh javaScript và chọn vị trí hiển thị. Nếu không có thì các bạn có thể lưu lại thành 1 file trên hosting và dẫn file đó vào footer.php là được.

Bước 4: Các tên file ảnh trong code các bạn thay hết thành đường link của ảnh đó.

Bước 5: Các bạn check lại xem đã hiển thị oke chưa, có thiếu thư viện gì không? Nếu có thì bạn thêm lần lượt từng thư viện này vào website.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

Mẫu Chèn Code Hotline 1

    <div class="containers">
        <div class="menu-toggle">
            <span class="fa fa-plus"></span>
        </div>
        
        <div class="menu-round">
            <div class="btn-app">
                <a href="https://bit.ly/3lGliU5">
                    <div class="colorf"><div class="fa fa-twitter"></div></div>
                </a>
            </div>
            <div class="btn-app">
                <a href="https://www.facebook.com/Sharecs.net">
                    <div class="colorf"><div class="fa fa-facebook"></div></div>
                </a>
            </div>
            <div class="btn-app">
                <a href="tel:0123456789">
                    <div class="colorf"><div class="fa fa-phone"></div></div>
                </a>
            </div>
        </div>
        
        <div class="menu-line">
            <div class="btn-app">
                <a href="https://bit.ly/3lGliU5">
                    <div class="colorf"><div class="fa fa-map-marker"></div></div>
                </a>
            </div>
            <div class="btn-app">
                <a href="mailto:sharecs.net@gmail.com">
                    <div class="colorf"><div class="fa fa-envelope"></div></div>
                </a>
            </div>
            <div class="btn-app">
                <a href="https://bit.ly/3lGliU5">
                    <div class="colorf"><div class="fa fa-video-camera"></div></div>
                </a>
            </div>
            <div class="btn-app">
                <a href="https://bit.ly/3lGliU5">
                    <div class="colorf"><div class="fa fa-soundcloud"></div></div>
                </a>
            </div>
            <div class="btn-app">
                <a href="https://bit.ly/3lGliU5">
                    <div class="colorf"><div class="fa fa-graduation-cap"></div></div>
                </a>
            </div>
            <div class="btn-app">
                <a href="https://bit.ly/3lGliU5">
                    <div class="colorf"><div class="fa fa-image"></div></div>
                </a>
            </div>
            <div class="btn-app">
                <a href="https://bit.ly/3lGliU5">
                    <div class="colorf"><div class="fa fa-vine"></div></div>
                </a>
            </div>
        </div>
    </div>

.containers {
  position: fixed;
  bottom: 1em;
  right: 1em;
}
.colorf{
    color: #ffffff !important;
}
.menu-toggle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #1ef0a0;
  box-shadow: 4px 4px 2px 1px rgba(0, 0, 0, 0.2);
  position: absolute;
  z-index: 5;
  bottom: 0;
  right: 0;
  display: table;
  text-align: center;
}
.menu-toggle .fa {
  color: #fff;
  font-size: 2em;
  display: table-cell;
  vertical-align: middle;
  transition: 0.4s;
}
.menu-toggle.open .fa {
  transform: rotate(135deg);
}

.btn-app {
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  position: absolute;
  background-color: #4644fd;
  color: #fff;
  text-align: center;
}
.btn-app .fa {
  line-height: 2.5em;
}

.open .btn-app {
  box-shadow: 4px 4px 2px 1px rgba(0, 0, 0, 0.2);
}

.menu-round {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 3;
}
.menu-round .btn-app {
  bottom: 0.25em;
  right: 0.25em;
  transition: 0.4s;
}
.menu-round.open .btn-app:nth-of-type(1) {
  right: 0.5em;
  bottom: 4.25em;
  transition-delay: 0.2s;
}
.menu-round.open .btn-app:nth-of-type(2) {
  right: 3.5em;
  bottom: 3.5em;
  transition-delay: 0.1s;
}
.menu-round.open .btn-app:nth-of-type(3) {
  right: 4.25em;
  bottom: 0.5em;
}

.menu-line {
  position: absolute;
  z-index: 2;
}
.menu-line .btn-app {
  bottom: 9px;
  right: 0.5em;
  transition: 0.3s;
  transition-delay: 0.2s;
}
.menu-line.open .btn-app:nth-of-type(1) {
  bottom: 4.25em;
}
.menu-line.open .btn-app:nth-of-type(1) {
  bottom: 7.25em;
}
.menu-line.open .btn-app:nth-of-type(2) {
  bottom: 10.25em;
}
.menu-line.open .btn-app:nth-of-type(3) {
  bottom: 13.25em;
}
.menu-line.open .btn-app:nth-of-type(4) {
  bottom: 16.25em;
}
.menu-line.open .btn-app:nth-of-type(5) {
  bottom: 19.25em;
}
.menu-line.open .btn-app:nth-of-type(6) {
  bottom: 22.25em;
}
.menu-line.open .btn-app:nth-of-type(7) {
  bottom: 25.25em;
}

$(".menu-toggle").click(function () {
    $(".menu-toggle").toggleClass("open");
    $(".menu-line").toggleClass("open");
    $(".menu-round").toggleClass("open");
    
});

Mẫu Chèn Code Hotline 2

    <div class="containers">
        <div class="menu-toggle">
            <img src="mess.png">
        </div>
        
        <div class="menu-line">
            <div class="btn-app">
                <a href="https://bit.ly/3lGliU5">
                    <img src="zalo-sharecs.png" class="iconf">
                    <span class="tooltip">Lên hệ Zalo</span>
                </a>
            </div>
            <div class="btn-app">
                <a href="https://bit.ly/3lGliU5">
                    <img src="fanpage-facebook-sharecs.png" class="iconf">
                    <span class="tooltip">Lên hệ Facebook</span>
                </a>
            </div>
            <div class="btn-app">
                <a href="https://bit.ly/3lGliU5">
                    <img src="icon-map-sharecs.png" class="iconf">
                    <span class="tooltip">Xem địa chỉ văn phòng</span>
                </a>
            </div>
            <div class="btn-app">
                <a href="mailto:sharecs.net@gmail.com">
                    <img src="icon-mail-sharecs.png" class="iconf">
                    <span class="tooltip">Email hỗ trợ</span>
                </a>
            </div>
            <div class="btn-app">
                <a href="tel:097000008">
                    <img src="icon-phone-sharecs.png" class="iconf">
                    <span class="tooltip">Hotline</span>
                </a>
            </div>
        </div>
    </div>

.containers {
  position: fixed;
  bottom: 1em;
  right: 1em;
  z-index: 9999;
}
.menu-toggle {
  position: absolute;
  bottom: 0;
  right: 0;
  display: table;
  text-align: center;
  z-index: 9998;
  width: 75px;
}

.btn-app {
  width: 48px;
  height: 48px;
  position: absolute;
  
  text-align: center;
}

.btn-app, .iconf{
  border-radius: 50%;
}

.menu-line {
  position: absolute;
  z-index: 9997;
}
.menu-line .btn-app {
  bottom: 13px;
  right: 6px;
  transition: 0.3s;
  transition-delay: 0.2s;
  width: 47px;
  height:auto;
}

.menu-line.open .btn-app:nth-of-type(1) {
  margin-bottom: 65px;
}
.menu-line.open .btn-app:nth-of-type(2) {
  margin-bottom: 128px;
}
.menu-line.open .btn-app:nth-of-type(3) {
  margin-bottom: 191px;
}
.menu-line.open .btn-app:nth-of-type(4) {
  margin-bottom: 254px;
}
.menu-line.open .btn-app:nth-of-type(5) {
  margin-bottom: 317px;
}


.btn-app .tooltip {
  display: inline-block;
  position: absolute;
  background-color: #118087;
  padding: 8px 15px;
  border-radius: 3px;
  margin-top: 8px;
  right: 60px;
  opacity: 0;
  visibility: hidden;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: #ffffff;
  width: max-content;
}
.btn-app .tooltip:before {
  content: "";
  display: block;
  position: absolute;
  right: -4px;
  top: 10px;
  transform: rotate(45deg);
  width: 10px;
  height: 10px;
  background-color: inherit;
}
.btn-app:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

// Nếu bạn dùng wordpress thì có thể code js bị lỗi thì bạn thay $ -> jQuery là oke nhé

$ (".menu-toggle").click(function () {
    $(".menu-toggle").toggleClass("open");
    $(".menu-line").toggleClass("open");
    $(".menu-round").toggleClass("open"); 
});

Mẫu Chèn Code Hotline 3

    <div class="containers">
        <div class="wrapper">
          <div class="item menu">
            <div class="linee linee1"></div>
            <div class="linee linee2"></div>
            <div class="linee linee3"></div>
          </div>
          <div class="item">
            <i class="fa fa-angle-up"></i>
          </div>
          

          <div class="nav-items items1">
            <a href="https://bit.ly/3lGliU5">
                <img src="zalo-sharecs.png" class="iconf">
            </a>
          </div>
          <div class="nav-items items2">
            <a href="https://bit.ly/3lGliU5">
                <img src="fanpage-facebook-sharecs.png" class="iconf">
            </a>
          </div>
          <div class="nav-items items3">
            <a href="tel:097000008">
                <img src="icon-phone-sharecs.png" class="iconf">
            </a>
          </div>
          <div class="nav-items items4">
            <a href="mailto:sharecs.net@gmail.com">
                <img src="icon-mail-sharecs.png" class="iconf">
            </a>
          </div>
          <div class="box">
            <div class="box-line box-line1"></div>
            <div class="box-line box-line2"></div>
            <div class="box-line box-line3"></div>
            <div class="box-line box-line4"></div>
          </div>
        </div>
    </div>

/* start of the css code*/
.containers {
  position: fixed;
  bottom: 4em;
  right: 1em;
}
/* main wrapper and its layout */
.iconf{
  border-radius: 50%;
}
.wrapper {
  width: 120px;
  border-radius: 30px;
  height: 50px;
  background: white;
  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.281);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  z-index: 5;
  position: relative;
}
.item {
  cursor: pointer;
}
.fa{
  font-size: 33px !important;
  color: rgb(201, 198, 198)!important;
}
.linee {
  width: 20px;
  height: 3px;
  background: rgb(201, 198, 198);
  margin-top: 3px;
  border-radius: 5px;
  transition: all 0.2s;
}
.linee1 {
  width: 15px;
  transform: translateX(5px);
}
.linee1::before {
  content: "";
  display: block;
  transform: translateX(-5px);
  width: 3px;
  height: 3px;
  background: rgb(201, 198, 198);
  transition: width 0.2s ease 0.1s, transform 0.2s;
}
.linee3::after {
  content: "";
  display: block;
  transform: translateX(17px);
  width: 0px;
  height: 3px;
  background: rgb(201, 198, 198);
  transition: width 0.2s ease 0.1s;
}
.linee3 {
  width: 13px;
}

.nav-items {
  width: 38px;
  height: 38px;
  background: rgb(246, 54, 54);
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.212);
  transform: scale(0);
  transition: transform 0.1s cubic-bezier(0.23, -0.47, 0.58, -0.63);
}
.nav-items:hover {
  transform: scale(1.1);
  transition-timing-function: 0.1s;
}
.items1 {
  top: -100%;
  left: 5%;
}
.items2 {
  top: -50%;
  left: -39%;
  transition-delay: 0.1s;
}
.items3 {
  top: 80%;
  left: -39%;
  transition-delay: 0.2s;
}
.items4 {
  top: 130%;
  left: 5%;
  transition-delay: 0.3s;
}
.box {
  width: 100%;
  position: absolute;
  top: 110%;
  left: 0;
  height: 0px;
  overflow: hidden;
  background: white;
  display: grid;
  grid-gap: 10px;
  transition: height 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);

  z-index: 0;
}
.box-line {
  width: 100px;
  height: 10px;
  background: rgb(201, 198, 198);
  border-radius: 10px;
  opacity: 0;
  z-index: 0;
  transition: opacity 0s;
}
.box-line:nth-child(even) {
  width: 130px;
}

/* toggle classes */
.box-show {
  height: 150px;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.226);
  padding: 10px;
  transition-duration:0.2s;
}
.box-line-show {
  opacity: 1;
  transition-duration:.1s;
}

.show-menu {
  transform: scale(1);
  transition: transform 0.5s cubic-bezier(0.23, -0.47, 0.58, -0.63);
}

/*hover effect */
.menu:hover .linee1 {
  width: 10px;
  transform: translateX(0px);
}
.menu:hover .linee1::before {
  width: 0px;
  transform: translateX(0px);
}
.menu:hover .linee3 {
  width: 15px;
}
.menu:hover .linee3::after {
  content: "";
  display: block;
  transform: translateX(17px);
  width: 3px;
  height: 3px;
  background: rgb(201, 198, 198);
  transition: width 0.2s ease 0.1s;
}


/* inspired by https://sharecs.net/tag/code-hotline-zalo-facebook */

document.querySelector(".menu").addEventListener("click", () => {
  for (let i = 0; i <= 3; i++) {
    document.querySelector(".box").classList.remove("box-show");
    document
      .getElementsByClassName("nav-items")
      [i].classList.toggle("show-menu");
    document
      .getElementsByClassName("box-line")
      [i].classList.remove("box-line-show");
  }
});

Mẫu Chèn Code Hotline 4

    <div class="containers">
        
      <div class="widget">
        <div class="menu">
          <div class="toggle"><i></i><i></i></div>
          <ul class="list">
            <li>
              <a href="https://bit.ly/3lGliU5">
                <img src="zalo-sharecs.png" class="iconf">
              </a>
            </li>
            <li>
              <a href="https://bit.ly/3lGliU5">
                  <img src="fanpage-facebook-sharecs.png" class="iconf">
              </a>
            </li>
            <li>
              <a href="tel:097000008">
                  <img src="icon-phone-sharecs.png" class="iconf">
              </a>
            </li>
            <li>
              <a href="mailto:sharecs.net@gmail.com">
                  <img src="icon-mail-sharecs.png" class="iconf">
              </a>
            </li>
            <li>
              <a href="https://bit.ly/3lGliU5">
                  <img src="icon-map-sharecs.png" class="iconf">
              </a>
            </li>
            <li>
               <img src="sharecs-scroll-up-40.png" class="iconf">
            </li>
          </ul>
        </div>
      </div>
    </div>

.containers {
  position: fixed;
  bottom: 4em;
  right: 1em;
}
.iconf{
  border-radius: 50%;
  width: 40px;
  height: 40px;
}
.widget {
  display: flex;
  justify-content: flex-end;
  border-radius: 10px;
  margin-right: 30px !important;
}
.widget.active .menu {
  width: 344px;
}
.widget.active .menu .toggle {
  right: 296px;
}
.widget.active .menu .toggle i {
  width: 8px;
  transition: width 400ms cubic-bezier(0.6, 0, 0.45, 0.99), transform 1000ms cubic-bezier(0.6, 0, 0.45, 0.99) 300ms, top 200ms cubic-bezier(0.6, 0, 0.45, 0.99) 200ms, bottom 200ms cubic-bezier(0.6, 0, 0.45, 0.99) 200ms;
}
.widget.active .menu .toggle i:first-of-type {
  top: 19px;
  transform: rotate(45deg) translate(-1px, -2px);
}
.widget.active .menu .toggle i:last-of-type {
  bottom: 19px;
  transform: rotate(-45deg) translate(-1px, 2px);
}
.widget.active .menu .list {
  visibility: visible;
  flex-direction: row-reverse;
}
.widget.active .menu .list li {
  transform: scale(1);
}
.widget .menu {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  border-radius: 100px;
  background-color: #4C5042;
  transform: translate(28px, -50%);
  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.7);
  transition: 650ms cubic-bezier(0.79, 0, 0.22, 1);
}
.widget .menu .toggle {
  width: 40px;
  height: 40px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  border-radius: 100px;
  cursor: pointer;
  z-index: 100;
  background-color: #4C5042;
  transition: 600ms cubic-bezier(0.79, 0, 0.22, 1);
}
.widget .menu .toggle:hover {
  background-color: #3C4134;
}
.widget .menu .toggle i {
  width: 12px;
  height: 2px;
  position: absolute;
  display: flex;
  border-radius: 100px;
  background-color: #FFF;
  transition: width 400ms cubic-bezier(0.6, 0, 0.45, 0.99), transform 600ms cubic-bezier(0.6, 0, 0.45, 0.99), top 600ms cubic-bezier(0.6, 0, 0.45, 0.99) 600ms, bottom 600ms cubic-bezier(0.6, 0, 0.45, 0.99) 600ms;
}
.widget .menu .toggle i:first-of-type {
  top: 16px;
}
.widget .menu .toggle i:last-of-type {
  bottom: 16px;
}
.widget .menu .list {
  flex-direction: row;
  margin: 0;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  position: absolute;
}
.widget .menu .list li {
  width: 40px;
  height: 40px;
  margin-left: 8px;
  list-style: none;
  border-radius: 100px;
  background-color: #73776C;
  transform: scale(0);
  transition: 300ms cubic-bezier(0.37, 0.01, 0.43, 1.3);
  transition-delay: 300ms;
}
.widget .menu .list li:nth-child(1) {
  transition-delay: 50ms;
}
.widget .menu .list li:nth-child(2) {
  transition-delay: 100ms;
}
.widget .menu .list li:nth-child(3) {
  transition-delay: 150ms;
}
.widget .menu .list li:nth-child(4) {
  transition-delay: 200ms;
}
.widget .menu .list li:nth-child(5) {
  transition-delay: 250ms;
}
.widget .menu .list li:nth-child(6) {
  transition-delay: 300ms;
}

.dribbble {
  position: fixed;
  display: block;
  right: 24px;
  bottom: 24px;
}
.dribbble img {
  display: block;
  width: 76px;
}

const widget = document.querySelector('.widget')
const toggle = document.querySelector('.toggle')

toggle.addEventListener('click', () => {
  widget.classList.toggle('active')
})

Cảm ơn các bạn đã ghé thăm. Chúc các bạn thành công!