Liên kết qua điện thoại: Cách thêm liên kết & CTA “có thể gọi” vào trang web của bạn – liên kết số điện thoại html

Bạn đang xem : liên kết số điện thoại html

Nhiều trang web doanh nghiệp hiển thị số điện thoại để khách hàng có thể liên hệ với họ. Khi máy tính để bàn là cách phổ biến nhất để truy cập các trang web, người dùng sẽ ghi chú số điện thoại và gọi từ một thiết bị riêng biệt. Tất nhiên, hầu hết người dùng hiện nay đều truy cập trang web và thực hiện cuộc gọi từ cùng một thiết bị. Điều này mở ra cơ hội để thêm liên kết cuộc gọi – tạo một số điện thoại HTML có thể nhấp được.

Trong bài viết này, chúng ta sẽ xem xét cách thêm liên kết cuộc gọi cũng như một số liên kết có thể nhấp khác như email và các CTA khác.

Đăng ký kênh Youtube của chúng tôi

Liên kết cuộc gọi hoạt động như thế nào

Làm cho một số điện thoại có thể nhấp được dễ dàng thực hiện với HTML. HTML5 bao gồm các giao thức như tel: và mailto: mà các trình duyệt có thể sử dụng. Các trình duyệt phản ứng khác nhau với các giao thức này. Một số sẽ khởi chạy ứng dụng điện thoại và thêm số vào màn hình trong khi chờ bạn nhấp vào nút Gọi. Những người khác sẽ thực hiện cuộc gọi, trong khi những người khác sẽ hỏi xem có ổn không trước.

Vì đó là HTML, bạn có thể thêm các giao thức ở bất kỳ đâu trên trang web của mình, bao gồm đầu trang, chân trang, thanh bên, trong nội dung của bài đăng và trang cũng như trong các tiện ích con.

Thêm liên kết cuộc gọi số điện thoại HTML vào trang web của bạn

Thêm mã dưới dạng văn bản vào vị trí bạn muốn liên kết xuất hiện:

 & lt; a href = "tel: 123-456-7890" & gt; 123-456-7890 & lt; / a & gt; 

Href = tel: tạo liên kết cuộc gọi. Điều này cho trình duyệt biết cách sử dụng số.

“Tel: 123-456-7890“ tạo số điện thoại HTML. Số trong dấu ngoặc kép là số nó sẽ gọi.

Số trong & gt; & lt; thẻ là phần trực quan và nó có thể là bất cứ thứ gì bạn muốn bao gồm số điện thoại, một dòng văn bản như “Nhấp để gọi” hoặc “Gọi ngay” hoặc bất kỳ lời kêu gọi hành động nào khác mà bạn muốn. Nó phải mô tả những gì sẽ xảy ra khi họ nhấp vào.

Hiển thị tin nhắn thay vì số sẽ như thế này:

 & lt; a href = "tel: 123-456-7890" & gt; NHẤP ĐỂ GỌI & lt; / a & gt; 

Khách truy cập của bạn sẽ thấy văn bản nhưng khi họ nhấp vào văn bản đó, họ sẽ thấy màn hình quay số trên điện thoại của họ với số của bạn sẵn sàng để họ nhấp vào nút gọi.

Thêm tiện ích mở rộng

Một số số điện thoại có số máy lẻ. Bạn có thể thêm mã sẽ tạo ra một khoảng dừng ngắn trước khi quay số máy nhánh. Thêm P vào trước tiện ích mở rộng sẽ thêm một giây tạm dừng. Mã có thể trông giống như sau:

 & lt; a href = "tel: 123-456-7890p123" & gt; NHẤP VÀO ĐỂ GỌI & lt; / a & gt; 

Thao tác này sẽ quay số, đợi một giây và sau đó quay số mở rộng.

Bạn có thể đợi âm quay số bằng cách sử dụng w thay vì p.

Thêm mã quốc gia

