Thiết lập nút Call trên Landing page
Để thiết lập nút Call (Gọi điện) trên Landing page chúng ta làm như sau:
Bước 1: Copy đoạn code sau:

<a href="tel:02473093789" rel="nofollow"> <div class="a_hotline_absolute"> <div class="animated infinite zoomIn a_hotline_absolute_circle"></div> <div class="animated infinite animationPulse a_hotline_absolute_circle_fill"></div> <div class="animated infinite tada a_hotline_absolute_circle_img"> <i class="fa fa-phone"></i> </div> </div> </a> <style> .a_hotline_absolute { background-color: transparent; bottom: 0; cursor: pointer; height: 110px; position: fixed; left: 0; visibility: visible; width: 110px; z-index: 999; } .a_hotline_absolute_circle { width: 90px; height: 90px; top: 10px; left: 10px; position: absolute; background-color: transparent; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; border: 2px solid rgba(30, 30, 30, 0.4); border-color: #EF3C26; opacity: .5; } .a_hotline_absolute_circle_fill { width: 60px; height: 60px; top: 25px; left: 25px; position: absolute; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; border: 2px solid transparent; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; background-color: #F36F25; opacity: .75 !important; } .a_hotline_absolute_circle_img i { line-height: 32px; color: #fff; font-size: 26px; } .a_hotline_absolute_circle_img { width: 32px; height: 32px; top: 39px; left: 39px; position: absolute; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; border: 2px solid transparent; opacity: .7; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; background-color: #EF3C26; background-size: 70%; } @media all and (min-width: 601px) { .a_hotline_absolute { bottom: 30px; left: 30px; } } /* Animation */ @-webkit-keyframes animationPulse { 0% { -webkit-transform: scale(1.1); transform: scale(1.1) } 50% { -webkit-transform: scale(0.8); transform: scale(0.8) } 100% { -webkit-transform: scale(1.1); transform: scale(1.1) } } @keyframes animationPulse { 0% { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1) } 50% { -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8) } 100% { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1) } } .animationPulse { -webkit-animation-name: animationPulse; animation-name: animationPulse } </style>

Bước 2: Kéo thành phần Code Html vào cuối Landing page của bạn.



Bước 3: Resize Code html về kích thước nhỏ nhất, sau đó Double Click vào thành phần Code Html.


Bước 4: Paste đoạn code vừa copy bên trên vào, sửa số điện thoại trong đoạn code bằng số điện thoại bạn muốn gắn và chọn Lưu.


Bước 5: Cập nhật xuất bản


Như vậy bạn đã thiết lập thành công nút Call cho Landing page của mình. Và đây là kết quả:


Chúc các bạn thành công!
Bài viết cùng danh mục:
  • Hướng dẫn cài đặt mã theo dõi Facebook pixels và Google Analytics
  • Cài đặt favicon, tiêu đề trang và share Facebook
  • Thiết lập Livechat Tawk.to trên Landing page
  • Trợ lý thiết kế thông minh AI
  • Hướng dẫn sử dụng Notify
  • Thiết lập Facebook Customer Chat
  • Hướng dẫn gắn Code vào Landing page