Thủ thuật

Hướng dẫn tạo nút gọi điện trên website cực kì nổi bật

Published

Tạo nút gọi điện trên website

Bạn lướt web và thấy một số trang bán hàng có nút gọi điện trên website dạng lắc rất nổi bật? Đột nhiên, bạn nhận ra trang web của mình không có nút gọi như vậy. Trong bài viết này mình sẽ hướng dẫn tạo nút gọi điện trên website cực kì nổi bật. Nó sẽ giúp thu hút khách hàng và kích thích họ nhấp vào nút kêu gọi trên trang web của bạn nhiều hơn.

Với nút gọi này, khi khách hàng truy cập trên máy tính sẽ thấy số hotline và có thể tự bấm số để gọi cho bạn. Và nếu khách truy cập đang sử dụng thiết bị di động, họ chỉ cần nhấp vào biểu tượng và tự động điện thoại gọi cho bạn. VÂNG. Dưới đây mình sẽ hướng dẫn các bạn tạo nút gọi điện trên web theo 2 cách. Đó là sử dụng mã code và sử dụng plugin.

Tạo nút gọi điện trên website

Cách 1: Tạo nút gọi điện trên website bằng Plugin

Sử dụng Plugin Hotline Phone Ring

Link tải: Hotline Phone Ring

Đối với các trang web WordPress, việc tạo nút gọi rất đơn giản với sự trợ giúp của plugin. Có rất nhiều plugin có thể hỗ trợ tạo nút gọi điện trên website, nhưng plugin mình thích nhất là plugin Hotline Phone Ring. Với plugin này, bạn có thể không biết code nhưng có thể dễ dàng tùy chỉnh màu sắc và kiểu hiển thị cho nút gọi. Sau khi cài đặt plugin, bạn sẽ thấy menu Tùy chọn HPR. Đây là thiết lập cho plugin, nó rất đơn giản như sau:

Tạo nút gọi điện trên website bằng Plugin Hotline Phone Ring

Trong đó:

Số điện thoại: Nhập số hotline bạn muốn hiển thị trên web để người dùng gọi cho bạn.

Chọn giao diện: Hiện tại chỉ có 2 kiểu đẹp hiển thị cho bạn lựa chọn. Vui lòng chọn sau đó nhấn lưu để xem web phù hợp với phong cách nào.

Màu sắc: Chọn màu hiển thị cho nút gọi.

Ẩn thanh có chứa số điện thoại: Hãy kiểm tra nếu bạn muốn nó chỉ hiển thị nút Gọi đang lắc trên máy tính chứ không hiển thị số điện thoại.

Sử dụng Plugin Call Now Button

Đối với những người không quen với mã hóa và tốc độ, plugin luôn đứng đầu trong các lựa chọn. Đầu tiên, hãy truy cập thư viện plugin và tìm “Call Now Button“. Sau đó cài đặt và kích hoạt plugin này lên.

Trên tab Basic, đánh dấu check vào enable, sau đó nhập số điện thoại của bạn để người dùng có thể gọi khi nhấp vào.

Phần Button text bạn có thể điền văn bản vào. Ví dụ như gọi ngay, gọi cho tôi, nhận hỗ trợ, …

Tạo nút gọi điện trên website bằng Plugin Call Now Button

Lưu ý rằng nút này chỉ khả dụng trên điện thoại nếu bạn xem ở các nền tảng khác như máy tính bảng, PC hoặc máy tính xách tay thì nút này sẽ không hiển thị.

