Tạo Thông Báo Mua Hàng Ảo Kích Thích Người Mua (Không Plugin)

Tao Thong Bao Mua Hang Ao Kich Thich Nguoi Mua Min

Xem demo ở source code phía dưới

Ngồi một mình trong phòng, tôi đã tạo ra một đoạn mã siêu phàm để tăng tỷ lệ chuyển đổi. Nó không phải là phép màu, nhưng nó giống như một “bùa chú” FOMO (Fear Of Missing Out) để khiến khách hàng cảm thấy hụt hẫng nếu không mua ngay.

Bạn đã bao giờ cảm thấy như đang chạy đua với thời gian để không bỏ lỡ cơ hội? Đúng vậy, đó là cảm giác mà FOMO sẽ mang lại. Với đoạn mã này, chúng ta có thể tạo ra những thông báo khẩn cấp như “Hurry up! Chỉ còn một ít sản phẩm!” hay “Bạn HandX đã mua hàng…”.

Nhưng đừng lo, đây không phải là một đòn bẩy để ép buộc khách hàng mua hàng. Thực tế, FOMO chỉ đơn giản là tạo ra sự kích thích và ham muốn, giống như khi bạn thấy một chiếc bánh ngon ngọt trước mặt và không thể nhịn được. Chúng ta đều biết rằng giới hạn thời gian và số lượng có hạn sẽ khiến khách hàng “nhấp chuột” nhanh hơn.

Và đây là một bí mật nhỏ: FOMO không chỉ áp dụng cho sản phẩm mà còn cho cả dịch vụ. Bạn có thể tạo ra cảm giác “chỉ còn vài chỗ trống” cho một khóa học trực tuyến hoặc một dịch vụ đặc biệt. Điều quan trọng là khiến khách hàng cảm thấy họ sẽ bỏ lỡ điều gì đó tuyệt vời nếu không nhanh tay hành động.

Vậy bây giờ, hãy mang đoạn mã này và biến khách hàng của bạn thành những chủ nhân của sự kích thích và ham muốn. Hãy đảm bảo rằng bạn sử dụng FOMO một cách khéo léo và công bằng, vì chúng ta không muốn những cơn ác mộng về việc bán hàng không công bằng đang rình rập.

Chúc bạn thành công trong việc triển khai FOMO và hãy nhớ rằng việc tạo ra một chút kích thích cũng có thể làm cho thế giới thêm màu sắc!

Công việc của bạn bây giờ là chọn đoạn mã phía dưới, rồi đưa vô file function.php thôi

Mã có avatar là một icon bất kỳ

Mã php

