Hướng dẫn thêm nút Gọi điện thoại vào web Blog

Nguyen Xuan Ngoc 30/12/2020

Việc có thêm nút gọi điện thoại trên website sẽ giúp cho bạn tăng tỷ lệ chuyển đổi từ việc xem sản phẩm đến việc liên hệ để hỏi thông tin sản phẩm, cũng như tư vấn và cuối cùng là mua hàng. Chỉ cần nhấp vào nút gọi là khách hàng có thể liên hệ ngay với bạn qua số điện thoại, gọi trực tiếp bằng số điện thoại hoặc qua Zalo, Messenger hay 1 ứng dụng gọi điện miễn phí mà khách hàng đang cài đặt trên điện thoại của mình.

Trong bài viết này mình sẽ hướng dẫn cho các bạn thực hiện, chỉ cần thêm đoạn code bên dưới, thay số điện thoại bạn muốn là website của bạn đã có thể có tính năng này

Đầu tiên các bạn vào phần quản trị của Blog bằng cách vào Chủ đề > Chỉnh sửa HTML, sau đó các bạn nhấp Ctrl + F trên các đoạn COde để mở chức năng tìm kiếm và tìm đến thẻ </body> và thêm đoạn css sau trước thẻ </body> nhé

+ Hiển thị nút gọi trên máy tính và điện thoại

<div><p class='call-text'><a href='tel:0916063032' title='Liên Hệ Chúng Tôi' > Liên Hệ Chúng Tôi </a></p>

</a>

</div>

<style>

@media screen and (max-width: 1920px) {

.call-now-button { display: flex !important; background: #d818db; }

.quick-call-button { display: block !important; }

}

@media screen and (min-width: px) {

.call-now-button .call-text { display: none !important; }

}

@media screen and (max-width: 1024px) {

.call-now-button .call-text { display: none !important; }

}

.call-now-button { top: 80%; }

.call-now-button { left: 3%; }

.call-now-button { background: #d818db; }

.quick-alo-ph-btn-icon { background-color: #ffffff !important; }

.call-now-button .call-text { color: #fff; }

</style>

+ Chỉ hiển thị nút gọi trên di động

<b:if cond='data:blog.isMobileRequest != "true"'>

<div class='quick-call-button'></div>

<div class='call-now-button'>

<div><p class='call-text'><a href='tel:0909999999' title='Liên Hệ Chúng Tôi' > Liên Hệ Chúng Tôi </a></p>

<a href='tel:0909999999' title='Liên Hệ Chúng Tôi' >

<div class='quick-alo-ph-circle'></div>

<div class='quick-alo-ph-circle-fill'></div>

<div class='quick-alo-ph-btn-icon quick-alo-phone-img-circle'></div>

</a>

</div>

<style>

@media screen and (max-width: 1920px) {

.call-now-button { display: flex !important; background: #d818db; }

.quick-call-button { display: block !important; }

}

@media screen and (min-width: px) {

.call-now-button .call-text { display: none !important; }

}

@media screen and (max-width: 1024px) {

.call-now-button .call-text { display: none !important; }

}

.call-now-button { top: 80%; }

.call-now-button { left: 3%; }

.call-now-button { background: #d818db; }

.quick-alo-ph-btn-icon { background-color: #ffffff !important; }

.call-now-button .call-text { color: #fff; }

</style>

<link rel='stylesheet' id='lv_css-css' href='https://cdn.jsdelivr.net/gh/hongblogger/2019@master/quick-call-button-hong.css' type='text/css' media='all' />

</b:if>

Lưu ý : Các bạn sau đó thay SỐ ĐIỆN THOẠI CỦA MÌNH vào số điện thoại mặc định ở trên nhé.

Tags: blog