Tạo nút gọi trên website WordPress thu hút khách hàng

|

Bạn muốn Tạo nút gọi trên website WordPress? Thêm nút gọi giúp người dùng dễ dàng liên hệ với bạn hơn. Đây cũng là cách để Website của bạn có nhiều khách hàng tiềm năng hơn so với đối thủ. Trong bài viết này Themnest cũng hướng dẫn thêm nút gọi trong WordPress dễ dàng với 2 cách: Sử dụng Plugin và phương pháp thủ công. Cùng tham khảo nhé!

Hướng Dẫn Tạo Nút Gọi Trên Website WordPress
Hướng Dẫn Tạo Nút Gọi Trên Website WordPress

Nút Call là gì? Tại sao mà phải tạo nút gọi trên Website WordPress?

Tìm Hiểu Về Tạo Nút Call Trên Website WordPress
Tìm Hiểu Về Tạo Nút Call Trên Website WordPress

Khái niệm

Nút Call (còn được gọi là nút gọi) là một trong những tính năng mà không thể thiếu trên Website. Nhằm giúp khách hàng liên hệ được với doanh nghiệp khi truy cập vào Website. Đặc biệt, nút gọi thực sự cần thiết đối với website bán hàng hay thương mại điện tử.

Tại sao phải tạo nút gọi trên website WordPress?

Dưới đây là những lý do nên tạo nút gọi trên Website WordPress:

  • Giải quyết được những thắc mắc và yêu cầu của người dùng nhanh chóng, nhất là quá trình mua bán.
  • Người dùng luôn có xu hướng Click vào số điện thoại để được tư vấn trước khi mua.
  • Đây chính là chiến lược thu hút khách hàng, gia tăng tỷ lệ chuyển đổi từ người truy cập mua hàng trên Website.

Ưu và nhược điểm của nút gọi trên WordPress

Ưu Và Nhược điểm Của Nút Call đối Với WordPress
Ưu Và Nhược điểm Của Nút Call đối Với WordPress

Ưu điểm của nút gọi trên WordPress

Nút call có tác động lên hiệu quả của hoạt động của kinh doanh:

  • Có nhiều hiệu ứng thu hút được sự chú ý của người truy cập.
  • Tăng được khả năng tương tác giữa khách hàng và doanh nghiệp.
  • Kịp thời giải quyết được những vấn đề của khách hàng.
  • Tăng được khả năng chốt đơn.
  • Thiết kế gọn nhẹ không chiếm nhiều giao diện website.

Nút call có thể tác động tích cực đến khách hàng và đơn vị kinh doanh:

  • Khách hàng nhận câu trả lời từ doanh nghiệp nhanh chóng.
  • Kích thích nhu cầu mua hàng và hành động của khách hàng trên website.

Người kinh doanh nhận được những tác động tích cực từ nút call:

  • Tăng được lượt khách mua hàng trên website.
  • Không bỏ sót khách hàng tiềm năng nào.
  • Tăng được chất lượng và dịch vụ chăm sóc khách hàng.
  • Nhanh chóng giải quyết được những vấn đề và thắc mắc của người mua.

Nhược điểm của nút gọi trên WordPress

  • Cài đặt thêm Plugin Call có thể ảnh hưởng đến tốc độ Load trang.
  • Có nhiều công cụ không thể cài đặt được nhiều số vào một nút Cuộc gọi.

Khi nào nên tạo nút gọi điện cho WordPress?

Khi Nào Nên Tạo Nút Gọi điện Cho WordPress
Khi Nào Nên Tạo Nút Gọi điện Cho WordPress

Hiện nay, người dùng truy cập vào Website thì thích liên hệ với nhau qua cách gián tiếp bằng địa chỉ Email, đơn giản vì mọi người cảm thấy thoải mái hơn.

Vì thế, ThemeNest khuyên bạn cũng nên tạo một biểu mẫu liên hệ trên WordPress của mình trước khi mà cân nhắc thêm nút gọi điện.