Ngoài ra, bạn có thể sử dụng Tab Presentation Settings để tùy chỉnh lại:

  • Button color: Màu của nút
  • Icon color: : Màu của biểu tượng
  • Position:: Vị trí của nút, mình khuyên các bạn nên chọn left hoặc full button.
  • Limit appearance: Nhập id của trang và bài đăng nếu bạn muốn áp dụng hiển thị trên các trang nhất định. Hoặc bạn có thể nhấp vào ““Exclude these posts and pages” để áp dụng loại trừ trang không muốn hiển thị.

  • Click Tracking: Tùy chọn theo dõi số lần nhấp qua Google Analytics.
  • Google Ads: Theo dõi số lần nhấp vào nút dưới dạng lượt chuyển đổi Google Ads.
  • Button size: Bạn có thể kéo kích thước nút to nhỏ tùy ý.
  • Order: Ưu tiên các yếu tố thiết kế. Nó bằng thuộc tính CSS z-index. Thông thường mình khuyên các bạn nên để mặc định.

Cách 2: Tạo nút gọi điện trên website bằng code

Chèn nút gọi điện trên website qua Google Tag Manager

Nếu bạn đã cài đặt Google Tag Manager (Trình quản lý thẻ của Google) cho web, bạn có thể sử dụng mã bên dưới và chèn vào web thông qua thẻ HTML tùy chỉnh.


	

		

		

		

		
			
		
		

	

	

		
			0987.654.321

Chèn code trực tiếp vào website để tạo nút gọi điện trên website

Đây là cách đầu tiên, đối với những bạn đã biết code thì có thể sử dụng đoạn mã HTML và CSS bên dưới để tạo nút gọi. Chèn đoạn mã sau vào chân trang của web.

Lưu ý: Các bạn nhớ đổi số điện thoại thành số điện thoại của mình nhé.

Mã HTML:

Mã CSS:

.quick-alo-phone{
    display: block;
}