Có thể thêm Mã quốc gia bằng cách thêm dấu + cùng với mã quốc gia của bạn trước số điện thoại. Một ví dụ có thể giống như sau:

 & lt; a href = "tel: + 1123-456-7890" & gt; 123-456-7890 & lt; / a & gt; 

Thêm vi dữ liệu cho SEO địa phương

Một trong những tiện ích yêu thích của tôi khi mang theo điện thoại thông minh là khi tôi tìm kiếm một doanh nghiệp địa phương và kết quả là Google cung cấp cho tôi một số điện thoại có thể nhấp được. Tôi có thể nhấp vào số để thực hiện cuộc gọi mà không cần phải ghi lại hoặc cố gắng ghi nhớ. Tính năng này bây giờ là một điều cần thiết. May mắn thay, bạn có thể thêm nó vào trang web của mình để Google có thể cung cấp số điện thoại của bạn trong các tìm kiếm địa phương.

Điều này được thực hiện với vi dữ liệu. Vi dữ liệu thông báo cho các công cụ tìm kiếm rằng các số là một số điện thoại để chúng được hiển thị dưới dạng một liên kết cuộc gọi có thể nhấp. Bạn có thể tạo điều này bằng cách làm phong phú thêm phần đánh dấu với một vài thẻ cho các tìm kiếm cục bộ.

Ví dụ: mã có thể trông giống như sau:

 & lt; div itemscope itemtype = "https://schema.org/LocalBusiness" & gt;
& lt; h1 itemprop = "tên" & gt; Chủ đề WordPress & lt; / h1 & gt;
Điện thoại: & lt; span itemprop = "phone" & gt; & lt; a href = "tel: +123456890" & gt;
234567890 & lt; / a & gt; & lt; / span & gt;
& lt; / div & gt;

Kêu gọi hành động khác

Với HTML5, bạn không bị giới hạn số điện thoại. Bạn có thể thêm các lời kêu gọi hành động khác như email, nhắn tin, fax, v.v. Các giao thức HTML5 bao gồm:

  • tel: – gọi điện thoại
  • mailto: – mở một ứng dụng email
  • callto: mở Skype
  • sms: – gửi tin nhắn văn bản
  • fax: – gửi fax
Xem Thêm  Oracle CHỌN 10 bản ghi hàng đầu - oracle chọn 10 hàng hàng đầu

Tất cả các giao thức này đều được sử dụng theo cách giống như chúng ta đã thấy ở trên. Hãy xem một vài ví dụ.

Thêm mã vào trang liên hệ của bạn

Một trong những nơi tốt nhất để thêm liên kết cuộc gọi là trong thông tin liên hệ của bạn trên trang Liên hệ với chúng tôi.

Cho dù bạn đang sử dụng Trình chỉnh sửa cổ điển hay trình chỉnh sửa Gutenberg mới, bạn sẽ cần xem phiên bản Văn bản của trang. Trong trình chỉnh sửa Cổ điển, nhấp vào tab Văn bản . Trong Gutenberg, nhấp vào ba dấu chấm ở phía trên bên phải và chọn Trình chỉnh sửa mã .

Thêm mã thay cho số điện thoại của bạn.

Thoát khỏi Trình chỉnh sửa mã hoặc Xem trước trang và bạn sẽ thấy rằng số điện thoại của mình hiện là một liên kết có thể nhấp được.

Tạo mã cho liên kết email hoặc URL

Mã HTML cho email là mailto: Địa chỉ email được thêm vào cuối, như sau:

 & lt; a href = "mailto:  [email protected] " & gt;  [email được bảo vệ]  & lt; / a & gt;
Cũng giống như liên kết điện thoại, bạn có thể sử dụng phần hình ảnh để thêm tin nhắn, chẳng hạn như:
& lt; a href = "mailto:  [email được bảo vệ] " & gt; Nhấp vào đây để gửi email cho tôi & lt; / a & gt; 