Bên cạnh đó, chúng ta vẫn nên áp dụng việc tạo nút gọi trên website wordpress để tăng tính thuận tiện cho khách hàng, ngày nay số lĩnh vực kết nối qua điện thoại vẫn chiếm số lượng rất lớn. Ví dụ như: bất động sản, bảo hiểm và giáo dục…

Tạo nút gọi bằng plugin WordPress

Việc tạo nút gọi trên website wordpress hiện tại không còn là việc khó khăn khi đã có rất nhiều plugin hỗ trợ, sau đây là một số Plugin được sử dụng phổ biến Themenest giới thiệu đến bạn đọc.

Tạo Nút Gọi Bằng Plugin WordPress

Tạo Nút Gọi Bằng Plugin WordPress

Tạo nút gọi bằng Plugin call wordpress

  1. Đăng nhập trang quản trị WordPress, vào mục “Plugin” → Chọn”Cài mới“.
Cài đặt Plugin Mới
Cài đặt Plugin Mới
  1. Tìm plugin với từ khóa: “WP Call Button“, nhấn vào “Cài đặt
Wp Call Button
Wp Call Button

Sau đó nhấn “Kích hoạt”.

Kích Hoạt Plugin Wp Call Button
Kích Hoạt Plugin Wp Call Button
  1. Vào phần cài đặt plugin tại phần Setting (Cài đặt) → chọn “WP Call Button“.

Trang thiết lập plugin WP Call Button hiển thị như hình dưới để tạo nút gọi rung lắc:

Tạo Nút Gọi Bằng Plugin Call WordPress
Tạo Nút Gọi Bằng Plugin Call WordPress
  1. Thiết lập cho Plugin Call WordPress.
Thiết Lập Cho Plugin Call WordPress
Thiết Lập Plugin Call WordPress
  • Call Now Button Status: Nút bật hoặc tắt Plugin hiển thị nút gọi.
  • Phone Number: Lưu ý chọn Mã vùng của Việt Nam rồi nhập hotline.
  • Call Button Text: Văn bản mà bạn muốn hiển thị ở nút gọi.
Thiết Lập Những Thông Số Khi Cài đặt Plugin Call WordPress
Thiết Lập Những Thông Số Khi Cài đặt Plugin Call WordPress
  • Call Button Position: Vị trí hiển thị nút gọi. Có 4 vị trí cho chúng ta lựa chọn:
    • Full Width: Phủ toàn bề rộng.
    • Bottom left: Phía dưới bên trái.
    • Bottom center: Phía dưới chính giữa.
    • Bottom right: Phía dưới bên phải.
  • Call Button Color: chọn màu cho nút gọi. Có 2 cách để chọn màu:
    • Click trực tiếp vào màu,
    • Dán mã màu vào phía sau.
  • Call Button Visibility: Điều chỉnh mức độ hiển thị của nút. Có 3 tùy chọn:
    • Show everywhere (Default): Hiện mọi nơi
    • Show only on certain post/page and Hide everywhere else: chỉ hiện ở các trang/bài viết quan trọng, ẩn ở những trang khác.
    • Hide only on certain post/page and Show everywhere else: Ẩn ở những trang/bài viết quan trọng, hiện ở những trang khác.
  • Show Call Button Only on Mobile devices:Chỉ hiển thị nút cuộc gọi trên thiết bị di động.

Sau khi chỉnh sửa hoàn tất, chọn “Save Changes” (Lưu thay đổi) và bật trình duyệt để xem kết quả:

Giao Diện Khi Cài đặt Nút Gọi Bằng Plugin Call WordPress Thành Công
Giao Diện Khi Cài đặt Nút Gọi Bằng Plugin Call WordPress Thành Công

Khi click vào nút Call, Website sẽ hỏi như sau: “Gọi cho số này bằng điện thoại của bạn” tức là bạn đã cài đặt thành công:

Câu Hỏi Thêm Khi Người Dùng Click Vào Nút Gọi Trên Webiste
Câu Hỏi Thêm Khi Người Dùng Click Vào Nút Gọi Trên Webiste

Trên thiết bị di động sẽ xuất hiện giao diện:

Giao Diện Trên điện Thoại Di động
Giao Diện Trên điện Thoại Di động

Tạo nút call wordpress với plugin Call Now Icon Animate