.quick-alo-phone.quick-alo-static {
    opacity:.6;
}
.quick-alo-phone.quick-alo-hover,
.quick-alo-phone:hover {
    opacity:1;
}
.quick-alo-ph-circle {
    width:160px;
    height:160px;
    top:20px;
    left:20px;
    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:2px solid #bfebfc 9;
    opacity:.1;
    -webkit-animation:quick-alo-circle-anim 1.2s infinite ease-in-out;
    -moz-animation:quick-alo-circle-anim 1.2s infinite ease-in-out;
    -ms-animation:quick-alo-circle-anim 1.2s infinite ease-in-out;
    -o-animation:quick-alo-circle-anim 1.2s infinite ease-in-out;
    animation:quick-alo-circle-anim 1.2s infinite ease-in-out;
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    -o-transition:all .5s;
    transition:all .5s;
    -webkit-transform-origin:50% 50%;
    -moz-transform-origin:50% 50%;
    -ms-transform-origin:50% 50%;
    -o-transform-origin:50% 50%;
    transform-origin:50% 50%;
}
.quick-alo-phone.quick-alo-active .quick-alo-ph-circle {
    -webkit-animation:quick-alo-circle-anim 1.1s infinite ease-in-out !important;
    -moz-animation:quick-alo-circle-anim 1.1s infinite ease-in-out !important;
    -ms-animation:quick-alo-circle-anim 1.1s infinite ease-in-out !important;
    -o-animation:quick-alo-circle-anim 1.1s infinite ease-in-out !important;
    animation:quick-alo-circle-anim 1.1s infinite ease-in-out !important;
}
.quick-alo-phone.quick-alo-static .quick-alo-ph-circle {
    -webkit-animation:quick-alo-circle-anim 2.2s infinite ease-in-out !important;
    -moz-animation:quick-alo-circle-anim 2.2s infinite ease-in-out !important;
    -ms-animation:quick-alo-circle-anim 2.2s infinite ease-in-out !important;
    -o-animation:quick-alo-circle-anim 2.2s infinite ease-in-out !important;
    animation:quick-alo-circle-anim 2.2s infinite ease-in-out !important;
}
.quick-alo-phone.quick-alo-hover .quick-alo-ph-circle,
.quick-alo-phone:hover .quick-alo-ph-circle {
    border-color:#00aff2;
    opacity:.5;
}
.quick-alo-phone.quick-alo-green.quick-alo-hover .quick-alo-ph-circle,
.quick-alo-phone.quick-alo-green:hover .quick-alo-ph-circle {
    border-color:#75eb50;
    border-color:#baf5a7 9;
    opacity:.5;
}
.quick-alo-phone.quick-alo-green .quick-alo-ph-circle {
    border-color:#00aff2;
    border-color:#bfebfc 9;
    opacity:.5;
}
.quick-alo-phone.quick-alo-gray.quick-alo-hover .quick-alo-ph-circle,
.quick-alo-phone.quick-alo-gray:hover .quick-alo-ph-circle {
    border-color:#ccc;
    opacity:.5;
}
.quick-alo-phone.quick-alo-gray .quick-alo-ph-circle {
    border-color:#75eb50;
    opacity:.5;
}
.quick-alo-ph-circle-fill {
    width:100px;
    height:100px;
    top:50px;
    left:50px;
    position:absolute;
    background-color:#000;
    -webkit-border-radius:100%;
    -moz-border-radius:100%;
    border-radius:100%;
    border:2px solid transparent;
    opacity:.1;
    -webkit-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
    -moz-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
    -ms-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
    -o-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
    animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    -o-transition:all .5s;
    transition:all .5s;
    -webkit-transform-origin:50% 50%;
    -moz-transform-origin:50% 50%;
    -ms-transform-origin:50% 50%;
    -o-transform-origin:50% 50%;
    transform-origin:50% 50%;
}
.quick-alo-phone.quick-alo-active .quick-alo-ph-circle-fill {
    -webkit-animation:quick-alo-circle-fill-anim 1.7s infinite ease-in-out !important;
    -moz-animation:quick-alo-circle-fill-anim 1.7s infinite ease-in-out !important;
    -ms-animation:quick-alo-circle-fill-anim 1.7s infinite ease-in-out !important;
    -o-animation:quick-alo-circle-fill-anim 1.7s infinite ease-in-out !important;
    animation:quick-alo-circle-fill-anim 1.7s infinite ease-in-out !important;
}
.quick-alo-phone.quick-alo-static .quick-alo-ph-circle-fill {
    -webkit-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out !important;
    -moz-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out !important;
    -ms-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out !important;
    -o-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out !important;
    animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out !important;
    opacity:0 !important;
}
.quick-alo-phone.quick-alo-hover .quick-alo-ph-circle-fill,
.quick-alo-phone:hover .quick-alo-ph-circle-fill {
    background-color:rgba(0,175,242,0.5);
    background-color:#00aff2 9;
    opacity:.75 !important;
}
.quick-alo-phone.quick-alo-green.quick-alo-hover .quick-alo-ph-circle-fill,
.quick-alo-phone.quick-alo-green:hover .quick-alo-ph-circle-fill {
    background-color:rgba(117,235,80,0.5);
    background-color:#baf5a7 9;
    opacity:.75 !important;
}
.quick-alo-phone.quick-alo-green .quick-alo-ph-circle-fill {
    background-color:rgba(0,175,242,0.5);
    background-color:#a6e3fa 9;
    opacity:.75 !important;
}
.quick-alo-phone.quick-alo-gray.quick-alo-hover .quick-alo-ph-circle-fill,
.quick-alo-phone.quick-alo-gray:hover .quick-alo-ph-circle-fill {
    background-color:rgba(204,204,204,0.5);
    background-color:#ccc 9;
    opacity:.75 !important;
}
.quick-alo-phone.quick-alo-gray .quick-alo-ph-circle-fill {
    background-color:rgba(117,235,80,0.5);
    opacity:.75 !important;
}
.quick-alo-ph-img-circle {
    width:60px;
    height:60px;
    top:70px;
    left:70px;
    position:absolute;
    background:rgba(30,30,30,0.1) url("https://i.imgur.com/YWJeVO2.png") no-repeat center center;
    -webkit-border-radius:100%;
    -moz-border-radius:100%;
    border-radius:100%;
    border:2px solid transparent;
    opacity:.7;
    -webkit-animation:quick-alo-circle-img-anim 1s infinite ease-in-out;
    -moz-animation:quick-alo-circle-img-anim 1s infinite ease-in-out;
    -ms-animation:quick-alo-circle-img-anim 1s infinite ease-in-out;
    -o-animation:quick-alo-circle-img-anim 1s infinite ease-in-out;
    animation:quick-alo-circle-img-anim 1s infinite 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%;
}
.quick-alo-phone.quick-alo-active .quick-alo-ph-img-circle {
    -webkit-animation:quick-alo-circle-img-anim 1s infinite ease-in-out !important;
    -moz-animation:quick-alo-circle-img-anim 1s infinite ease-in-out !important;
    -ms-animation:quick-alo-circle-img-anim 1s infinite ease-in-out !important;
    -o-animation:quick-alo-circle-img-anim 1s infinite ease-in-out !important;
    animation:quick-alo-circle-img-anim 1s infinite ease-in-out !important;
}
.quick-alo-phone.quick-alo-static .quick-alo-ph-img-circle {
    -webkit-animation:quick-alo-circle-img-anim 0s infinite ease-in-out !important;
    -moz-animation:quick-alo-circle-img-anim 0s infinite ease-in-out !important;
    -ms-animation:quick-alo-circle-img-anim 0s infinite ease-in-out !important;
    -o-animation:quick-alo-circle-img-anim 0s infinite ease-in-out !important;
    animation:quick-alo-circle-img-anim 0s infinite ease-in-out !important;
}
.quick-alo-phone.quick-alo-hover .quick-alo-ph-img-circle,
.quick-alo-phone:hover .quick-alo-ph-img-circle {
    background-color:#00aff2;
}
.quick-alo-phone.quick-alo-green.quick-alo-hover .quick-alo-ph-img-circle,
.quick-alo-phone.quick-alo-green:hover .quick-alo-ph-img-circle {
    background-color:#75eb50;
}
.quick-alo-phone.quick-alo-green .quick-alo-ph-img-circle {
    background-color:#00aff2;
}
.quick-alo-phone.quick-alo-gray.quick-alo-hover .quick-alo-ph-img-circle,
.quick-alo-phone.quick-alo-gray:hover .quick-alo-ph-img-circle {
    background-color:#ccc;
}
.quick-alo-phone.quick-alo-gray .quick-alo-ph-img-circle {
    background-color:#75eb50;
}
@-moz-keyframes quick-alo-circle-anim {
    0% {
        -moz-transform:rotate(0) scale(.5) skew(1deg);
        opacity:.1;
        -moz-opacity:.1;
        -webkit-opacity:.1;
        -o-opacity:.1;
    }
    30% {
        -moz-transform:rotate(0) scale(.7) skew(1deg);
        opacity:.5;
        -moz-opacity:.5;
        -webkit-opacity:.5;
        -o-opacity:.5;
    }
    100% {
        -moz-transform:rotate(0) scale(1) skew(1deg);
        opacity:.6;
        -moz-opacity:.6;
        -webkit-opacity:.6;
        -o-opacity:.1;
    }
}
@-webkit-keyframes quick-alo-circle-anim {
    0% {
        -webkit-transform:rotate(0) scale(.5) skew(1deg);
        -webkit-opacity:.1;
    }
    30% {
        -webkit-transform:rotate(0) scale(.7) skew(1deg);
        -webkit-opacity:.5;
    }
    100% {
        -webkit-transform:rotate(0) scale(1) skew(1deg);
        -webkit-opacity:.1;
    }
    }
    @-o-keyframes quick-alo-circle-anim {
    0% {
        -o-transform:rotate(0) kscale(.5) skew(1deg);
        -o-opacity:.1;
    }
    30% {
        -o-transform:rotate(0) scale(.7) skew(1deg);
        -o-opacity:.5;
    }
    100% {
        -o-transform:rotate(0) scale(1) skew(1deg);
        -o-opacity:.1;
    }
}
@-moz-keyframes quick-alo-circle-fill-anim {
    0% {
        -moz-transform:rotate(0) scale(.7) skew(1deg);
        opacity:.2;
    }
    50% {
        -moz-transform:rotate(0) -moz-scale(1) skew(1deg);
        opacity:.2;
    }
    100% {
        -moz-transform:rotate(0) scale(.7) skew(1deg);
        opacity:.2;
    }
}
@-webkit-keyframes quick-alo-circle-fill-anim {
    0% {
        -webkit-transform:rotate(0) scale(.7) skew(1deg);
        opacity:.2;
    }
    50% {
        -webkit-transform:rotate(0) scale(1) skew(1deg);
        opacity:.2;
    }
    100% {
        -webkit-transform:rotate(0) scale(.7) skew(1deg);
        opacity:.2;
    }
}
@-o-keyframes quick-alo-circle-fill-anim {
    0% {
        -o-transform:rotate(0) scale(.7) skew(1deg);
        opacity:.2;
    }
    50% {
        -o-transform:rotate(0) scale(1) skew(1deg);
        opacity:.2;
    }
    100% {
        -o-transform:rotate(0) scale(.7) skew(1deg);
        opacity:.2;
    }
}
@-moz-keyframes quick-alo-circle-img-anim {
    0% {
        transform:rotate(0) scale(1) skew(1deg);
    }
    10% {
        -moz-transform:rotate(-25deg) scale(1) skew(1deg);
    }
    20% {
        -moz-transform:rotate(25deg) scale(1) skew(1deg);
    }
    30% {
        -moz-transform:rotate(-25deg) scale(1) skew(1deg);
    }
    40% {
        -moz-transform:rotate(25deg) scale(1) skew(1deg);
    }
    50% {
        -moz-transform:rotate(0) scale(1) skew(1deg);
    }
    100% {
        -moz-transform:rotate(0) scale(1) skew(1deg);
    }
}
@-webkit-keyframes quick-alo-circle-img-anim {
    0% {
        -webkit-transform:rotate(0) scale(1) skew(1deg);
    }
    10% {
        -webkit-transform:rotate(-25deg) scale(1) skew(1deg);
    }
    20% {
        -webkit-transform:rotate(25deg) scale(1) skew(1deg);
    }
    30% {
        -webkit-transform:rotate(-25deg) scale(1) skew(1deg);
    }
    40% {
        -webkit-transform:rotate(25deg) scale(1) skew(1deg);
    }
    50% {
        -webkit-transform:rotate(0) scale(1) skew(1deg);
    }
    100% {
        -webkit-transform:rotate(0) scale(1) skew(1deg);
    }
}
@-o-keyframes quick-alo-circle-img-anim {
    0% {
        -o-transform:rotate(0) scale(1) skew(1deg);
    }
    10% {
        -o-transform:rotate(-25deg) scale(1) skew(1deg);
    }
    20% {
        -o-transform:rotate(25deg) scale(1) skew(1deg);
    }
    30% {
        -o-transform:rotate(-25deg) scale(1) skew(1deg);
    }
    40% {
        -o-transform:rotate(25deg) scale(1) skew(1deg);
    }
    50% {
        -o-transform:rotate(0) scale(1) skew(1deg);
    }
    100% {
        -o-transform:rotate(0) scale(1) skew(1deg);
    }
}
.quick-alo-phone {
    position: fixed;
    background-color: transparent;
    width: 150px;
    height: 150px;
    cursor: pointer;
    z-index: 200000 !important;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    -webkit-transition: visibility .5s;
    -moz-transition: visibility .5s;
    -o-transition: visibility .5s;
    transition: visibility .5s;
    right: 150px;
    bottom: 90px;
}