Cũng giống như liên kết điện thoại, bạn có thể sử dụng phần hình ảnh để thêm thông báo, chẳng hạn như:

 & lt; href = "mailto:  [email được bảo vệ] "; Nhấp vào đây để gửi email cho tôi & lt; / a & gt; 

Đây là một ví dụ từ trang liên hệ của gói bố cục Spa. Tôi đã thêm một mô-đun làm nổi bật với một biểu tượng và văn bản Gửi Email. Tôi đã chọn tab Văn bản và thêm HTML email. Văn bản hiện có thể nhấp được và sẽ mở ứng dụng email của bạn.

Thêm mã vào URL mở

Bạn có thể có HTML để mở bất kỳ URL nào bạn muốn. Điều này rất tốt nếu bạn muốn đưa người đọc đến các trang đăng ký bản tin, sự kiện, v.v. Để liên kết đến chúng, mã HTML của bạn sẽ bao gồm URL. Ví dụ:

 & lt; a href = "http://MySampleSite.com/SamplePage/"> Xem trang mẫu & gt; 

Tôi đã thêm một câu chuyện nổi bật khác với mã để xem trang sự kiện.

Tắt trên Máy tính để bàn và Máy tính bảng

Một vấn đề với các liên kết cuộc gọi là chúng không hữu ích cho máy tính để bàn hoặc máy tính bảng. Bạn có thể giải quyết vấn đề này với Divi bằng cách tạo các mô-đun dành riêng cho từng loại thiết bị, sau đó tắt chúng trên các thiết bị khác.

Tại đây, tôi đã tạo hai mô-đun có số điện thoại: một mô-đun bao gồm số điện thoại HTML và mô-đun còn lại thì không. Tôi đã tắt tính năng có số có thể nhấp trên máy tính bảng và máy tính để bàn, vì vậy họ sẽ không bao giờ nhìn thấy liên kết. Tôi cũng đã tắt mô-đun không có liên kết cho điện thoại, vì vậy người dùng điện thoại sẽ chỉ thấy mô-đun có liên kết.

Thêm mã vào Đầu trang hoặc Chân trang của bạn

Bạn có thể thêm mã vào đầu trang hoặc chân trang của mình bằng trình chỉnh sửa chủ đề. Luôn sử dụng chủ đề con , nếu không mã PHP của bạn sẽ bị ghi đè khi bạn cập nhật chủ đề. Điều này sẽ yêu cầu một số kiểu CSS để trông đẹp mắt.

Trong Trang tổng quan của bạn, chuyển đến Giao diện & gt; Biên tập viên & gt; Đầu trang Chủ đề (hoặc Chân trang Chủ đề). Đặt mã trong & lt; body & gt; một phần của mã. Tôi đã tìm kiếm thẻ kết thúc & lt; / a & gt ;, nhấp vào enter để thêm một vài dòng bổ sung và dán vào mã của tôi. Bạn có thể xem mã ở đây trên dòng 28 và 29.

Đây là giao diện khi tôi đặt liên kết cuộc gọi và liên kết email trong tiêu đề của chủ đề Twenty Nineteen. Nó ở đó và nó hoạt động, nhưng nó không đẹp lắm. Điều này có thể khắc phục được bằng cách thêm màu sắc và không gian lề để chúng sẽ tách rời nhau. Tất nhiên, điều này được thực hiện trong CSS.

Tạo kiểu cho các liên kết

Bạn sẽ cần thêm mã vào trường CSS bổ sung trong Công cụ tùy chỉnh.

Mã của bạn có thể trông giống như sau:

 a [href ^ = "tel:"] {
màu nâu;
văn bản-trang trí: không có;
margin-right: 0.em;
}
a [href ^ = "mailto:"] {
màu cam;
văn bản-trang trí: không có;
margin-right: 0,8em;
}

Điều này cho CSS biết cách tạo kiểu văn bản cho tel: và mailto :. Nó thay đổi phông chữ số điện thoại thành màu nâu, phông chữ email màu cam và thêm một lề nhỏ ở bên phải mỗi liên kết.