Đây chính là một trong những Plugin đơn giản và tiện ích, giúp bạn dễ dàng cài nút call lên web của mình. Call Now Icon Animate cũng có điểm nổi bật là tạo được hiệu ứng rung lắc. Nhưng mà không có nhiều tính năng nâng cao.

Bạn thực hiện theo những cách sau đây:

  1. Đăng nhập trang quản trị WordPress, vào mục “Plugin” → Chọn “Cài mới“.
Cài đặt Plugin Mới
Cài đặt Plugin Mới
  1. Tìm plugin với từ khóa: “Call Now Icon Animate“, Nhấn vào “Cài đặt
Hướng Dẫn Cài đặt Plugin Call Now Icon Animate
Hướng Dẫn Cài đặt Plugin Call Now Icon Animate

Sau đó nhấn “Kích hoạt”.

Kích Hoạt Plugin Call Now Icon Animate
Kích Hoạt Plugin Call Now Icon Animate
  1. Truy cập vào phần Setting (Cài đặt) Plugin Call Now Icon Animate.

Trang thiết lập plugin Call Now Icon Animate hiển thị như hình dưới để tạo nút gọi rung lắc:

Truy Cập Cài đặt Plugin Call Now Icon Animate
Truy Cập Cài đặt Plugin Call Now Icon Animate

Trong đó:

  • Enabled/Disabled Icon: chọn Enabled để hiển thị nút gọi.
  • Phone number: Bạn nhập số điện thoại vào ô này.
  1. Advanced settings (Cài đặt nâng cao).

Trong giao diện ở trên, bạn click vào phần Advanced settings (Cài đặt nâng cao) để tiến hành cài đặt.

Hướng Dẫn Cài đặt Nâng Cao Plugin Call Now Icon Animate
Hướng Dẫn Cài đặt Nâng Cao Plugin Call Now Icon Animate

Tại đây bạn thiết kết nút gọi:

  • Icon color: Màu sắc.
  • Icon color hover: Màu hiệu ứng.
  • Appearance: Vị trí.

Sau đó nhấn “Lưu thay đổi” để lưu lại những thiết lập bạn đã tạo.

Như vậy, bạn đã tạo một nút Call lên website của mình xong rồi.

Tạo nút call WordPress với Plugin Easy Call Now

Đây cũng chính là một Plugin có sự hỗ trợ hiển thị những nút gọi cả trên Mobile (di động) và cả Desktop. Như những plugin khác thì Easy Call Now cũng chỉ hỗ trợ thiết lập các tính năng cơ bản. Nếu như bạn cần có nhiều tính năng hơn thì những plugin này khó có thể giúp bạn đáp ứng được.

  1. Đăng nhập trang quản trị WordPress, vào mục PluginChọn Cài mới.
Cài đặt Plugin Mới
Cài đặt Plugin Mới
  1. Tìm plugin với từ khóa: “Easy Call Now“, Nhấn vào “Cài đặt
Cài đặt Plugin Easy Call Now
Cài đặt Plugin Easy Call Now

Sau đó nhấn “Kích hoạt”.

Kích Hoạt Plugin Call Now Icon Animate
Kích Hoạt Plugin Call Now Icon Animate
  1. Truy cập vào phần Setting (Cài đặt) Plugin Easy Call Now.

Thiết lập những thông tin chi tiết:

  • Phone Number: Số điện thoại.
  • Position: Vị trí hiển thị nút gọi.
  • Ring Color: Màu sắc nút gọi.
  • Ring Howver Colo: Hiệu ứng màu sắc nút gọi.
Thiết Lập Những Thông Tin Cơ Bản Plugin Easy Call Now
Thiết Lập Những Thông Tin Cơ Bản Plugin Easy Call Now

Như vậy là bạn đã nhanh chóng tạo được một nút Cuộc gọi với plugin Easy Call Now rồi đó.

Tạo nút call WordPress với công cụ AutoAds MaxLead

AutoAds MaxLead được biết đến là một công cụ thiết kế đa kênh liên hệ Website với 9 nút phổ biến hiện nay: Cuộc gọi, Zalo, Facebook Messenger, Tin khuyến mãi, Tải tài liệu, Bản đồ, Nhắn tin, WhatsApp, LiveChat.