Sau đó, tất cả những gì còn lại là đặt css vào tệp css ( file style.css của theme đang xài nhé) và html vào cuối trang web trước thẻ đóng

. Vậy là xong,

Cách 3: Tạo nút gọi điện trên website bằng code

Chèn nút gọi điện trên website bằng cách chèn thủ công

Cách này tuy không chuyên nghiệp như các cách trên nhưng nó có thể hạn chế bạn phải cài thêm nhiều plugin và đây thường là nguyên nhân khiến trang web của bạn tải chậm.

Vì vậy, thêm một liên kết gọi điện có thể hữu ích vào thời điểm này. Cụ thể, bạn chỉ cần thêm một liên kết dưới dạng HTML, sau đó thêm thẻ tel: vào trước số điện thoại.

0123456789

Hoặc bạn cũng có thể thay đổi văn bản liên kết thành lời kêu gọi hành động.

Gọi ngay

Bây giờ bạn có thể dán đoạn mã HTML này vào bất kỳ đâu bạn muốn như top bar, header, sidebar và footer của WordPress.

Chèn nút gọi điện trên website bằng cách sử dụng cài đặt menu

Bước 1: Bây giờ chọn Appearance  (Giao diện) -> Menu -> Chọn mục Custom links.

Bước 2: Trong hộp url, nhập tel: sodienthoai. vd: đt: 0123456789