Xem Thêm  Xóa cột khỏi bảng - SQL Server - t sql thả cột

CSS hoạt động ở bất kỳ nơi nào mà mã đó ở trong các tiện ích con, bài đăng, v.v. Bạn thậm chí có thể sử dụng biểu tượng thay vì văn bản.

Thêm mã vào menu phụ Divi

Divi có thể đưa số điện thoại và email của bạn vào Menu phụ phía trên tiêu đề. Theo mặc định, nút email đã có thể nhấp được, nhưng số điện thoại thì không. Số điện thoại có thể được chuyển thành liên kết cuộc gọi bằng cách sử dụng số điện thoại HTML tương tự mà chúng tôi đã sử dụng trong các ví dụ trước.

Đi tới Công cụ tùy chỉnh chủ đề & gt; Tiêu đề & amp; Điều hướng & gt; Phần tử tiêu đề. Thao tác này sẽ cung cấp cho bạn một hộp văn bản nơi bạn có thể thêm số điện thoại của mình. May mắn thay, bạn không chỉ giới hạn ở những con số. Bạn cũng có thể thêm HTML. Tôi đã thêm HTML từ các ví dụ trước. Tôi cũng đã tăng kích thước phông chữ của số điện thoại để giúp hình ảnh dễ nhìn hơn.

Bạn có thể làm rõ rằng nó có thể nhấp được bằng cách thêm thông báo vào phần trực quan của liên kết. Bạn có thể thay thế số bằng tin nhắn hoặc thêm tin nhắn vào cuối số. Nó có thể trông như thế này:

 & lt; a href = "tel: 123-456-7890" & gt; 123-456-7890 NHẤP ĐỂ GỌI & lt; / a & gt; 

Ví dụ này chỉ hiển thị văn bản.

Trong phần này, tôi đã thêm số điện thoại cùng với văn bản.

Thử nghiệm trên thiết bị di động

Tôi khuyên bạn nên kiểm tra các liên kết với thiết bị di động để đảm bảo nó hoạt động. Nếu bạn không có quyền truy cập vào điện thoại thông minh, bạn có thể sử dụng Công cụ dành cho nhà phát triển của Google Chrome.

Nhấp chuột phải vào trang chủ của bạn và chọn Kiểm tra. Ở góc trên cùng bên trái của màn hình, bạn sẽ thấy danh sách các thiết bị. Chọn một cái để xem trang web của bạn trông như thế nào trên màn hình đó. Nhấp vào liên kết số điện thoại HTML sẽ mở ra một hộp thoại yêu cầu bạn chọn một ứng dụng. Nếu bạn thấy điều này, liên kết hoạt động. Tôi vẫn khuyên bạn nên thử nó trên một chiếc điện thoại thông minh thực tế, nhưng đây là một dấu hiệu tốt cho thấy liên kết đó đang làm gì đó.

Thêm liên kết cuộc gọi bằng plugin

Bạn cũng có thể thêm liên kết cuộc gọi vào tiêu đề của mình bằng một plugin. Chúng thường bao gồm các tính năng để tạo kiểu, thêm nhiều lời kêu gọi hành động và khả năng bật hoặc tắt dựa trên thiết bị của khách truy cập. Chúng cũng dễ thiết lập và sử dụng. Đây là những lựa chọn tuyệt vời nếu bạn không muốn xử lý mã. Dưới đây là một số lựa chọn tốt nhất.

Nút Gọi ngay

Nút Gọi ngay thêm nút bấm để gọi vào cuối màn hình cho khách truy cập trên thiết bị di động của bạn. Nó không hiển thị trên các thiết bị khác. Bạn cũng có thể thêm văn bản nếu bạn muốn. Nút này là một biểu tượng điện thoại nên có thể dễ dàng hiểu nó dùng để làm gì. Tất cả những gì bạn phải làm là bật nút và nhập số điện thoại của mình. Bạn có thể thay đổi hành vi mặc định trong cài đặt nâng cao.