Nút gọi AutoAds Maxlead cũng tích hợp được nhiều tính năng vượt trội hơn những công cụ khác như là:

  • Tích hợp được nhiều số điện thoại vào 1 nút cuộc gọi.
  • Chuyển dữ liệu khách hàng tiềm năng từ nút cuộc gọi nhằm tối ưu những chiến dịch Google Ads.
  • Có 2 cách hiển thị số điện thoại đó là:
    • Hiển thị tất cả các số Hotline đã thiết lập.
    • Hiển thị xoay vòng lần lượt từng số khi có người dùng bấm vào.

Chỉ cần thiết lập được công cụ AutoAds Maxlead thì bạn cũng có thể lựa chọn nút liên hệ hiển thị trên Website. Khi đó bạn cũng không lo có xung đột giữa những công cụ, tốc độ load trang chậm.

Nếu như mà bạn là người sử dụng AutoAds Maxlead, chỉ sử dụng trong 5 phút thì bạn có thể cài đặt xong nút gọi với những bước đơn giản như sau:

  1. Truy cập vào đường link: https://autoads.asia/vi/cong-cu/maxlead
Giao Diện Truy Cập Vào Autoads Maxlead
Giao Diện Truy Cập Vào Autoads Maxlead
  1. Nhấn vào “Dùng thử miễn phí“.
Dùng Thử Miễn Phí Với Công Cụ Autoads Maxlead
Dùng Thử Miễn Phí Với Công Cụ Autoads Maxlead

Nhập thông tin đăng ký:

  • Email.
  • Số điện thoại.
  • Mật khẩu.

Nếu như bạn có sẵn tài khoản Google hay Facebook thì có thể kết nối bằng cách nhấn tương ứng “Tiếp tục với Google” hay “Tiếp tục với Facebook”.

Đăng Ký Tài Khoản Với Công Cụ Autoads Maxlead
Đăng Ký Tài Khoản Với Công Cụ Autoads Maxlead
  1. Điền thông tin Website muốn cài đặt AutoAds Maxlead.
Điền Thông Tin Website Muốn Cài đặt Maxlead
Điền Thông Tin Website Muốn Cài đặt Maxlead
  1. Liên kết MaxLead với tài khoản Google Ads, để theo dõi chuyển đổi trên Google Ads tự động.

Sau khi chọn được tài khoản Google liên kết với Maxlead thì nhấn “Lưu“.

Liên Kết Maxlead Với Tài Khoản Google Ads
Liên Kết Maxlead Với Tài Khoản Google Ads
  1. Thiết lập nhanh nút Cuộc gọi (có thể thêm các nút đa kênh liên hệ khác nếu cần). Bạn nhập số điện thoại vào mục đầu tiên để cài đặt nút Cuộc gọi.

Sau đó nhấn vào “Lưu và tiếp tục“.

Thiết Lập Nhanh Nút Cuộc Gọi Với Plugin Maxlead
Thiết Lập Nhanh Nút Cuộc Gọi Với Plugin Maxlead
  1. Gắn mã nhúng vào Website và bắt đầu trải nghiệm MaxLead.

Sau khi đã thiết lập nút MaxLead, để tiến hành chỉnh sửa thông tin chi tiết của nút Cuộc gọi, bạn có thể làm theo các bước dưới đây:

  1. Trong giao diện cài đặt các nút gọi MaxLead, bạn chọn “Thiết lập” → Nhấn vào biểu tượng cuộc gọi.
Thiết Lập Nút Cuộc Gọi Với Công Cụ Autoads Maxlead
Thiết Lập Nút Cuộc Gọi Với Công Cụ Autoads Maxlead
  1. Bạn thiết lập những thông tin cơ bản về nút Cuộc gọi.
  • Tên kênh: Nhập tên mà bạn muốn hiển thị.
  • Số điện thoại.

Bạn có thể thêm nhiều số Hotline khác vào 1 nút cuộc gọi bằng nút “Thêm Hotline” ở dưới:

