Hướng dẫn tạo nút gọi điện rung lắc cho website cực đẹp trên PC và mobile

4.3/5 - (14 đánh giá)

Bạn lướt web thấy 1 số trang web bán hàng có nút gọi điện thoại rung lắc trông rất đẹp mắt? Bỗng nhiên, bạn nhận ra web của mình không có nút gọi điện như vậy? Ngay lập tức, bạn lên Google tìm kiếm cách tạo nút gọi điện rung lắc cho web và thấy bài viết này?

Bạn đã tìm đúng bài viết rồi đó! Bài viết này, mình sẽ hướng dẫn cho bạn cách tạo nút gọi rung lắc đẹp cho web. Nó sẽ giúp gây chú ý cho khách hàng và kích thích họ bấm vào nút gọi trên web của bạn hơn.

Giao diện hiển thị nút gọi trên PC và mobile theo hướng dẫn này

Với nút gọi này, khi khách hàng truy cập trên máy tính thì họ sẽ nhìn thấy số hotline và có thể tự bấm số để gọi cho bạn. Còn nếu khách truy cập bằng mobile thì họ chỉ cần click vào là gọi cho bạn được luôn.

OK. Dưới đây mình sẽ hướng dẫn bạn tạo nút gọi điện thoại cho web theo 2 cách. Đó là dùng code và dùng plugin.

Xem thêm: Cách thêm nút gọi điện, chat Zalo, chat Facebook,… đẹp cho web WordPress

Code chèn nút gọi điện rung lắc cho website

Đây là cách thứ nhất, dành cho bạn nào biết về code có thể dùng code HTML và CSS dưới đây để tạo nút gọi điện thoại.

Chèn code sau vào phần footer của web.

P/s: Bạn nhớ sửa lại số điện thoại thành số điện thoại của bạn nhé.

Sau đó, chèn đoạn CSS dưới đây vào file style.css trong theme bạn đang dùng.

P/s: Nếu bạn biết về CSS có thể chỉnh sửa lại màu sắc, kích thước cho phù hợp với web của bạn.

Chèn nút gọi điện cho web qua Google Tag Manager

Nếu bạn nào đã cài đặt Google Tag Manager cho web rồi thì có thể sử dụng đoạn code dưới đây và chèn vào web thông qua thẻ HTML Tùy Chỉnh.

Xem thêm: Hướng dẫn tạo nút liên hệ, chat Facebook, Zalo chat, yêu cầu gọi lại cho web

Plugin tạo nút gọi điện thoại rung lắc đẹp cho web

Đối với web WordPress, việc tạo nút gọi điện thoại rất đơn giản với sự trợ giúp của plugin. Có nhiều plugin có thể hỗ trợ tạo nút gọi điện nhưng mình thấy thích nhất vẫn là plugin Hotline Phone Ring.

Với plugin này, bạn có thể không biết code vẫn có thể dễ dàng tùy chỉnh màu sắc, kiểu hiển thị cho nút gọi điện thoại.

Sau khi cài plugin xong, bạn sẽ thấy menu HPR Options. Đây là phần thiết lập cho plugin, nó rất đơn giản như sau:

tao-nut-goi-dien-cho-web-1

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 có 2 kiểu hiển thị cho bạn lựa chọn. Hãy chọn sau đó ấn lưu xem kiểu nào phù hợp với web nhé.
  • Màu sắc: Chọn màu sắc hiển thị cho nút gọi điện thoại.
  • Ấn thanh chứ số điện thoại: Tích vào nếu bạn muốn nó chỉ hiện thị nút Call rung lắc trên máy tính chứ không hiển thị số điện thoại.

Chỉ vậy thôi là xong rồi đó. Rất đơn giản đúng không nào!

Hãy áp dụng ngay cách tạo nút gọi điện thoại này cho web bán hàng, shop online của bạn ngay để gia tăng lượng khách hàng liên hệ qua hotline nhé. Chúc bạn thành công!