function handx_fomo_widget() {
    // Process the data
    $data = array(
        array('name'=>'Nguyễn Thị Thuỳ Dung','phone'=>'0924xxx'),
        array('name'=>'Trần Văn Đức','phone'=>'0922xxx'),
        array('name'=>'Lê Thị Hồng Nga','phone'=>'0958xxx'),
        array('name'=>'Phạm Minh Tuấn','phone'=>'0977xxx'),
        array('name'=>'Đặng Thị Thu Hà','phone'=>'0972xxx'),
        array('name'=>'Bùi Văn Tùng','phone'=>'0975xxx'),
        array('name'=>'Lý Thị Kim Ngân','phone'=>'0962xxx'),
        array('name'=>'Vũ Thị Hương Lan','phone'=>'0955xxx'),
        array('name'=>'Hoàng Văn Thanh','phone'=>'0966xxx'),
        array('name'=>'Đỗ Thị Ngọc Trinh','phone'=>'0997xxx'),
        array('name'=>'Ngô Minh Hải','phone'=>'0968xxx'),
        array('name'=>'Trần Thị Thu Trang','phone'=>'0982xxx'),
        array('name'=>'Phan Văn Trung','phone'=>'0956xxx'),
        array('name'=>'Hồ Thị Hằng','phone'=>'0983xxx'),
        array('name'=>'Lê Văn Khánh','phone'=>'0973xxx'),
        array('name'=>'Đinh Thị Hoa','phone'=>'0942xxx'),
        array('name'=>'Nguyễn Minh Quân','phone'=>'0999xxx'),
        array('name'=>'Trần Thanh Hằng','phone'=>'0934xxx'),
        array('name'=>'Lý Văn Hiệp','phone'=>'0964xxx'),
        array('name'=>'Võ Thị Bích Ngọc','phone'=>'0934xxx'),
        array('name'=>'Hoàng Văn Đức','phone'=>'0933xxx'),
        array('name'=>'Trần Thị Minh Thu','phone'=>'0947xxx'),
        array('name'=>'Phạm Văn Tuấn','phone'=>'0969xxx'),
        array('name'=>'Đặng Thị Kim Oanh','phone'=>'0979xxx'),
        array('name'=>'Bùi Văn Trường','phone'=>'0974xxx'),
        array('name'=>'Lý Thị Hạnh','phone'=>'0956xxx'),
        array('name'=>'Vũ Văn Nam','phone'=>'0977xxx'),
        array('name'=>'Hoàng Thị Lan Anh','phone'=>'0921xxx'),
        array('name'=>'Nguyễn Văn Hoàn','phone'=>'0969xxx'),
        array('name'=>'Trần Thị Thúy Nga','phone'=>'0981xxx'),
        array('name'=>'Phan Văn Thành','phone'=>'0973xxx'),
        array('name'=>'Hồ Thị Thu Hà','phone'=>'0938xxx'),
        array('name'=>'Lê Văn Hùng','phone'=>'0974xxx'),
        array('name'=>'Đinh Thị Minh Châu','phone'=>'0956xxx'),
        array('name'=>'Nguyễn Minh Tú','phone'=>'0976xxx'),
        array('name'=>'Trần Thị Diễm Trinh','phone'=>'0996xxx'),
        array('name'=>'Phạm Văn Tâm','phone'=>'0945xxx'),
        array('name'=>'Đặng Thị Thu Hiền','phone'=>'0943xxx'),
        array('name'=>'Bùi Văn Nam','phone'=>'0923xxx'),
        array('name'=>'Lý Thị Kim Anh','phone'=>'0958xxx'),
        array('name'=>'Võ Thị Hải Yến','phone'=>'0937xxx'),
        array('name'=>'Hoàng Văn Hải','phone'=>'0998xxx'),
        array('name'=>'Trần Thị Thu Thủy','phone'=>'0916xxx'),
        array('name'=>'Phạm Văn Hùng','phone'=>'0949xxx'),
        array('name'=>'Đinh Thị Lan Anh','phone'=>'0945xxx'),
        array('name'=>'Nguyễn Minh Hải','phone'=>'0978xxx'),
        array('name'=>'Trần Thị Ngọc Hà','phone'=>'0977xxx'),
        array('name'=>'Phan Văn Huy','phone'=>'0913xxx'),
        array('name'=>'Hồ Thị Thu Trang','phone'=>'0973xxx'),
        array('name'=>'Lê Văn Quốc','phone'=>'0987xxx'),
        array('name'=>'Đinh Thị Kim Thoa','phone'=>'0963xxx'),
        array('name'=>'Nguyễn Văn Hải','phone'=>'0949xxx'),
        array('name'=>'Trần Thị Thu Hương','phone'=>'0939xxx'),
        array('name'=>'Phạm Văn Hòa','phone'=>'0998xxx'),
        array('name'=>'Đặng Thị Kim Dung','phone'=>'0978xxx'),
        array('name'=>'Bùi Văn Phúc','phone'=>'0971xxx'),
        array('name'=>'Lý Thị Bích Ngọc','phone'=>'0956xxx'),
        array('name'=>'Vũ Văn Tuấn','phone'=>'0978xxx'),
        array('name'=>'Hoàng Thị Thu Trang','phone'=>'0937xxx'),
        array('name'=>'Nguyễn Văn Khôi','phone'=>'0911xxx'),
        array('name'=>'Trần Thị Hà My','phone'=>'0929xxx'),
        array('name'=>'Phạm Văn Trường','phone'=>'0959xxx'),
        array('name'=>'Đinh Thị Lan Hương','phone'=>'0927xxx'),
        array('name'=>'Nguyễn Minh Hiếu','phone'=>'0973xxx'),
        array('name'=>'Trần Thị Thu Trúc','phone'=>'0941xxx'),
        array('name'=>'Phan Văn Nam','phone'=>'0964xxx'),
        array('name'=>'Hồ Thị Hồng Thắm','phone'=>'0986xxx'),
        array('name'=>'Lê Văn Duy','phone'=>'0913xxx'),
        array('name'=>'Đinh Thị Thúy Hằng','phone'=>'0943xxx'),
        array('name'=>'Nguyễn Văn Đức','phone'=>'0998xxx'),
        array('name'=>'Trần Thị Thanh Hà','phone'=>'0973xxx'),
        array('name'=>'Phạm Văn Thắng','phone'=>'0989xxx'),
        array('name'=>'Bùi Thị Thu Hiền','phone'=>'0912xxx'),
        array('name'=>'Lý Văn Sơn','phone'=>'0959xxx'),
        array('name'=>'Vũ Thị Thanh Hương','phone'=>'0959xxx'),
        array('name'=>'Hoàng Văn Tuấn','phone'=>'0974xxx'),
        array('name'=>'Nguyễn Thị Trang','phone'=>'0919xxx'),
        array('name'=>'Trần Văn Hiệp','phone'=>'0937xxx'),
        array('name'=>'Phạm Thị Hồng Nhung','phone'=>'0943xxx'),
        array('name'=>'Đặng Văn Tùng','phone'=>'0964xxx'),
        array('name'=>'Bùi Thị Thu Trang','phone'=>'0991xxx'),
        array('name'=>'Lý Văn Đức','phone'=>'0997xxx'),
        array('name'=>'Vũ Thị Thanh Thúy','phone'=>'0942xxx'),
        array('name'=>'Hoàng Văn Đăng','phone'=>'0939xxx'),
        array('name'=>'Nguyễn Thị Hồng Lân','phone'=>'0987xxx'),
        array('name'=>'Trần Văn Thành','phone'=>'0989xxx'),
        array('name'=>'Phạm Thị Hải Yến','phone'=>'0922xxx'),
        array('name'=>'Đặng Văn Hiệp','phone'=>'0929xxx'),
        array('name'=>'Bùi Thị Thu Hà','phone'=>'0948xxx'),
        array('name'=>'Lý Văn Tâm','phone'=>'0912xxx'),
        array('name'=>'Vũ Thị Thúy Trang','phone'=>'0937xxx'),
        array('name'=>'Hoàng Văn Nam','phone'=>'0989xxx'),
        array('name'=>'Nguyễn Thị Thúy Loan','phone'=>'0932xxx'),
        array('name'=>'Trần Văn Tú','phone'=>'0943xxx'),
        array('name'=>'Phạm Thị Hồng Đào','phone'=>'0993xxx'),
        array('name'=>'Đặng Văn Tuấn','phone'=>'0978xxx'),
        array('name'=>'Bùi Thị Thu Hương','phone'=>'0931xxx'),
        array('name'=>'Lý Văn Hoàn','phone'=>'0944xxx'),
        array('name'=>'Vũ Thị Thanh Hà','phone'=>'0995xxx'),
        array('name'=>'Hoàng Văn Trung','phone'=>'0947xxx')

    );

    // Display FOMO messages
    echo '<div id="fomo-container"></div>';

    echo '<script>';
    echo 'var fomoData = ' . json_encode($data) . ';';
    echo 'var fomoIndex = 0;';
    echo 'function displayNextFomo() {';
    echo '    var fomoContainer = document.getElementById("fomo-container");';
    echo '    var message = '<div class="fomo"><i class="avatar"></i> <span class="thu2"><strong>' + fomoData[fomoIndex].name + '</strong>(' + fomoData[fomoIndex].phone + ') <br>đã đặt lịch thành công!</span></div>';';
    echo '    var fomoMessage = document.createElement("div");';
    echo '    fomoMessage.className = "fomo-message";';
    echo '    fomoMessage.innerHTML = message;';
    echo '    fomoContainer.innerHTML = "";';
    echo '    fomoContainer.appendChild(fomoMessage);';
    echo '    fomoIndex = (fomoIndex + 1) % fomoData.length;';
    echo '    var randomTime = Math.random() * 5000 + 5000;'; // Tạo thời gian ngẫu nhiên trong khoảng từ 5s đến 10s
    echo '    setTimeout(hideFomo, randomTime);';
    echo '}';
    echo 'function hideFomo() {';
    echo '    var fomoContainer = document.getElementById("fomo-container");';
    echo '    fomoContainer.innerHTML = "";';
	echo '    var randomTime2 = Math.random() * 5000 + 5000;'; // Tạo thời gian ngẫu nhiên trong khoảng từ 5s đến 10s
    echo '    setTimeout(displayNextFomo, randomTime2);';
    echo '}';
    echo 'displayNextFomo();';
    echo '</script>';
}
add_action('wp_footer', 'handx_fomo_widget');