Thiết Lập Những Thông Tin Cơ Bản Về Nút Cuộc Gọi
Thiết Lập Những Thông Tin Cơ Bản Về Nút Cuộc Gọi
  1. Thiết lập nâng cao

Tại đây, bạn có thể thiết lập các thông tin chi tiết hơn về nút Cuộc gọi trên Website. Nếu không cần thiết thì bạn có thể bỏ qua phần này.

  • Yêu cầu gọi lại: “Vui lòng để lại số điện thoai chúng tôi sẽ gọi lại ngay sau 5 phút”.
  • Màu nút: Sử dụng màu riêng.
  • Thông điệp cảm ơn: Cảm ơn bạn đã để lại số điện thoại. Chúng tôi sẽ gọi lại trong thời gian sớm nhất.
Thiết Lập Thêm Các Thông Tin Chi Tiết Hơn Về Nút Cuộc Gọi Trên Website
Thiết Lập Thêm Các Thông Tin Chi Tiết Hơn Về Nút Cuộc Gọi Trên Website
  1. Bật nút “Cuộc gọi” để được hiển thị trên website.
  1. Nhấn vào “Lưu lại” và quay lại trang chủ Website để kiểm tra hiển thị của nút Call.

Tạo nút gọi trên Wesite bằng thủ công

Cách Tạo Nút Gọi Trên Wesite Bằng Thủ Công 
Cách Tạo Nút Gọi Trên Wesite Bằng Thủ Công

Thêm vào bất kỳ nơi nào trên trang web thông qua code

Tạo nút gọi trên website wordpress thông qua code tay, cách này có thể không đơn giản như sử dụng plugin có sẵn nhưng có thể hạn chế số lượng Plugin cũng là rất tốt. Việc này có thể khiến cho Website của bạn load chậm (mặc dù không đáng kể). Vì vậy bạn chỉ cần chèn thêm 1 đoạn code vào website là được.

Thêm một thẻ HTML, sau đó thêm thuộc tính tel trước số điện thoại:

<a href="tel:0123456789"> 0123456789</a>

Hoặc bạn dưới dạng văn bản:

<a href="tel:0123456789">Gọi ngay</a>

Hoặc thêm một chút chữ để thêm nút vào:

<button type="button"><a href="tel:0123456789">Gọi ngay</a></button>

Bây giờ đem đoạn HTML này dán vào bất kỳ vị trí nào bạn mong muốn nó hiển thị, như: Top Bar, Header, Sidebar và Footer trên website.

  1. Vào phần “Giao diện” → chọn “Sửa giao diện“.
Sửa Giao Diện Website
Sửa Giao Diện Website
  1. Chọn nơi cần thêm nút, như hình ảnh dưới thì ThemeNest đang thêm nút gọi vào footer.php → chèn Code vào trong thẻ <div>
Chèn Code Vào Trong Thẻ
Chèn Code Vào Trong Thẻ
  1. Chọn Cập nhật tập tin và kiểm tra kết quả tại phần Footer (Cuối trang).

Chúng ta hạn chế bỏ vào Footer, thay vào đó có thể đặt ở Header hoặc bất kỳ nơi nào lấy được sự chú ý của người xem.

Dưới đây là giao diện cài đặt nút gọi vào Footer thành công.

Giao Diện Cài đặt Nút Gọi Bằng Cách Chèn Vào Footer Thành Công
Giao Diện Cài đặt Nút Gọi Bằng Cách Chèn Vào Footer Thành Công

Cách thêm nút gọi vào menu WordPress

Cách này có nhiều Website sử dụng vì vị trí này thường được người dùng chú ý nhiều hơn khi truy cập vào Website. Thường chúng ta chỉ dựa theo mặc định của theme vì vậy không dám nghĩ tới việc thêm nút gọi vào menu WordPress, nhưng không phải vậy. Ai đã thành thạo với việc quản lý Menu chỉ cần chịu tìm tòi một chút là được.

  1. Vào phần “Giao diện” → chọn “Menu“.