Thông tin khác

Các nút bên dính

Plugin này cho phép bạn thêm các nút dính vào bên cạnh trang web của bạn và vẫn hiển thị trên màn hình khi người dùng cuộn. Bạn có thể thêm số điện thoại có thể nhấp, địa chỉ email, biểu tượng mạng xã hội và vị trí cửa hàng. Đặt chúng ở bên phải hoặc bên trái, chọn kiểu hoạt ảnh và cuộn qua, tùy chỉnh màu sắc và chọn nơi chúng hiển thị.

Thông tin khác

Thanh tiếp xúc tốc độ

Công cụ này thêm một thanh liên hệ bao gồm các liên kết có thể nhấp cho số điện thoại, số fax, dòng tiêu đề, địa chỉ, email, mạng xã hội và URL tùy chỉnh. Đặt thanh ở trên cùng hoặc dưới cùng và điều chỉnh kích thước, màu sắc, màu của văn bản và liên kết cũng như cách thanh phản ứng. Bạn cũng có thể điều chỉnh kích thước. bạn có thể thêm nhiều nội dung hơn bằng cách sử dụng các móc lọc.

Thông tin khác

Thanh liên hệ trên điện thoại di động

Plugin này thêm các liên kết đến trang web của bạn khi được xem trên thiết bị di động. Bạn có thể chọn liên kết nào được hiển thị từ 13 tùy chọn bao gồm điện thoại, email, Skype, URL tùy chỉnh và mạng xã hội. Nó có tích hợp FontAwesome cho các biểu tượng. Bạn có thể tạo kiểu cho các liên kết và chọn kích thước, đường viền, độ mờ, v.v. Đặt menu ở đầu hoặc cuối màn hình. Menu vẫn còn trên màn hình khi người dùng cuộn. Nó cũng bao gồm cuộn lên đầu và giỏ hàng WooCommerce với các nút đếm mặt hàng.

Thông tin khác

Lời kết

Mức độ phổ biến của điện thoại thông minh để truy cập các trang web đang tăng lên mỗi ngày. Sự phổ biến này đưa các liên kết cuộc gọi từ một sự tiện lợi đơn giản trở thành một sự cần thiết hoàn toàn. Thêm số điện thoại có thể nhấp có thể tạo ra sự khác biệt giữa người dùng gọi cho doanh nghiệp của bạn hoặc đối thủ cạnh tranh của bạn. May mắn thay, việc tạo các liên kết có thể nhấp để thêm số điện thoại HTML vào đầu trang, chân trang, tiện ích con, trang và bài đăng trên trang web WordPress của bạn không khó đến thế.

Chúng tôi muốn nghe ý kiến ​​từ bạn. Bạn đã thêm liên kết cuộc gọi vào trang web của mình chưa? Hãy cho chúng tôi biết về trải nghiệm của bạn trong phần nhận xét bên dưới.

Hình ảnh nổi bật qua Jane Kelly / shutterstock.com


Xem thêm những thông tin liên quan đến chủ đề liên kết số điện thoại html

HOW TO ADD an HTML PHONE NUMBER CALL LINK [to your Shopify website] - step by step Shopify tutorial

