Nút liên hệ CTA là gì?
Call to Action là một yếu tố không thể thiếu trong bài viết hay bất cứ trang đích nào. Nút CTA đóng vai trò quan trọng trong việc thúc đẩy hành vi chuyển đổi của người dùng trên các nền tảng thương mại điện tử.
Call To Action (CTA) được hiểu đơn giản là lời kêu gọi hành động thể hiện trên website nhằm mục đích dẫn dắt, kêu gọi người đọc thực hiện một hành động click qua 1 trang khác.
Khi quá trình tiếp cận khách hàng đã hoàn thành, đã đến lúc bạn biến đối tượng khách hàng tiềm năng đó trở thành khách hàng thực sự cho doanh nghiệp. Cách làm thông tin ở đây, một lần nữa, là đặt ở cuối bài blog. Nhưng nếu bạn nghĩ vị trí đặt CTA này có thể không hiệu quả, hãy cân nhắc đặt nó ở trên trang sản phẩm. Dù trường hợp cụ thể nào, thì cần một vị trí tốt và lời kêu gọi hấp dẫn có thể làm tăng đáng kể tỷ lệ chuyển đổi của bạn.
Với số lượng phù hợp, không nhồi nhét, được thiết kế “nhìn là muốn click” cùng với thông điệp kêu gọi thu hút sẽ là công cụ mạnh mẽ giúp bạn điều hướng được khách hàng hay độc giả thực hiện hành động bạn mong muốn.
Mình kiểm tra nhiều nút liên hệ không dùng plugin ở góc màn hình, phức tạp có, đơn giản có, mình thích đơn giản gọn nhẹ, nhưng vẫn phải đầy đủ các yếu tố như có hiệu ứng động kích thích click, không dùng js để đỡ nặng web, test hồi lâu thấy code của Mr. Toản là ổn nhất (code gốc tại đây) nên xin phép chế lại 1 chút để gọn nhẹ hơn, demo ở góc phải màn hình luôn nhé!
Tạo nút liên hệ bằng HTML và CSS không dùng JS
Toàn bộ code như sau, phần style bạn có thể để vậy hoặc tách ra nhét vào style.css hay custom css tuỳ ý nhé :
<div class="vka-wrapper">
<input id="vkaCheckbox" type="checkbox" class="vka-checkbox">
<label class="vka" for="vkaCheckbox">
<i class="icon-cps-vka-menu"></i>
</label>
<div class="vka-wheel">
<a class="vka-action vka-action-1" href="https://goo.gl/maps/emErvApfnZCfWLKd8" rel="nofollow noreferrer" target="_blank" title="Tìm cửa hàng">
<div class="vka-button vka-button-1"><i class="icon-cps-local"></i></div>
</a>
<a class="vka-action vka-action-2" href="tel:0399955150" rel="nofollow noreferrer" title="Gọi trực tiếp">
<div class="vka-button vka-button-2"><i class="icon-cps-phone"></i></div>
</a>
<a class="vka-action vka-action-3" href="https://m.me/shopcon/" rel="nofollow noreferrer" target="_blank" title="Chat Facebook">
<div class="vka-button vka-button-3"><i class="icon-cps-facebook"></i></div>
</a>
<a class="vka-action vka-action-4" href="https://zalo.me/0399955150" target="_blank" rel="nofollow noreferrer" title="Chat Zalo">
<div class="vka-button vka-button-4"><i class="icon-cps-chat-zalo"></i></div>
</a>
</div>
</div>
<style>
.vka-wrapper {
position: fixed;
bottom: 5px;
right: 0;
z-index: 9999999;
}
.vka-checkbox {
display: none !important;
}
.vka {
width: 60px;
max-width: unset;
height: 60px;
display: flex !important;
justify-content: center;
align-items: center;
margin: 0;
border-radius: 50%;
background: #c31d1d;
box-shadow: 0 3px 6px rgb(0 0 0 / 16%), 0 3px 6px rgb(0 0 0 / 23%);
position: absolute;
right: 10px;
bottom: 10px;
z-index: 1000;
overflow: hidden;
transform: rotate( 0deg );
-webkit-transition: all .15s cubic-bezier(.15,.87,.45,1.23);
transition: all .15s cubic-bezier(.15,.87,.45,1.23);
}
.vka-checkbox:checked~.vka {
-webkit-transition: all .15s cubic-bezier(.15,.87,.45,1.23);
transition: all .15s cubic-bezier(.15,.87,.45,1.23);
width: 30px;
height: 30px;
right: 26px;
bottom: 35px;
}
[class*=icon-cps-] {
display: inline-block;
vertical-align: middle;
background-image: url(https://shopcon.vn/wp-content/uploads/2021/09/img-nut-lien-he3.png)!important;
background-repeat: no-repeat;
background-size: 148px;
}
.icon-cps-vka-menu {
width: 50px;
height: 50px;
margin: 0 !important;
background-size: 200px;
background-position: -155px 0;
}
.vka-checkbox:checked~.vka .icon-cps-vka-menu {
width: 20px;
height: 20px;
margin: 0;
background-size: 100px;
background-position: -79px -29px;
}
.vka-wheel {
position: absolute;
bottom: 15px;
right: 18px;
transform: scale(0);
transform-origin: bottom right;
transition: all .3s ease;
z-index: 12;
}
.vka-checkbox:checked~.vka-wheel {
transform: scale(1);
}
.vka-wheel .vka-action {
display: flex;
align-items: center;
font-size: 14px;
font-weight: 700;
color: #fff;
position: absolute;
text-decoration: none;
}
.vka-wheel .vka-action:hover {
transform: scale(1.1);
}
.vka-wheel .vka-action-1 {
bottom: 225px;
right: 0;
}
.vka-button {
width: 45px;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
float: left;
padding: 4px;
border-radius: 50%;
background: #0f1941;
box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
font-size: 24px;
color: White;
transition: all 1s ease;
overflow: hidden;
}
.icon-cps-local {
width: 30px;
height: 30px;
background-position: -5px -43px;
}
.icon-cps-mail {
width: 30px;
height: 30px;
background-position: -8px -5px;
}
.icon-cps-facebook {
width: 30px;
height: 30px;
background-position: -80px -43px;
}
.vka-wheel .vka-button-1 {
background: #0f9d58;
}
.vka-wheel .vka-action-2 {
bottom: 170px;
right: 0;
}
.vka-wheel .vka-button-2 {
background: #fb0;
}
.icon-cps-phone {
width: 30px;
height: 30px;
background-position: -42px -45px;
}
.vka-wheel .vka-action-3 {
right: 0;
bottom: 115px;
cursor: pointer;
}
.vka-wheel .vka-button-3 {
background: #006AFF;
}
.vka-wheel .vka-action-4 {
right: 0;
bottom: 60px;
}
.vka-wheel .vka-button-4 {
background: #2f82fc;
}
.icon-cps-chat-zalo {
width: 30px;
height: 30px;
background-position: -47px -5px;
background-size: 155px;
}
.hidden {
display: none!important;
}
.align-items-center {
-ms-flex-align: center!important;
align-items: center!important;
-ms-flex-pack: distribute!important;
justify-content: space-around!important;
display: -ms-flexbox!important;
display: flex!important;
-webkit-box-align: center!important;
-ms-flex-align: center!important;
align-items: center!important;
}
.vka-checkbox:not(:checked)~.vka {
animation-name: zoom;
-webkit-animation-name: zoom;
animation-delay: 0s;
-webkit-animation-delay: 0s;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
cursor: pointer;
box-shadow: 0 0 0 0 #c31d1d;
}
@-webkit-keyframes tada {
0% {
-webkit-transform: scale(1);
transform: scale(1)
}
10%,20% {
-webkit-transform: scale(.9) rotate(-3deg);
transform: scale(.9) rotate(-3deg)
}
30%,50%,70%,90% {
-webkit-transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg)
}
40%,60%,80% {
-webkit-transform: scale(1.1) rotate(-3deg);
transform: scale(1.1) rotate(-3deg)
}
100% {
-webkit-transform: scale(1) rotate(0);
transform: scale(1) rotate(0)
}}
@keyframes tada {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1)
}
10%,20% {
-webkit-transform: scale(.9) rotate(-3deg);
-ms-transform: scale(.9) rotate(-3deg);
transform: scale(.9) rotate(-3deg)
}
30%,50%,70%,90% {
-webkit-transform: scale(1.1) rotate(3deg);
-ms-transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg)
}
40%,60%,80% {
-webkit-transform: scale(1.1) rotate(-3deg);
-ms-transform: scale(1.1) rotate(-3deg);
transform: scale(1.1) rotate(-3deg)
}
100% {
-webkit-transform: scale(1) rotate(0);
-ms-transform: scale(1) rotate(0);
transform: scale(1) rotate(0)
}}
@-webkit-keyframes zoom {
0% {
transform: scale(.9)
}
70% {
transform: scale(1);
box-shadow: 0 0 0 15px transparent
}
100% {
transform: scale(.9);
box-shadow: 0 0 0 0 transparent
}
}
@keyframes zoom {
0% {
transform: scale(.9)
}
70% {
transform: scale(1);
box-shadow: 0 0 0 15px transparent
}
100% {
transform: scale(.9);
box-shadow: 0 0 0 0 transparent
}
}</style>
Nhớ thay các thông tin như số điện thoại, link map, link messenger đi nhé! Bạn nào ko muốn dùng icon local thì ở dòng 8 có thể thay icon-cps-local thành icon-cps-mail để đổi thành icon email nhé 😀
Tạo nút liên hệ trên vào flatsome
Nếu dùng theme flatsome, các bạn vào Flatsome –> Advanced –> Global Setting –> chèn code vào phần Footer Script
Phần code ở trong <style></style> bạn có thể tách ra cho vào Flatsome –> Advanced –> Custom Css hoặc để nguyên không tách cũng đc.
Dùng flatsome mà ko thích nó che mất cái nút back to top thì các bác sửa css nút ấy đi tí nhé
.back-to-top {
bottom: 90px;
right: 18px;
}
Tạo nút liên hệ trên vào mọi web WordPress
Đối với mọi web WordPress dùng theme bất kỳ không phải Flatsome, chúng ta sẽ chèn vào file footer.php ở Quản trị –> Giao diện –> Sửa giao diện – tìm file Footer.php ở cột bên phải.
Sau đó chèn code trên lên trên thẻ </body> hoặc </footer> hoặc </html> trong file footer.php