Chỉnh Sửa Menu Trên Giao Diện Của Website
Chỉnh Sửa Menu Trên Giao Diện Của Website
  1. Di chuyển đến phần “Liên kết tự tạo” rồi nhấn vào mũi tên phía bên phải để xổ xuống những tùy chọn như hình dưới:
Thêm Liên Kết để Tạo Nút Gọi Trên Menu WordPress
Thêm Liên Kết để Tạo Nút Gọi Trên Menu WordPress
  • URL: Điền tel mà bạn muốn chèn. Như ở hình trên thì ThemeNest muốn chèn số điện thoại 0123456789 nên đã điền theo cú pháp: tel:0123456789.
  • Tên đường dẫn: Điền tên mà bạn muốn. Như ở hình trên thì ThemNest muốn tên hiển thị “Gọi ngay“.

Chọn “Thêm vào menu” → Kéo xuống vị trí dưới cùng chọn “Lưu menu“.

Sau bước này là đã có nút “Gọi ngay” rồi, nhưng chúng ta sẽ đi tìm hiểu thêm vài bước nữa để tối ưu nút gọi.

  1. Bật tính năng nâng cao cho menu

Tại mục “Hiển thị thuộc tính năng cao của thực đơn“→ Chọn “Lớp CSS“.

Bật Tính Năng Nâng Cao Cho Menu Khi Chèn Nút Gọi
Bật Tính Năng Nâng Cao Cho Menu Khi Chèn Nút Gọi
  1. Đặt tên “Lớp CSS” cho nút gọi.

Bây giờ click vào mũi tên bên cạnh chữ “Link tùy chọn”, cửa sổ sẽ hiện ra như bên dưới:

Tại mục “Lớp CSS (tùy chọn)” nhập: btn-call

Đặt Tên Lớp CSS Khi Tạo Nút Gọi Trên Menu
Đặt Tên Lớp CSS Khi Tạo Nút Gọi Trên Menu

Rồi nhấn vào “Lưu menu” ở cuối.

  1. Truy cập vào “Giao diện” → Chọn “Tùy biến” → Chọn “Tùy chỉnh CSS bổ sung“.

Tại mục “Tùy chỉnh CSS bổ sung” dán đoạn code dưới vào

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

Nhấn chọn “Đăng

Chèn Code Vào Tùy Chỉnh Css Bổ Sung Khi Tạo Nút Gọi Trên Menu
Chèn Code Vào Tùy Chỉnh Css Bổ Sung Khi Tạo Nút Gọi Trên Menu

Trong đó “#ff1a1a” là mã màu đỏ, nếu muốn thay màu khác thì bạn đổi chuỗi số sau dấu “#“. Bạn có thể chọn mã màu tại đây: https://www.w3schools.com/colors/colors_picker.asp

Cuối cùng, kiểm tra trang chủ sau khi cài đặt nút gọi vào Menu WordPress.

Giao Diện Trang Chủ Khi Cài đặt Nút Gọi Vào Menu WordPress Thành Công
Giao Diện Trang Chủ Khi Cài đặt Nút Gọi Vào Menu WordPress Thành Công

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

Hướng dẫn cài đặt Google Tag Manager

  1. Truy cập vào Trình quản lý thẻ: https://tagmanager.google.com/
Giao Diện Của Google Tag Manager
Giao Diện Của Google Tag Manager

Nhấn vào “Tạo tài khoản“.

  1. Điền thông tin đăng ký
  • Tên tài khoản: Điền tên công ty hoặc tên Website.
  • Quốc gia: Chọn Việt Nam.
Thiết Lập Tài Khoản Google Tag Manager
Thiết Lập Tài Khoản Google Tag Manager
  1. Tạo và thiết lập Container
  • Nhập tên vùng chứa.
  • Nền tảng nhắm mục tiêu:
    • Web: Để dùng trên các trang web dành cho máy tính để bàn.
    • iOS: Để dùng trong các ứng dụng iOS.
    • Andoid: Để dùng trong các ứng dụng Andoid.
    • AMP: Để dùng trong Accelerated Moblie Pages.
Thiết Lập Vùng Chứa Khi Tạo Tài Khoản Google Tag Manager
Thiết Lập Vùng Chứa Khi Tạo Tài Khoản Google Tag Manager