alt

  • Tác giả: Rock Paper Copy - Shopify Experts
  • Ngày đăng: 2020-06-04
  • Đánh giá: 4 ⭐ ( 1356 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: See how to add an HTML Phone Number Call Link to your Shopify Website. Activate your phone numbers to take your SEO and UX to the next level and, make your website more user friendly, and skyrocket your leads and conversion rate. Watch now!

    Code to add: https://www.elegantthemes.com/blog/wordpress/call-link-html-phone-number

    Request a FREE audit for your own website: https://www.rockpapercopy.com/audit/

    Learn how to run an insanely profitable Shopify store. Over 200 in-depth videos by Shopify Expert will guide you from A to Z of selling online. Join Shopify Empire Masterclass here 👉 https://www.rockpapercopy.com/shopify-masterclass/

    This is how you get to Google page 1 in FOUR days 🔝 Join my Facebook community to learn how it's done❗Click here ⏩ https://www.facebook.com/groups/30days2page1/

    Skyrocket traffic with complete SEO package: https://www.rockpapercopy.com/shopify-seo-monthly/

    Book ecommerce consultation with Shopify SEO expert: https://www.rockpapercopy.com/consultation/

    Follow me on Instagram: https://www.instagram.com/rockpapercopyseo/

    Order website critique: https://www.rockpapercopy.com/critique/

    CHECK OTHER VIDEOS:

    SEO Optimization - Get to Page 1 in Google with Internal Links: https://www.youtube.com/watch?v=nJgWhKZpFjA

    Best Shopify apps for a complete newbie: https://www.youtube.com/watch?v=ZheKZdi7Y9k

    Influencer marketing: how to find Instagram Influencers: https://www.youtube.com/watch?v=riHdBJHWA8Q&t=767s

    READ ON OUR BLOG:

    Simple, Proven Keyword Research Formula to Find Relevant Keywords and with FREE Tools: https://www.rockpapercopy.com/keyword-research/

    This video is created for you by Shopify SEO expert Rock Paper Copy. We are accredited Shopify Expert and Bigcommerce Partner.

    We provide monthly SEO packages for Shopify website owners, and our Shopify SEO expert team works with a number of other platforms, including BigCommerce, WIX, award winning Squarespace and Weebly.

    If you enjoyed this video, please click 'LIKE' - and if you would love to learn more about SEO, website optimization and social media marketing, subscribe to my YouTube channel and visit my website: https://www.rockpapercopy.com

    Also follow us on social media:

    Instagram: https://www.instagram.com/rockpapercopyseo/
    Facebook: https://www.facebook.com/groups/30days2page1/
    LinkedIn: https://www.linkedin.com/in/maggietuczapska/

Hướng dẫn đổi số điện thoại Internet Banking (OTP) VIB cực đơn giản

  • Tác giả: www.vib.com.vn
  • Đánh giá: 5 ⭐ ( 4390 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Vì nhiều lý do mà khách hàng có nhu cầu đổi số điện thoại Internet Banking, để thực hiện điều này bạn có thể đến quầy giao dịch hoặc thay đổi Online.

Hướng Dẫn Tạo Liên Kết Click Gọi Điện Thoại Trên Website

  • Tác giả: dembuon.vn
  • Đánh giá: 4 ⭐ ( 7576 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Code để tạo liên kết số điện thoại trên website, để khi truy cập website từ smartphone sẽ bấm trực tiếp vào để gọi giúp khách hàng không cần phải nhớ...

BIDV miễn phí chọn tài khoản theo nickname và số điện thoại

  • Tác giả: bnews.vn
  • Đánh giá: 4 ⭐ ( 2984 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Từ ngày 11/7, khách hàng của BIDV có thể chọn số tài khoản ngân hàng gắn với biệt danh, tên gọi yêu thích (nickname), số điện thoại hoặc dãy số tùy chọn ngay trên ứng dụng BIDV SmartBanking.

Liên kết trong HTML

  • Tác giả: webvn.com
  • Đánh giá: 5 ⭐ ( 2414 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ví dụ và cách sử dụng liên kết trong HTML.

Mobile HTML: Quay số điện thoại qua siêu liên kết

  • Tác giả: helpex.vn
  • Đánh giá: 5 ⭐ ( 8209 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Vì HTML5 đang trở thành một cách thực sự thú vị để phát triển các ứng dụng cho các nền tảng di động thông minh lớn (iPhone, Blackberry, Android, Palm Pre, tất cả đều dựa trên Webkit), thật…

Tích hợp xác thực số điện thoại với FireBase

  • Tác giả: www.hoangweb.com
  • Đánh giá: 5 ⭐ ( 1524 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình