Tạo popup đăng ký trên website nhanh chóng với các cách đơn giản nhất

Ngày 29 tháng 6 năm 2020 | Kiến thức marketing

Tạo popup đăng ký là yếu tố cần thiết của các website bây giờ. Bạn không thể bỏ qua tính năng đặc biệt này nếu muốn tận dụng tối đa mọi cơ hội thu khách hàng tiềm năng. Hãy cùng AutoAds tìm hiểu các cách tạo popup đăng ký đơn giản và nhanh chóng trong bài viết dưới đây nhé!

1. Popup đăng ký là gì?

Popup là những mẩu quảng cáo bằng hình ảnh hiện ra khi bạn truy cập vào một website nào đó. Các đơn vị kinh doanh sẽ truyền tải những thông điệp, các sự kiện quảng bá, các chương trình khuyến mãi thông qua những nội dung được thể hiện trên popup.

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ú.

Popup là một trong những kênh quảng cáo phổ biến của Digital Marketing. Hiện nay, phần lớn các website đều đã cài đặt các popup quảng cáo để truyền tải nội dung của các chương trình khuyến mãi đến tất cả những người đã truy cập vào website, nhằm tăng tỷ lệ chuyển đổi.

Tại sao popup lại phổ biến như vậy? Hãy cùng tìm hiểu trong phần dưới nhé!

Có nhiều lý do khiến việc tạo popup đăng ký trở thành một trong những kênh truyền thông phổ biến hiện nay. Dưới đây là một số những lý giải cho thực tế đó.

2.1 Tác động trực tiếp đến tâm lý mua hàng

Những popup thu hút và hấp dẫn có thể kích thích đến nhu cầu muốn được trải nghiệm của người dùng. Hoặc nếu trong trường hợp bản thân người dùng đang có nhu cầu, những mẩu quảng cáo popup sẽ là điểm chạm thích hợp khi người truy cập sẽ có thể tìm thấy những điều họ đang tìm kiếm.

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.

Hoạt động của các popup quảng cáo sẽ phá vỡ các điểm tập trung của khách hàng, hướng họ đến những nội dung, chương trình mà bạn đang hướng họ đến.

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ể.

Dạng quảng cáo này thu hút hoàn toàn sự chú ý của khách hàng khi đăng nhập vào website. Mỗi lần truy cập, người dùng sẽ nhìn thấy ngay lập tức những thông điệp và nội dung bạn muốn truyền tải.

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ủ.

Thay vì xuất hiện dưới dạng cửa sổ con như loại popup ở trên, dạng popup xen kẽ chiếm toàn bộ trang web của bạn để truyền tải những thông điệp mà bạn muốn quảng cáo tới khách hàng.

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.

Một cửa sổ với các chương trình ưu đãi hấp dẫn hiện ra khi người dùng có ý định thoát trang có thể giúp tăng tỷ lệ đăng ký và chuyển đổi cho website. Tại thời điểm khách hàng truy cập sắp đóng trang hoặc rời khỏi trình duyệt, hệ thống popup sẽ được kích hoạt và bật lên. Người dùng sẽ xem thêm nội dung thông tin bạn muốn truyền tải.

Đ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.

>>> Muốn tối ưu tỉ lệ chuyển đổi, hãy trải nghiệm miễn phí phần mềm Autoads tại đây:

Có nhiều cách để tiến hành tạo popup cho website. Các cách dưới đây sẽ giúp bạn dễ dàng tạo nhanh những popup khuyến mãi cho website của mình nhé!

Bước 1: Tại trang quản trị của wordpress, bạn vào phần Plugin ---> Cài mới

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ị.

Bạn chuyển từ “Click To Open” thành “Time Delay/ Auto Open”
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:

<!DOCTYPE html>

<head>

<title>CSS Popup Subscribe Form | Webdevtrick.com</title>

</head>

<body>

<button><span>Subscribe</span></button>

</div>

</div>

<h1>Become A Subscriber</h1>

</div>

<h1>Subscribe To Get The Notification Of Latest <span>POSTS</span></h1>

<form>

</form>

</div>

</body>

</html>

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;

}

.button.clicked button {

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

$(‘button’).click(function(){

$(‘.popup’).addClass(‘open’);

});

$(‘.popup .closebtn’).click(function(){

$(‘.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 1: Truy cập vào đường link https://autoads.asia/vi/cong-cu/maxlead

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

Vậy là bạn có thể dễ dàng tạo một popup quảng cáo thu hút người dùng ngay trên website của mình rồi.

Trên đây là 3 cách đơn giản để tạo popup đăng ký trên website. Hy vọng các bạn đã tìm được cho mình một công cụ hữu ích để triển khai các chương trình khuyến mãi đến người dùng nhanh nhất và hiệu quả nhất.

Novaon AutoAds là đối tác cao cấp của Google tại Đông Nam Á. Chúng tôi luôn cập nhật những thông tin, kiến thức mới nhất và cung cấp những công cụ tối ưu quảng cáo hiệu quả nhất: MaxLead - Đa kênh liên hệ website, Chặn click ảo, Tối ưu quảng cáo Google và Google Shopping.