Sau đó nhấn vào “Tạo“.

  1. Gắn mã code Google Tag Manager vào website

Sau khi click vào nút “Tạo” thì sẽ có một cửa sổ hiện ra được những thông tin về điều khoản để có thể sử dụng Google Tag Manager, bạn chỉ cần click ““.

Thỏa Thuận điều Khoản Dịch Vụ Trình Quản Lý Thẻ Của Google
Thỏa Thuận điều Khoản Dịch Vụ Trình Quản Lý Thẻ Của Google

Sau đó thì sẽ có xuất hiện bảng chứa 2 mã code mà bạn vừa tạo.

2 Mã Code Của Container Vùng Chứa Google Tag Manager
2 Mã Code Của Container Vùng Chứa Google Tag Manager

Bạn chỉ cần thực hiện 2 thao tác sau đây:

  • Copy và paste đoạn code Google Tag Manager đầu tiên vào trong cặp thẻ <head> </head>.
  • Copy và paste đoạn còn lại vào trong cặp thẻ <body> </body>.

Để kiểm tra lại đã cài đặt Google Tag Manager đúng hay chưa thì bạn cài đặt công cụ Google Tag Assistant vào trình duyệt Chrome của mình. Khi thẻ tag có màu vàng hoặc màu xanh thì bạn đã cài đặt Google Tag Manager là đã thành công rồi.

  1. Chèn nút gọi điện cho website qua Google Tag Manager

Sử dụng đoạn code dưới đây và chèn vào Website thông qua thẻ HTML Tùy Chỉnh.

<style>
.hotline-phone-ring-wrap {
position: fixed;
bottom: 0;
left: 0;
z-index: 999999;
}
.hotline-phone-ring {
position: relative;
visibility: visible;
background-color: transparent;
width: 110px;
height: 110px;
cursor: pointer;
z-index: 11;
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);
transition: visibility .5s;
left: 0;
bottom: 0;
display: block;
}
.hotline-phone-ring-circle {
width: 85px;
height: 85px;
top: 10px;
left: 10px;
position: absolute;
background-color: transparent;
border-radius: 100%;
border: 2px solid #e60808;
-webkit-animation: phonering-alo-circle-anim 1.2s infinite ease-in-out;
animation: phonering-alo-circle-anim 1.2s infinite ease-in-out;
transition: all .5s;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
opacity: 0.5;
}
.hotline-phone-ring-circle-fill {
width: 55px;
height: 55px;
top: 25px;
left: 25px;
position: absolute;
background-color: rgba(230, 8, 8, 0.7);
border-radius: 100%;
border: 2px solid transparent;
-webkit-animation: phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;
animation: phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;
transition: all .5s;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.hotline-phone-ring-img-circle {
background-color: #e60808;
width: 33px;
height: 33px;
top: 37px;
left: 37px;
position: absolute;
background-size: 20px;
border-radius: 100%;
border: 2px solid transparent;
-webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: center;
}
.hotline-phone-ring-img-circle .pps-btn-img {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.hotline-phone-ring-img-circle .pps-btn-img img {
width: 20px;
height: 20px;
}
.hotline-bar {
position: absolute;
background: rgba(230, 8, 8, 0.75);
height: 40px;
width: 160px;
line-height: 40px;
border-radius: 3px;
padding: 0 10px;
background-size: 100%;
cursor: pointer;
transition: all 0.8s;
-webkit-transition: all 0.8s;
z-index: 9;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.1);
border-radius: 50px !important;
/* width: 175px !important; */
left: 33px;
bottom: 37px;
}
.hotline-bar > a {
color: #fff;
text-decoration: none;
font-size: 15px;
font-weight: bold;
text-indent: 50px;
display: block;
letter-spacing: 1px;
line-height: 40px;
font-family: Arial;
}
.hotline-bar > a:hover,
.hotline-bar > a:active {
color: #fff;
}
@-webkit-keyframes phonering-alo-circle-anim {
0% {
-webkit-transform: rotate(0) scale(0.5) skew(1deg);
-webkit-opacity: 0.1;
}
30% {
-webkit-transform: rotate(0) scale(0.7) skew(1deg);
-webkit-opacity: 0.5;
}
100% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
-webkit-opacity: 0.1;
}
}
@-webkit-keyframes phonering-alo-circle-fill-anim {
0% {
-webkit-transform: rotate(0) scale(0.7) skew(1deg);
opacity: 0.6;
}
50% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
opacity: 0.6;
}
100% {
-webkit-transform: rotate(0) scale(0.7) skew(1deg);
opacity: 0.6;
}
}
@-webkit-keyframes phonering-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);
}
}
@media (max-width: 768px) {
.hotline-bar {
display: none;
}
}
</style>
<div class="hotline-phone-ring-wrap">
<div class="hotline-phone-ring">
<div class="hotline-phone-ring-circle"></div>
<div class="hotline-phone-ring-circle-fill"></div>
<div class="hotline-phone-ring-img-circle">
<a href="tel:0902 170 180" class="pps-btn-img">
<img src="" alt="Gọi điện thoại" width="50">
</a>
</div>
</div>
<div class="hotline-bar">
<a href="tel:0902 170 180">
<span class="text-hotline">0902 170 180</span>
</a>
</div>
</div>