Các phần bạn có thể tuỳ biến:

  • Từ dòng 4 – 103: Dữ liệu trong mảng
  • Dòng 115: thay đổi nội dung tin nhắn
  • Dòng 112, 128 thay đổi thời gian hiển thị và thời gian đợi

Thêm css để hiện thị cho chuẩn nhé

Bạn hãy chèn css này trong phần Tuỳ biến > Style > Custom CSS

#fomo-container {
    position: fixed;
    top: 150px;
    right: 7%;
    animation: fomoAnimation 0.5s ease-in-out;
    padding: 10px;
    z-index: 9999;
}
.fomo-message {
    border-radius: 99px;
    margin: 10px auto;
    font-size: 14px;
    opacity: 0.9;
    background: #fff;
    border: 1px solid #fff;
    display: inline-block;
    box-shadow: 0 5px 62px 0 rgb(2 55 102 / 9%);
    padding: 10px 10px;
}
.fomo {
    display: flex;
}
.fomo-message strong {
    font-weight: 700;
}
i.avatar {
	content: "";
	border-radius: 100%;
	width: 40px;
	border: 2px solid #fba70a;
	height: 40px;
	margin-right: 10px;
	background-image: url(https://handx.vn/wp-content/uploads/2023/07/icon-menu.png);
	background-size: cover;
	cursor: pointer;
}

@keyframes fomoAnimation {
	0% {
		opacity: 0;
		transform: translateY(50px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

Thay đường dẫn ảnh(chỗ này là lười quá lấy luôn cái icon menu cho vào :D, bạn nào thích kiểu avatar thì cứ nhét vào là xong)

https://handx.vn/wp-content/uploads/2023/07/icon-menu.png

thành đường dẫn trên website của bạn. Lưu và tận hưởng!

Đoạn mã trên tối ưu hay không thì tôi không biết vì tôi chỉ làm theo trí tưởng tượng mà thôi, nếu bạn có cách nào tốt hơn thì giới thiệu mình nhé!

Thân Ái BBQ!

Tra cứu đơn hàng
Gọi tư vấn
Email: info@handx.vn
Chỉ đường
Tư vấn nhanh