Elementor Widget BukuTamu Pro

Panduan lengkap penggunaan widget dinamis untuk mendesain undangan digital interaktif yang terhubung langsung dengan sistem BukuTamu Pro.

Konsep Headless Fetching

Integrasi ini menggunakan pendekatan Headless Fetching. Seluruh data tamu tidak disimpan di dalam database WordPress Anda, melainkan ditarik secara langsung (*real-time*) dari backend BukuTamu Pro menggunakan JavaScript Fetch API yang sangat ringan. Hal ini menjaga performa website undangan Anda tetap kencang tanpa membebani server WordPress.

Apa itu Widget BukuTamu Pro?

Elementor adalah Page Builder visual di WordPress yang memungkinkan Anda mendesain undangan digital tanpa perlu menyentuh baris kode (Drag & Drop). Widget adalah komponen desain siap pakai yang bisa Anda masukkan ke dalam halaman tersebut.

Saat ini telah tersedia 4 Widget Khusus (Addon) yang otomatis aktif setelah Anda menginstal plugin BukuTamu Pro di WordPress:

  • BP Guest Name (Nama Dinamis)
  • BP QR Code (Tiket Digital)
  • BP Selfie Scanner (RSVP & Foto)
  • BP Souvenir Claim (Status Hadiah)
Daftar 4 Widget Khusus BukuTamu Pro di Panel Elementor

Visual: Tampilan kategori BukuTamu Pro pada panel widget Elementor (Search: "BP").

Bagaimana Cara Integrasinya?

Cukup cari kategori BukuTamu Pro pada kolom pencarian widget di sisi kiri editor Elementor, lalu tarik (*drag*) widget tersebut ke posisi yang Anda inginkan pada desain undangan.


Pilih Panduan Widget:

Dinamis Nama Tamu

Tampilkan Nama, Kategori (VIP), dan jumlah Pax tamu secara otomatis dari link undangan unik.

QR Code Undangan

Tiket masuk digital berupa kode QR unik yang berfungsi sebagai kunci utama proses check-in di ballroom.

Selfie & RSVP

Fitur interaktif untuk mengumpulkan foto selfie tamu sekaligus konfirmasi kehadiran otomatis.

Status Souvenir

Indikator visual pengambilan hadiah secara real-time untuk memudahkan petugas resepsionis.


Instalasi & Lisensi Plugin

Sebelum Anda dapat menggunakan widget Elementor, Anda wajib menginstal plugin dan melakukan aktivasi lisensi pada website WordPress acara Anda. BukuTamu Pro menggunakan sistem proteksi canggih (License Gate) di mana widget hanya akan muncul jika lisensi instalasi merespon aktif dan valid dari server utama.

Langkah-Langkah Mendapatkan & Instalasi Plugin:

  1. Masuk ke panel kendali utama BukuTamu Pro Anda (CMS).
  2. Tuju ke menu Settings lalu buka tab Lisensi Plugin.

    [Placeholder] Visual: Letak tab Lisensi Plugin di menu Settings CMS.

  3. Di dalam panel tersebut (Jika Anda memiliki paket berlangganan aktif), tekan tombol Download Plugin untuk mengunduh versi rilis (*.zip*) terbarunya.
  4. Jangan berpindah dari halaman ini, perhatikan informasi Kode Lisensi (License Key) Anda (Contoh format: BP-XXXX-XXXX-XXXX-XXXX) lalu klik tombol Copy Key.
  5. Beralih ke halaman **WP-Admin** di website WordPress undangan Anda. Lakukan instalasi plugin (Plugins → Add New → Upload Plugin) menggunakan file ZIP yang sudah didownload, lalu Aktifkan (Activate).

[Placeholder] Visual: Letak menu download & copy lisensi di CMS BukuTamu Pro.


Memulai Konfigurasi Plugin

Setelah plugin BukuTamu Pro aktif di WordPress Anda, kita perlu menyambungkannya dengan Sistem Pusat agar bisa saling bertukar data.