Tạo nút gọi điện cho Website WordPress khi dùng Theme Flatsome

  1. Copy code HTML và CSS.

Bạn rê chuột vào “Advanced” (Cài đặt nâng cao) → “Global Settings“(Cài đặt mặc định tất cả) → “Footer Script“.

Tạo Nút Gọi điện Cho Website WordPress Bằng Chèn Code
Tạo nút gọi điện cho Website WordPress bằng chèn code

Sau đó, bạn copy toàn bộ đoạn code sau vào “Footer Script” nhé!

  1. Chỉnh sửa thông tin khi Tạo nút gọi điện cho Website WordPress.

Thông tin ở đoạn code trên là thông tin demo. Bạn cần đổi sang thông tin sang thành của mình.

Thay đổi Thông Tin Khi Tạo Nút Gọi điện Cho Website
Thay đổi thông tin khi Tạo nút gọi điện cho Website

Trong đó:

  • Màu trắng: Sửa số điện thoại. Link đúng có dạng: tel:09xxxxxxxx (09xxxxxxxx là số điện thoại của bạn)
  • Màu đỏ: Sửa Link chat Messenger. Link đúng có dạng: http://messenger.com/t/abc (abc là tên trang cá nhân của bạn, sau phần gạch chéo của facebook.com)
  • Màu xanh da trời: Sửa link chat Zalo. Link đúng có dạng: http://zalo.me/09xxxxxxxx (09xxxxxxxx là số điện thoại đăng ký zalo)
  • Màu lá cây: Sửa chỗ gửi mail link đến trang chủ.
  1. Chọn “Lưu” để hoàn thành tạo nút gọi điện cho Website WordPress.

Sau khi bạn Copy code và sửa thông tin trong “Footer script“, bạn lưu lại và ra trang chủ xem thành quả. Như vậy là ta đã tạo nút gọi trên website wordpress thành công một cách đơn giản và nhanh chóng.

Giao Diện Tạo Nút Gọi điện Cho Website WordPress
Giao Diện Tạo Nút Gọi điện Cho Website WordPress

Mình hy vọng qua bài viết này thì bạn cũng tạo nút gọi trên website wordpress để được phục vụ để nhu cầu cho doanh nghiệp của mình. Chắc chắn nó cũng không có gì quá phức tạp để làm khó được bạn.

Nếu bạn có thắc mắc hay có vấn đề cần hỗ trợ, bạn có thể liên hệ trực tiếp với ThemeNest thông qua các kênh sau:

  • Hotline: 0902 170 180
  • Email: sales@themenest.vn

ThemeNest hiện đang có chương trình khuyến mãi dành cho khách hàng mua theme wordpress. ThemeNest sẽ hỗ trợ quý khách 24/24 với chất lượng theme tốt nhất!

Có tất cả 1 bình luận

One thought on “Tạo nút gọi trên website WordPress thu hút khách hàng

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

0902 170 180