Kali ini saya akan berbagi bagaimana cara menampilkan Sales Proof di website lain, yang datanya diambil dari website utama yang sudah terinstal plugin WeddingSaas Pro (WDSPro).
Tujuannya, kita ingin menampilkan notifikasi pembelian secara di berbagai halaman atau website berbeda misalnya landing page promosi, blog event, atau microsite penawaran.
Dan caranya cukup sederhana, yaitu dengan menggunakan REST API.
Langsung saja silahkan ikuti panduan berikut:
1. Mengirim Data dari Website Sumber
Langkah pertama, kita perlu membuat endpoint REST API di website sumber agar data sales bisa diambil oleh website lain.
Untuk itu, silakan tempelkan kode berikut di file functions.php pada theme (atau child theme) di website yang menggunakan plugin WDSPro:
define('SALESPROOF_API_TOKEN', 'isi_token_kamu_disini');
define('SALESPROOF_API_CACHE_DURATION', 60);
define('SALESPROOF_API_MAX_NOTIF', 10);
add_action('rest_api_init', function () {
register_rest_route('salesproof/v1', '/sales', [
'methods' => 'GET',
'callback' => 'salesproof_api_sales_db',
'permission_callback' => function () {
$headers = getallheaders();
$token = '';
if (!empty($headers['Authorization']) && preg_match('/Bearer\s+(.*)$/i', $headers['Authorization'], $matches)) {
$token = sanitize_text_field($matches[1]);
}
return hash_equals(SALESPROOF_API_TOKEN, $token);
}
]);
});
function salesproof_api_sales_db() {
global $wpdb;
$cache_key = 'salesproof_sales_cache';
$cached = get_transient($cache_key);
if ($cached !== false) {
return rest_ensure_response($cached);
}
$data = [];
$results = $wpdb->get_results("
SELECT user_id, summary, total, created_at
FROM {$wpdb->prefix}wds_invoice
WHERE total >= 0 AND status = 'completed'
ORDER BY ID DESC
LIMIT " . intval(SALESPROOF_API_MAX_NOTIF)
);
foreach ($results as $row) {
$user = get_userdata($row->user_id);
$nama = ($user && $user->display_name) ? $user->display_name : 'Seseorang';
// Parsing kolom serialized summary
$summary = maybe_unserialize($row->summary);
$produk = isset($summary['product_title']) ? $summary['product_title'] : 'Produk';
$time_ago = human_time_diff(strtotime($row->created_at), current_time('timestamp')) . ' yang lalu';
$data[] = [
'nama' => esc_html($nama),
'produk' => esc_html($produk),
'waktu' => esc_html($time_ago),
'total' => (float) $row->total,
];
}
set_transient($cache_key, $data, SALESPROOF_API_CACHE_DURATION);
return rest_ensure_response($data);
}
Kode di atas akan:
- Membuat endpoint API dengan URL:
https://namadomain.com/wp-json/salesproof/v1/sales - Membuat Token untuk kunci akses data sales di Web B.
- Mengambil sata sales dari database untuk di teruskan ke REST API
2. Menampilkan Sales Proof di Website Tujuan
Setelah REST API tersedia, langkah selanjutnya adalah menampilkan notifikasi tersebut di website lain (Web B).
Kamu hanya perlu menambahkan HTML dan JavaScript berikut di halaman mana saja, bisa di dalam widget HTML:
<div id="salesproof-widget" style="position: fixed; bottom: 50px; left: 20px; z-index: 9999;"></div>
<style>
/* Salesproof Notification */
.salesproof-box {
position: relative;
background: #fff;
border: 1px solid #ddd;
padding: 10px 15px;
margin-top: 10px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
border-radius: 10px;
display: flex;
align-items: center;
max-width: 250px;
font-family: sans-serif;
font-size: 14px;
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.5s ease forwards;
z-index: 9999 !important;
}
/* Animasi muncul */
@keyframes fadeInUp {
from {opacity: 0; transform: translateY(20px);}
to {opacity: 1; transform: translateY(0);}
}
.salesproof-box img {
width: 48px;
height: 48px;
border-radius: 50%; /* Ikon bulat */
object-fit: cover;
margin-right: 10px;
}
.salesproof-box .salesproof-text {
flex-grow: 1;
}
.salesproof-box .salesproof-text strong {
font-weight: 600;
font-size: 13px;
}
.salesproof-box .salesproof-text em {
font-size: 12px;
font-style: normal;
}
.salesproof-box .salesproof-text small {
font-size: 10px;
color: #555;
}
@media (max-width: 768px) {
#salesproof-widget {
bottom: 80px;
left: 15px;
max-width: 90%;
}
}
</style>
<script>
(function () {
const API_URL = 'https://namadomain.com/wp-json/salesproof/v1/sales'; // Ganti nama domain sumber Rest API
const TOKEN = 'isi_token_kamu_disini'; // Ganti token API kamu
const ICON_URL = 'https://namadomain.com/wp-content/uploads/logo-andi.png';
fetch(API_URL, {
method: 'GET',
headers: {
'Authorization': 'Bearer ' + TOKEN
}
})
.then(res => res.json())
.then(data => {
if (!Array.isArray(data)) return;
let container = document.getElementById('salesproof-widget');
// Filter hanya total > 0
// Jika Produk Trial ingin dimunculkan ubah jadi => 0
const filteredData = data.filter(item => item.total > 0);
filteredData.forEach((item, index) => {
// Batasi Jumlah kata pada nama
const nameParts = item.nama.trim().split(' ');
const displayName = nameParts.slice(0, 2).join(' ');
const box = document.createElement('div');
box.className = 'salesproof-box';
box.innerHTML = `
<img src="${ICON_URL}" alt="icon">
<div class="salesproof-text">
<strong>${displayName}</strong> membeli <em>${item.produk}</em><br>
<small>${item.waktu}</small>
</div>
`;
// Tampilkan dengan delay per notifikasi
setTimeout(() => {
container.appendChild(box);
box.style.opacity = 1;
// Auto hide setelah 4 detik
setTimeout(() => {
box.style.opacity = 0;
setTimeout(() => box.remove(), 500);
}, 4000);
}, index * 5000); // Delay 5 detik antar notifikasi
});
})
.catch(err => console.error('Salesproof API error:', err));
})();
</script>Script ini akan:
- Mengambil data dari API yang sudah kita buat tadi.
- Menampilkan notifikasi satu per satu di pojok kiri bawah layar.
⚠️ Catatan Penting!
Cara ini cukup simple dan efektif, tapi ada beberapa hal yang perlu diperhatikan:
- Gunakan token yang aman dan panjang untuk mencegah akses dari pihak tidak dikenal.
- Untuk menghindari beban berlebih, endpoint sudah menggunakan cache selama beberapa detik.
- Data hanya diambil dari Website yang menggunakan WDS Pro, jadi kalau kamu pakai WDS Lite atau sistem lain, maka perlu modifikasi tambahan.
✨ Saran Penggunaan Jangka Panjang
Cara yang saya tunjukkan ini merupakan versi manual dan sederhana, sangat cocok untuk keperluan ringan seperti uji coba atau kebutuhan cepat di satu-dua website.
Namun jika kamu berencana menggunakannya secara berkelanjutan atau ingin tampilan yang lebih rapi dan lebih aman, saya sangat menyarankan untuk menjadikannya sebuah plugin.
Dengan menjadikannya plugin, kamu bisa menyimpan URL endpoint dan token API langsung di backend, sehingga tidak muncul di source code dan lebih sulit diakses oleh pihak luar.
Perlu dicatat juga bahwa meskipun metode diatas ini sudah menggunakan token dalam Authorization header, dan tidak bisa diakses hanya dengan menambahkan ?token= di URL, token tetap bisa terlihat jika kamu menyimpannya di script JavaScript frontend. Jadi, menyembunyikannya di backend melelui plugin akan jauh lebih aman.
🚀 Alternatif Lebih Praktis dan Lebih Aman Pakai Plugin Sales Notify Pro
Kalau kamu ingin versi yang lebih simpel dan langsung pakai, saya sudah buatkan plugin Salesproof versi ringan dan telah di optimasi.
Plugin ini:
- Mendukung berbagai sumber:
Dummy, REST API, WDS Lite, dan WDS Pro. New Update : WooCoomerece dan EDD - Pengaturan Tampilan Salesproof mudah diatur dan disesuaikan dari Dashboard.
- Branding Salesproof bisa dibedakan dari website utama jika pakai Rest API.
Cek selengkapnya Plugin Sales Notify Pro disini:
https://silentproject.web.id/downloads/salesnotify-pro/