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.

Persiapan Awal (API Setup)

Agar widget dapat berfungsi, Anda wajib melakukan langkah-langkah berikut di WordPress:

  1. Masuk ke menu BukuTamu Pro di sidebar WordPress.
  2. Pada tab Pengaturan API, masukkan URL API Base Anda (Contoh: https://app.bukutamu.net).
    3. Langkah Konfigurasi URL API Base pada Plugin BukuTamu Pro di Dashboard WordPress

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

  3. Di halaman Elementor undangan, pastikan Anda sudah memasukkan Event ID yang sesuai dari dashboard backend pada tab pengaturan halaman (Meta Box).
    4. Cara Memasukkan Event ID pada Meta Box Elementor untuk Sinkronisasi Data BukuTamu Pro

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

  4. Berikutnya, pastikan Event ID yang Anda masukkan adalah benar. Anda dapat menemukannya di dashboard backend pada menu Daftar Event.
    5. Cara Menemukan Event ID yang Benar di Dashboard Backend BukuTamu Pro

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

  5. Sebagai Langkah Final, jangan lupa sinkronkan URL Base Undangan di menu Edit Event (Backend) agar tombol "Bagikan" merujuk ke halaman Elementor baru Anda.
    6. 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 browser hanya akan diizinkan jika domain undangan Anda sudah menggunakan HTTPS. Jika masih menggunakan HTTP biasa, tombol selfie tidak akan berfungsi karena diblokir oleh sistem keamanan browser.

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.