Trong ô Link Text, bạn điền nội dung cho liên kết trên, bạn có thể ghi số điện thoại hoặc lời kêu gọi hành động như cách mình đã đề cập trước đó.

Nhấn Add to Menu sau đó lưu và nhận kết quả. Bạn sẽ thấy nó xuất hiện dưới dạng một liên kết có thể nhấp được.

Tuy nhiên, nếu bạn muốn nó nổi bật, bạn cần chỉnh sửa nó một chút với mã CSS.

Bước 1: Trên giao diện tạo menu, nhấp vào  Screen options (Tùy chọn màn hình) sau đó tích vào phần CSS Classes.

Bước 2: Bây giờ trong tùy chỉnh mục menu, bạn sẽ thấy một ô mới. Đặt tên cho lớp css của liên kết tạo nút gọi, mình đặt btn-call.

Bước 3: Bạn hãy truy cập Appearance -> customize -> Additional CSS và thêm đoạn mã sau:

.btn-call a{
color:#fff !important;
background-color:#333 !important;
}

Và đây là thành quả:

 

CHIASEMOITHU hy vọng qua bài viết này bạn đã tạo được nút gọi điện trên website để phục vụ cho nhu cầu công việc của mình. Chắc chắn nó không có gì quá phức tạp bạn chỉ cần làm theo hướng dẫn là được hết. Nếu bạn không quen với code, mình khuyên bạn nên sử dụng phương pháp dùng plugin đầu tiên để nhanh chóng có được nút gọi chuyên nghiệp và dễ tùy chỉnh. 

4.8 / 5 ( 14 bình chọn )
In this article:

Leave a Reply

Email của bạn sẽ không được hiển thị công khai.

You May Also Like

Thủ thuật

Cách tạo số điện thoại ảo Việt Nam +84 và website tạo SĐT ảo

Hiện nay, cách tạo số điện thoại ảo Việt Nam để công việc thuận tiện hơn đang được rất nhiều người quan tâm. Một...

27/07/2021

Tin game

Top 20+ Game sinh tồn PC cực hay [UPDATE 2021]

Game sinh tồn PC ở thời điểm hiện tại đang trở thành một thể loại game cực hot trên thị trường bởi lối chơi...

12/07/2021

Phần mềm và key

Tải – Download phần mềm cờ tướng mạnh nhất thế giới 2021

Bạn đam mê các trò chơi cờ tướng, vậy bạn đã download phần mềm cờ tướng mạnh nhất thế giới này chưa? Cờ tướng được...

16/07/2021

Tin game

Khắc phục lỗi chơi game trên bluestacks bị lag, giật [UPDATE 2021]

Sau một thời gian cài đặt và sử dụng, thì vấn đề chơi game trên bluestacks bị lag, giật hay tốc độ xử lí...

24/07/2021