Nguyễn Hùng

Internet là nơi mình học được những gì về Wordpress, SEO, SEM, MMO và kiến thức máy tính. Những chia sẻ của mình là những thứ mình học được và đã làm thành công, có thể nó chưa được hoàn hảo nhưng nó sẽ hữu ích với bạn.

Nhận thông báo
Thông báo qua email khi
guest

123 Bình luận
Phản hồi nội tuyến
Xem tất cả bình luận
an

cho em làm trên gg site thì sao ạ

Hiep Pham

Cảm ơn anh đã chia sẻ ạ.
Em cài nút gọi rung lắc bằng tag manager theo hướng dẫn của anh. Nhưng mà hiển thị trên site lại thiếu 1 số trong sdt. Trong code thì đủ. Anh xem giúp em với ạ. Site: novigas.vn. Em cảm ơn anh

Hiep Pham

Dạ được rồi anh à. Cảm ơn anh. Em copy y code anh á. Trong bài hd anh cũng để 160px

Huy Anh

a ơi a có thể cho e xin code chỉ cho sđt nhưng có hiệu ứng animation đc ko ạ

Mai Trọng Tuyền

Bạn ơi mình muốn nhờ chút, web mình là baogiaxetai.com muốn cài tracking cuộc gọi cho thằng google tagmanager mà không biết chọn cái nào để tracking. Mình dùng chức năng preview và chức năng xem trên giao diện trực tiếp của trình duyệt web tìm được click url và click element mà khi thử 2 cái này để tạo mã tracking cho trigger mà đều không được !
Bạn có thể xem giúp mình được k?

Lê Quang Lượng

Bác ơi em muốn thêm nút gửi mail tới 1 mail thì bác cho em xin code được k?

Nguyễn Đạt Tài

Mình làm mà dường như không thấy nó hoạt động đúng với css, trên diện thoại thì có hiện nút gọi. Nhờ bạn check giùm saigonvillas.vn/2021/01/chuyen-nhuong-nha-pho-manhattan-du-an-vinhomes-grand-park/

Thanks

Nguyễn Đạt Tài

Mình đã chèn CSS lúc đầu chèn vô CSS bổ sung sau nhiều ngày không thấy mình chèn thẳng vô css của theme, cũng đã xóa cache mà không thấy hoạt động. Trên điện thoại vẫn bình thường.

Hồ Đăng Phúc

em muốn đặt 2 số điện thoại miền nam và miền bắc thì được k ạ
trên pc và điện thoại đều có text là miền nam – miền bắc

duong

Anh cho em hỏi làm sao để ẩn nút gọi trên điện thoại được ạ

vinh pham

Bạn ơi cho mình hỏi làm sao để click vào icon thì nó link đến số điện thoại của mình ak ? chứ cài xong rồi khi click vào nó chỉ link tới số điện thoại của tác giả

Pham Cuong

Anh cho e hỏi, em chèn plugin phone ring, xem trên máy tính thì nó bên trái hoặc phải mà trên điện thoại nó nằm ở giữa là sao, có cách nào cho về 1 bên dc ko anh

Phương

Chèn nút gọi điện cho web qua Google Tag Manager thông qua thẻ HTML Tùy Chỉnh.
Cấu hình trình kích hoạt chọn sao vậy bác?

Quốc Phòng

Có thể làm thêm nút liên hệ zalo, sms, hays mes ko bạn

Trang