A. Langkah Konfigurasi API Base (Wajib Diselesaikan Pertama)

  1. Tuju ke menu baru BukuTamu Pro di sidebar kiri WordPress Anda.
  2. Anda mungkin akan melihat peringatan berwarna kuning "Pengaturan API Belum Tersedia".
  3. Klik tab Pengaturan API.
  4. Masukkan URL API Base (URL tempat utama aplikasi Dashboard BukuTamu Pro Anda diinstal/dihostingkan, misal: https://app.bukutamu.net).
  5. Jangan lupa klik Simpan Pengaturan.
Langkah Konfigurasi URL API Base pada Plugin BukuTamu Pro

Visual: Letak tab Pengaturan API di aplikasi WordPress plugin BukuTamu Pro.

B. Langkah Aktivasi Lisensi Elementor

  1. Masih di menu WP-Admin BukuTamu Pro, sekarang Anda dapat membuka tab Lisensi.
  2. Paste (Tempel) kode License Key yang telah Anda salin sebelumnya dari Dashboard CMS.
  3. Klik tombol Aktivasi.
  4. Jika integrasinya berhasil (Domain dan Kunci cocok), Status badge akan berubah hijau menjadi Aktif. Pada titik ini, seluruh Widget BukuTamu Pro otomatis terbuka dan siap di digunakan di desain Elementor Anda.

[Placeholder] Visual: Tampilan Tab Lisensi dengan status Aktif di pengaturan plugin WordPress.

Status Real-Time & Heartbeat

Plugin akan bekerja secara senyap di latar belakang mengecek masa aktif paket Anda (Heartbeat Check). Apabila langganan CMS Anda kedaluwarsa sewaktu-waktu, seluruh fungsi dan tombol widget Elementor di hadapan pengunjung undangan akan otomatis dinonaktifkan asimetris secara elegan tanpa mengganggu atau merusak sisa desain undangan Anda secara umum.


Persiapan Halaman Undangan

Sama pentingnya dengan kunci lisensi global, pada layar editor di masing-masing page/halaman, BukuTamu Pro memerlukan spesifikasi target Event (Acara) untuk mengidentifikasi database tujuan dari input tamu yang masuk.

Langkah Menyambungkan Undangan:

  1. Di halaman Elementor tempat undangan Anda di desain, klik panel pengaturan halaman (Meta Box) roda gigi di sudut kiri bawah Elementor.
  2. Cari seksi pengaturan khusus berlogo BukuTamu Pro, lalu masukkan kombinasi angka Event ID.
  3. Dari mana mendapatkan Event ID ini? - Silakan Anda buka kembali Dashboard Backend pada menu Daftar Event, ID ini terlampir pada masing-masing baris tabel event Anda.
Cara Memasukkan Event ID pada Meta Box Elementor

Visual: Area pengisian Event ID pada menu pengaturan halaman (Meta Box) di editor WordPress.

Cara Menemukan Event ID yang Benar di Dashboard Backend

Visual: Letak kolom ID pada tabel Daftar Event sebagai rujukan pengisian sistem.

Langkah Final: Sinkronisasi URL Undangan

Agar integrasinya berjalan dengan benar, sebagai langkah final, jangan lupa sinkronkan URL Base Undangan di menu Edit Event pada panel Backend CMS Anda. Ini memastikan seluruh tombol "Bagikan" otomatis merujuk ke halaman Elementor baru tersebut.

  1. Copy link permalink WordPress yang telah selesai Anda buat halamannya.
  2. Buka CMS Dashboard, pergilah ke menu Daftar Event → klik Edit Event.
  3. Di dalam formulir, cari komponen form Sinkronasi URL Base Undangan lalu paste. Simpan pembaruan tersebut.
Setup Sync URL Base Undangan Backend ke Permalink Elementor WordPress

Visual: Area input URL Base Undangan untuk integrasi tombol share otomatis.

Penting: Keamanan SSL (HTTPS)

Khusus untuk fitur Selfie & RSVP, akses kamera HTML5 browser hanya akan diizinkan secara hukum jika domain undangan Anda sudah menggunakan Sertifikat HTTPS Tersertifikasi. Jika masih HTTP, fitur tangkapan momen akan dipaksa tak berfungsi oleh restriksi keamanan browser Apple/Google.

Tampilan di Editor Elementor

Jangan panik jika data tamu tidak muncul saat Anda sedang mengedit di Elementor. Editor hanya akan menampilkan fallback text (teks pengganti). Data asli hanya akan muncul ketika halaman dibuka melalui link undangan resmi yang memiliki parameter unik tamu.