1. Popup đăng ký là gì?
Khi truy cập vào bất kỳ một trang web nào, đặc biệt là những website bán hàng, thương mại điện tử, người dùng sẽ nhìn thấy những khung cửa sổ nhỏ hiện lên. Để tiếp tục theo dõi nội dung trên website, họ sẽ thực hiện đúng theo yêu cầu của popup, hoặc tắt đi nếu thấy không hứng thú.
2.1 Tác động trực tiếp đến tâm lý mua hàng
Nếu những lời đề nghị trên popup đủ hấp dẫn, bạn có thể khiến khách hàng hành động theo đúng những gì bạn mong muốn. Tuy nhiên, đừng quá lạm dụng khi cố gắng tác động đến khách hàng bằng cách xuất hiện thật nhiều. Vì điều này có thể khiến họ cảm thấy khó chịu và ảnh hưởng trực tiếp đến trải nghiệm của khách hàng.
2.2 Tăng tỷ lệ chuyển đổi
Một nghiên cứu của Aweber cho biết website dùng popup có tỷ lệ chuyển đổi cao hơn 1375% so với các kênh truyền thống khác. Trong đó, với các website bán hàng cài popup, thì tỷ lệ hủy bỏ giỏ hàng cũng giảm tới 235%.
Chưa hết, theo 3 cuộc thử nghiệm của Social Media Examiner, popup giúp các website thu về lượng email gấp hơn 10 lần banner ở các vị trí khác trên website.
Chỉ với những con số đó, chắc chắn bạn đã thấy được lý do tại sao popup lại là một tính năng không thể thiếu trong các website như vậy.
So với các kênh truyền thống, popup truyền tải những thông điệp khuyến mãi đến người dùng nhanh hơn và tốt hơn những phương tiện khác.
2.3 Thu hút sự chú ý của người dùng
Khách hàng truy cập vào một website thường có một khoảng thời gian tập trung chú ý ngắn. Họ thường chỉ tập trung vào những thông điệp họ đặc biệt quan tâm mà không chú ý đến bất kỳ thông điệp nào khác.
Dựa vào mục tiêu của từng chiến dịch, có những loại popup khác nhau. Mỗi loại popup sẽ phát huy trong từng trường hợp cụ thể.
Nếu mục tiêu của bạn là tăng độ nhận diện thương hiệu thì đây chính là hình thức lý tưởng giúp bạn thực hiện điều này. Loại popup này thường xuất hiện dưới dạng cửa sổ con trong một thời gian ngắn, vị trí đặt ở trung tâm website hoặc được xuất hiện ở một góc nào đó trên trang chủ.
Hình thức này hiển thị dưới dạng làm mờ nền và xuất hiện khiến khách hàng dễ dàng bị gây ấn tượng khi thông điệp của bạn đủ thu hút và thuyết phục họ. Những nội dung bạn muốn nhấn mạnh cũng có thể làm nổi bật trên nền mờ để tăng sự chú ý với người dùng.
Phần lớn khách hàng có quyết định hành động trên trang sau khi đã đọc hết một phần hoặc toàn bộ nội dung trang. Vì vậy, popup xuất hiện khi người dùng tới cuối trang sẽ mở lên cửa sổ khi họ truy cập đến cuối nội dung.
Cách này không chỉ mang lại tỷ lệ chuyển đổi tốt hơn mà cũng giảm mức độ làm phiền với những người không muốn đăng ký chia sẻ thông tin ngay từ đầu. Bên cạnh đó, đây cũng là cách tiếp thêm động lực giúp người dùng dễ dàng đưa ra quyết định ngay lập tức.
Điều này có nghĩa bạn phải đưa ra một lời đề nghị hấp dẫn và mang tính cá nhân hóa cao thì mới có thể tăng tỷ lệ chuyển đổi của loại popup này.
Bước 2: Tại ô tìm kiếm, bạn nhập từ khóa “popup”
Bước 3: Bạn tìm plugin “Popup Maker”, sau đó ấn Cài đặt và đợi khoảng 30s để wordpress kích hoạt popup và sử dụng trên website của bạn.
Sau khi đã kích hoạt Popup Maker, ở menu quản trị wordpress sẽ có thêm menu mới tên “Popup Maker”, bạn truy cập vào đây chọn ” Add Popup” để thêm popup mới.
Bạn đặt tiêu đề cho popup(Popup Name)
Viết nội dung popup vào phần soạn thảo văn bản phía dưới. Bạn có thể chèn chữ, ảnh, video, form liên hệ tùy theo ý muốn.
Trong phần popup setting, bạn có thể tùy chỉnh các cách popup tự xuất hiện
Triggers: đây là phần quy định khi nào popup hiển thị.
Chọn “Would you like to set up a cookie as well”, phía dưới chọn “On Popup Close” – mục đích của việc này là tạo cookie cho khách hàng, sau khi họ đóng popup của bạn, popup sẽ không hiển thị sau một thời gian với khách hàng đó.
Ấn ” Add”.
Tại cửa sổ tiếp theo, bạn quy định thời gian khi popup hiển thị sau khi website load xong.
Ngoài ra, để thiết lập thêm nhiều chi tiết khác, bạn có thể cài đặt:
Appearance: Chọn giao diện
Size: kích thước của popup
Animation: hiệu ứng khi popup xuất hiện
Position: vị trí popup xuất hiện, chọn Location là ”Middle Center” để popup xuất hiện phía giữa màn hình
Để popup trông đẹp mắt và thu hút hơn, bạn nên tìm hiểu kỹ và bổ sung các nội dung phù hợp.
Với các bạn có kiến thức về code web, cách làm này sẽ là một phương án lựa chọn đơn giản và mang lại hiệu quả cao.
Trước tiên, bạn phải tạo một tệp HTML có tên “index.html” với nội dung như sau:
Sau đó tiến hành tạo file CSS có tên “style.css” và đặt các code vào:
*, *:before, *:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #fff;
font-family: ‘Hammersmith One’, sans-serif;
}
.button {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.button button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: inherit;
background-color: #f66867;
border: 0;
padding: 15px 25px;
color: #fff;
text-transform: uppercase;
font-size: 21px;
letter-spacing: 1px;
width: 200px;
overflow: hidden;
outline: 0;
transition: all 0.4s;
visibility: visible;
opacity: 1;
font-weight: bold;
box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.6);
}
.button button:hover {
cursor: pointer;
background-color: #2ab1ce;
}
.button button span {
opacity: 1;
}
visibility: hidden;
oacity: 0;
}
.popup {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.9);
overflow-y: auto;
box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.4);
visibility: hidden;
opacity: 0;
transition: all 0.3s;
z-index: 10;
background-color: #ffffff;
width: 100%;
height: 100%;
}
.popup .content {
width: 100%;
max-width: 900px;
overflow: hidden;
text-align: center;
position: relative;
min-height: 100vh;
}
.popup .content .container {
padding: 100px 20px 140px;
}
.popup .content .closebtn {
position: absolute;
bottom: 20px;
right: 20px;
font-size: 3.1rem;
letter-spacing: 0.05rem;
color: #3e4146;
transition: all 0.4s;
}
.popup .content .closebtn:hover {
cursor: pointer;
color: #f66867;
}
.popup .content .circles .circle {
position: absolute;
border-radius: 100%;
z-index: 11;
}
.popup .content .circles .circle:nth-of-type(1) {
top: -80px;
right: -80px;
width: 160px;
height: 160px;
background-color: #2ab1ce;
}
.popup .content .circles .circle:nth-of-type(2) {
bottom: -120px;
left: -120px;
width: 240px;
height: 240px;
background-color: #f66867;
}
.popup .content .circles .circle:nth-of-type(3) {
top: -50px;
left: -50px;
width: 100px;
height: 100px;
background-color: #333;
}
.popup .content .title h1 {
text-align: center;
color: #f66867;
text-transform: uppercase;
font-weight: 900;
font-size: 2.8rem;
letter-spacing: 0.05rem;
}
.popup .content img {
width: 100%;
max-width: 220px;
display: inline-block;
margin: 30px 0 40px 0;
opacity: 0;
transform: translateX(-60px);
transition: 0.2s;
-webkit-backface-visibility: hidden;
}
.popup .content .subscribe h1 {
font-size: 1.5rem;
color: #3e4146;
line-height: 130%;
letter-spacing: 0.07rem;
margin-bottom: 30px;
}
.popup .content .subscribe h1 span {
color: #f66867;
}
.popup .content .subscribe form {
overflow: hidden;
}
.popup .content .subscribe form input {
width: 100%;
float: left;
padding: 15px 20px;
text-align: center;
font-family: inherit;
font-size: 1.1rem;
letter-spacing: 0.05rem;
outline: 0;
}
.popup .content .subscribe form input[type=email] {
margin-bottom: 15px;
border: 1px solid #bec1c5;
transition: all 0.4s;
}
.popup .content .subscribe form input[type=email]:focus {
border-color: #3e4146;
}
.popup .content .subscribe form input[type=submit] {
background-color: #f66867;
color: #ffffff;
border: 1px solid #f66867;
transition: all 0.4s;
}
.popup .content .subscribe form input[type=submit]:hover {
cursor: pointer;
background-color: #2ab1ce;
border-color: #2ab1ce;
}
.popup.open {
visibility: visible;
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.popup.open img {
opacity: 1;
transition: 1s;
transition-delay: 0.3s;
transform: translateX(0px);
}
@media (min-width: 568px) {
.popup .content {
min-height: inherit;
}
.popup .content .container {
padding: 50px 20px 80px;
}
}
@media (min-width: 768px) {
.popup .content .container {
padding: 70px 0px 90px;
max-width: 520px;
margin: 0 auto;
}
.popup .content .circles .circle:nth-of-type(1) {
top: -190px;
right: -190px;
width: 380px;
height: 380px;
}
.popup .content .subscribe form input[type=email] {
margin-bottom: 0px;
width: 75%;
border-right-width: 0px;
}
.popup .content .subscribe form input[type=submit] {
width: 25%;
}
.popup {
width: calc(100% – 40px);
height: auto;
max-width: 900px;
}
}
Bước cuối là tạo một tệp JavaScript tên “function.js” và đặt vào đoạn code
$(‘.popup’).addClass(‘open’);
});
$(‘.popup’).removeClass(‘open’);
});
Như vậy là bạn đã tạo xong một popup form đăng ký email bằng html.
Nếu các cách trên chưa đủ để bạn thỏa sức sáng tạo các thông điệp khuyến mãi của mình, thì chắc chắn tính năng của AutoAds MaxLead là lựa chọn tốt nhất.
Là một công cụ tối đa chuyển đổi website, tính năng popup của MaxLead mang đến những trải nghiệm cho tất cả những người truy cập vào trang web của bạn.
Kho template đa dạng, phong phú
Dễ dàng tạo các mẫu popup chỉ trong 3 bước
Không cần phụ thuộc designer hoặc IT
Nếu bạn là người lần đầu tiên sử dụng MaxLead, chỉ trong 5 phút, bạn có thể cài đặt xong nút cuộc gọi (hoặc thêm các nút liên hệ khác) với các bước đơn giản.
Bước 2: Đăng ký tài khoản dùng thử
Bước 3: Điền thông tin website muốn cài đặt MaxLead
Bước 4: Liên kết MaxLead với tài khoản Google Ads để cài đặt theo dõi chuyển đổi trên Google Ads tự động
Bước 5: Thiết lập nhanh các nút đa kênh liên hệ
Bước 6: 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 cài đặt popup.
Bước 1: Trong trang tổng quan, bạn chọn phần cài đặt
Bước 2: Chọn template trong kho template của MaxLead 2.0 (Sẽ được cập nhật thêm nhiều template khác trong các phiên bản sau)
Bước 3: Chỉnh sửa nội dung của pop-up bạn muốn hiển thị (Thông điệp, hình ảnh, thu email hay Số điện thoại,..)
Bước 4: Xuất bản template vừa cài đặt lên website