ANh ơi làm sao để tracking trong tag manager click vô gọi điện :((( nút rung lắc ạ. Em thử mấy trường rồi ko đc

Phạm Dũng

Mình muốn tạo thêm 1 nút zalo rung lắc như thế nữa, mình nhân đôi css và mã div và đổi tên nhưng không thể hiển thị được 2 nút, vẫn chỉ 1 nút gọi. Bạn giúp mình với. Mình xin cảm ơn. Web: denparagon.vn

Kiều Đức Anh

Anh ơi, làm sao để thay đổi vị trí của cái nút điện thoại kia j ??
nó đang ở góc dưới bên trái, em muốn đưa nó sang góc dưới bên phải ạ !!
anh giải đáp giúp em với ạ

Kiều Đức Anh

Anh check tin nhắn chờ trong fb giúp em với ạ !!!

Đinh Thành Tấn

em dùng website được thiết kế bằng Nukeviet. em muốn tìm đến phần code trong Footer để sửa sđt cho trang web mà em không biết nó nằm ở đâu. chỉ giúp e với ạ.(em kiểm tra trong public_html/index.php mà không có đoạn code như a để ở trên ạ). em cảm ơn.

Thanh

có plugin nào chèn sdt có mã code để mình có thể chèn nó bất kỳ đâu ko a

HUY

em muốn nó hiển thị ở thanh menu thì làm sao hả anh

H

Em làm vẫn bị lỗi. a kt giúp em với

H

A ơi, em chèn được rồi nhưng nó cứ bị lỗi tóe loe ý ạ. A xem lại giúp em với ạ

h

a teamview giúp em với ạ. e cảm ơn

Tuấn Trần

Web mình bất động sản ok chưa ạ

Nguyễn Hữu Phú

Như vậy có đúng ko ad
apartmentvinhomes.com

Tâm

Cho mình hỏi, mình đã chèn code vào web rồi nhưng trên thiết bị di động không hiện lên nút call
web mình là: https://liengtam.com

Hà Trần

Bạn ơi, mình làm giống như bạn hướng dẫn, nhưng SĐT hiển thị bị thiếu và lệch về bên trái.

Hưng

Bạn cho mình hỏi mình chèn đoạn code vào Google Tag Manager rồi nhưng nó chỉ hiện trên giao diện web pc, khi f12 chuyển từ pc sang chế độ xem mobile vẫn hiện ra nhưng mình dùng điện thoại thật của mình vào thì không thấy button gọi. Web của mình là cteg.vn ạ, cám ơn bạn nhiều.

Hưng

mình chỉ gắn mã GTM vào web thôi bạn

Hưng

Mình check thấy thẻ GTM nằm trong thẻ và đúng rồi mà bạn tại mình nhờ bên dev gắn á, bạn có thể cho mình biết gắn chưa đúng cách ở đâu để mình nhờ họ sửa không ạ, cám ơn bạn

Quốc Nam

Chào bạn,
Mình muốn làm hiệu ứng khi mình hover đến .hotline-phone-ring-wrap thì màu nền của chuông điện thoại và các vòng lan tỏa ra đều thay đổi màu thì mình nên sửa như thế nào? Cám ơn bạn

Long Nguyen

Đã sử dụng đoạn code như trên mọi người cho em hỏi sao không hiển thị nút gọi lên. Website của em làm chuyên bán lò hấp nướng đa năng. Mọi người cho em hỏi có phải do thiếu css không.

Nam

Bạn cho mình hỏi, mình chỉ muốn hiển thị nút cuộc gọi ở trên mobile thôi, còn không hiển thị trên website thì phải sửa code thế nào nhỉ?
Mình dùng phương pháp Chèn nút gọi điện cho web qua Google Tag Manager
Cảm ơn!

Sơn

Anh ơi cho em hỏi thêm code nếu không muốn nó xuất hiện trên mobile thì làm thế nào ạ

vinh

Bạn ơi mình muốn người khác bấm vào nút gọi mà gọi trực tiếp được số điện thoại của mình thì web phải chạy mới gọi được hay k chạy web cóa gọi dc k bạn. Bạn xem giúp mình với nhé: khudothiduongnoimoi.com

vinh

đó ý là mình cài nút gọi trên điện thoại rồi nhưng khi bấm k gọi được. Bạn bảo mình để sai link sdt thì phải sửa ntn bạn. Mình sử dụng plugin: ATP call now, ở mục link khi nhấn hotline mình để sdt của mình như thế đã đúng chưa bạn

vinh

mình có để dạng đó rồi mà vẫn k được mình gửi ảnh qua mail bạn xem giúp mình có sai chỗ nào khác nữa k nhé

vinh

bạn ơi được rồi mình cảm ơn bạn nhiều nhé

Diep Ngo

Anh ơi có đoạn code nào tích hợp cả zalo và messenger vào web thông qua tagmanager không. Mong được anh giúp đỡ!

Quan

Anh ơi, em có gắn vào website em thì oke, nhưng em không muốn nó hiện trang giao diện mobile thì e nên làm sao anh, em dùng đoạn ” Chèn nút gọi điện cho web qua Google Tag Manager” của anh ạ.
Anh trả lời giúp em với nhé, em cảm ơn anh

hải

cho mình hỏi khi làm ở phần mền thì nó chạy bình thường, khi up web lên sever thì nó nằm ở dưới foofter
cái này sữ lý sao vậy bạn

Kami

Mình cài cho web nhưng bị lỗi khi xem trên điện thoại nó ko nổi trên màn hình mà bị chui xuống dưới cùng của web (phải kéo hết trang mới thấy)

Bạn kiểm tra giúp mình đc ko, mình dùng plugin hopdaithanh.com

Kami

Mình dùng plugin bạn chỉ.

Hay phải dùng code của bạn, tại mình ko rành về code nên muốn dùng plugin cho tiện

tran dang khoa

mình cũng không làm được bước 2, icon điện thoại có hiện ra nhưng màu trắng không thấy được.với điều chỉnh vị trí của cái icon như thế nào ?

tran dang khoa

mình dùng thẻ HTML nhưng kích thước hơi nhỏ, mình muốn chỉnh lại kích thước phải làm sao?

NGUYỄN HOÀNG HUY

Mình muốn tạo 2 cái số điện thoại thì làm sao vậy ạ? Nếu tạo giống ở trên 2 lần sẽ bị trùng. Mình la newbie xin giúp đỡ ạ

Mạnh Cường

Mình muốn loại trừ một số post hoặc page không cho nó hiển thị thì làm thế nào. Bác làm ơn giúp mình với.

Hưng Thịnh

Bạn có thể gôm hết nó vào trong 1 đoạn HTML để mình gắn nó vào website thông qua Google Tag Manager được không bạn ơi, nếu làm được vậy thì tốt quá, nó sẽ giúp web giảm code rất nhiều

khánh

mình cũng cài lúc trước được rồi nhưng bị lỗi hình. có rung có sđt nhưng k có hình, giờ gắn code bạn gửi nhưng k đúng, code thiếu nên không hiện ra, bạn xem giúp mình nhé property-x.com.vn

Lưu văn Mùi

Bạn kiểm tra website giúp mình nhé. mình không cài đặt hiển thị plugin Hotline Phong Ring
themanorscentralpark.net

thảo

a có thể kiểm tra trang web e có thể làm được không ạ?
nhakhoaimplantbd.com

Tuyến

mình bị dính cái này nhưng k biết gỡ như nào, bạn có thể giúp mình được không?

Tuyến

nhadatkimoanhreal.com

Tuyến

mình mới biết chút về web nhưng chưa hiểu biết mấy mong bạn giúp mình nhé

Tuyến

mình tìm k được đoạn code chèn nút gọi, đã hỏi nhiều anh chị làm chung khác nhưng họ cũng bó tay :(((

Duy

Rất cảm ơn bạn. Mình đã làm được bước 1, còn bước 2 làm rung lắc mình làm cách nào cũng không được. Mong bạn giúp mình ca này với .

Hoàng quân

Mỗi bài viết là một số điện thoại khác nhau. Vậy làm sao để tạo và gọi nó xuất hiện ra mỗi khi mình vào một bài nào đó ạ. Mong a giúp. E gà code quá ạ . E cam on