InviteAround/Dokumentasi Partner

Dokumentasi Partner

Pelajari cara membuat, mengunggah, dan menjual template undangan di InviteAround

Unduh Template Contoh

Mulai dengan cepat menggunakan template contoh undangan PHP kami. Termasuk semua file yang diperlukan dan struktur yang benar.

Ikhtisar

InviteAround memungkinkan partner untuk membuat dan menjual template undangan. Pengguna dapat mengkustomisasi template Kamu dengan detail mereka, dan Kamu mendapatkan penghasilan dari setiap penjualan. Saat ini, kami mendukung template berbasis PHP dengan sinkronisasi data real-time.

Ringkasan Langkah Integrasi

Berikut gambaran lengkap alur integrasi. Template Kamu adalah halaman PHP; InviteAround mengirimkan data undangan ke dalamnya lewat POST, dan atribut data-bind menjaga semuanya tetap tersinkron secara live.

Buat template di PHP dengan kunci data-bind

Bangun undangan sebagai halaman PHP biasa (index.php), dan beri atribut data-bind pada setiap elemen yang menampilkan data dinamis. data-bind adalah kunci utama — inilah yang memungkinkan InviteAround melakukan live sync nilai ke template Kamu.

<!-- Every dynamic element gets a data-bind key -->
<h1 data-bind="fullname">Raka & Salsabila</h1>
<p data-bind="address">Jakarta, Indonesia</p>

Terima nilai lewat POST di PHP

Nilai tidak pernah di-hardcode. Server kami mengirimkan data ke index.php Kamu menggunakan method POST (body JSON), jadi template Kamu harus membacanya. Gunakan helper post(): mode preview mengembalikan nilai default.json, sedangkan mode published dan realtime mengembalikan nilai hasil POST.

// Values arrive as a JSON POST body from InviteAround's server
$input = json_decode(file_get_contents("php://input"), true) ?? [];

function post($key, $default = '') {
  global $input;
  $mode = $_GET['template-mode'] ?? null;

  if ($mode === 'preview') {
    return $default;                  // value from default.json
  }

  if ($mode === 'published' || $mode === 'realtime') {
    return $input[$key] ?? $default;  // value posted from admin
  }

  return $default;
}

// Map every key you need (fallback = default.json)
$config = [
  'fullname'    => post('fullname', $defaultConfig['fullname']),
  'address'     => post('address', $defaultConfig['address']),
  'weddingDate' => post('weddingDate', $defaultConfig['weddingDate']),
];

Import script SDK InviteAround

Script tag ini wajib ada di setiap template. Ini yang menjalankan live sync dan sistem RSVP:

<!-- Place inside <head> -->
<script src="https://storage.invitearound.com/libs/invitearound.js"></script>

Echo nilai di dalam elemen data-bind

Cetak setiap nilai di dalam elemen yang kunci data-bind-nya sesuai dengan kunci JSON, selalu di-escape dengan htmlspecialchars:

<!-- data-bind must match the JSON key, value echoed from POST -->
<h1 data-bind="fullname"><?= htmlspecialchars($config['fullname']) ?></h1>
<p data-bind="address"><?= htmlspecialchars($config['address']) ?></p>

Gunakan nilai di JavaScript juga

Nilai PHP juga bisa dipakai di script Kamu, misalnya untuk target countdown. Nilainya tetap harus diterima dari body POST — jangan di-hardcode:

// PHP value inside <script> - still received from the POST body
const target = new Date("<?= $config['weddingDate'] ?>").getTime();

Konsep Utamanya

Semua nilai akan dipost dari admin InviteAround ke template Kamu. Template Kamu hanya merendernya: di mode preview dari default.json, dan di mode published/realtime dari body JSON POST.

Persyaratan

Sebelum membuat template, pastikan Kamu memiliki:

Pengetahuan dasar tentang PHP dan HTML
Pemahaman tentang file konfigurasi JSON
Keakraban dengan CSS (Tailwind CSS disarankan)
Lingkungan hosting PHP yang berfungsi untuk pengujian

Struktur Template

Setiap template harus terdiri dari tepat dua file dalam sebuah folder:

your-template/
├── index.php       // Main template file
└── default.json    // Default configuration

index.php - File Template Utama

Ini adalah file template utama Kamu yang merender undangan. File ini harus menangani tiga mode: preview (untuk tinjauan admin), published (undangan langsung), dan realtime (untuk pratinjau instan saat pengeditan). File menerima data melalui JSON POST.

<?php
// Get POST data from InviteAround
$input = json_decode(file_get_contents("php://input"), true) ?? [];

function post($key, $default = '') {
  global $input;
  $mode = $_GET['template-mode'] ?? null;

  if ($mode === 'preview') {
    return $default; // Use default.json values
  }

  if ($mode === 'published' || $mode === 'realtime') {
    return $input[$key] ?? $default;
  }

  return $default;
}

// Load default.json
$defaultConfig = json_decode(
  file_get_contents(__DIR__ . '/default.json'),
  true
) ?? [];

// Use the post() function for all dynamic values
$groomName = post('groomName', $defaultConfig['groomName']);
$brideName = post('brideName', $defaultConfig['brideName']);
// ... etc for all fields

?>

default.json - Konfigurasi Default

File ini berisi semua field yang dapat dikustomisasi dengan data sampel. Pengguna akan dapat memodifikasi nilai-nilai ini saat membuat undangan mereka. Semua field harus ada dalam file ini.

{
  "groomName": "Raka Aditya Pratama",
  "groomNickName": "Raka",
  "brideName": "Salsabila Zahira",
  "brideNickName": "Salsabila",
  "weddingDate": "2026-05-21T08:00:00.000Z",
  "ceremonyDate": "2026-05-21T08:00:00.000Z",
  "ceremonyTime": "08.00 - 10.00 WIB",
  "ceremonyPlace": "Al-Ikhlas Mosque",
  "receptionDate": "2026-05-21T11:00:00.000Z",
  "receptionTime": "11.00 - 14.00 WIB",
  "receptionPlace": "The Ritz Garden Hall",
  "receptionAddress": "South Jakarta",
  "mapsUrl": "https://maps.app.goo.gl/...",
  "mapsEmbedUrl": "https://www.google.com/maps/embed?...",
  "musicUrl": "https://example.com/music.mp3",
  "musicTitle": "A Thousand Years",
  "musicArtist": "Christina Perri",
  "youtubeEmbedUrl": "https://www.youtube.com/embed/...",
  "bank1Name": "Bank BRI",
  "bank1Account": "1234-5678-9000",
  "bank1Holder": "Raka Aditya Pratama",
  "bank2Name": "Bank BCA",
  "bank2Account": "8765-4321-0000",
  "bank2Holder": "Salsabila Zahira",
  "photos": [
    "https://example.com/photo1.jpg",
    "https://example.com/photo2.jpg"
  ],
  "cityAndCountry": "Jakarta, Indonesia"
}

Menggunakan Atribut data-bind

Untuk menampilkan data dari config atau file default.json, gunakan atribut data-bind. Nilai data-bind harus sama dengan nama kunci dari konfigurasi JSON Kamu.

Important: Nilai atribut data-bind harus persis sama dengan nama kunci JSON. Contoh, jika JSON Kamu memiliki "groomName", maka gunakan data-bind="groomName".

<!-- Display groom name -->
<h2 class="font-serif text-2xl text-ink mb-1" data-bind="groomName"><?= htmlspecialchars($groomName) ?></h2>

<!-- Display bride name -->
<h2 class="font-serif text-2xl text-pink mb-1" data-bind="brideName"><?= htmlspecialchars($brideName) ?></h2>

<!-- Display wedding date -->
<p class="text-grey" data-bind="weddingDate"><?= htmlspecialchars($weddingDate) ?></p>

<!-- Display ceremony time -->
<p class="text-grey" data-bind="ceremonyTime"><?= htmlspecialchars($ceremonyTime) ?></p>

<!-- Display ceremony place with default -->
<p class="text-grey" data-bind="ceremonyPlace"><?= htmlspecialchars($ceremonyPlace ?? 'TBD') ?></p>

<!-- Display bank account details -->
<div class="bank-account" data-bind="bank1Name"><?= htmlspecialchars($bank1Name) ?></div>
<div class="bank-number" data-bind="bank1Account"><?= htmlspecialchars($bank1Account) ?></div>
<div class="bank-holder" data-bind="bank1Holder"><?= htmlspecialchars($bank1Holder) ?></div>

<!-- Display photos gallery -->
<?php foreach($photos as $photo): ?>
  <img src="<?= htmlspecialchars($photo) ?>" alt="Wedding Photo" />
<?php endforeach; ?>
<!-- Note: arrays don't use data-bind, iterate normally -->

Jenis Field & Field Wajib

Setiap kunci di default.json Kamu adalah sebuah field dengan tipe tertentu. Tipe ini menentukan input apa yang diisi pengguna saat membuat undangan, dan nilai persis apa yang dipost InviteAround ke template Kamu saat sinkronisasi realtime atau publish. Beberapa field bersifat wajib untuk setiap kategori template.

Tipe Atribut

Semua tipe field yang didukung InviteAround, beserta contoh nilai persis yang diterima template Kamu di body JSON POST:

Tipe	Deskripsi	Contoh nilai yang dipost
`text`	Teks pendek satu baris, mis. nama lengkap atau tempat.	`"Raka Aditya Pratama"`
`long_text`	Teks panjang multi-baris, mis. cerita cinta atau kutipan.	`"Merupakan kehormatan bagi kami..."`
`number`	Angka, dipost tanpa tanda kutip.	`50000`
`date`	Tanggal dalam format ISO 8601 (UTC).	`"2026-05-21T00:00:00.000Z"`
`datetime`	Tanggal dan waktu dalam format ISO 8601 (UTC).	`"2026-05-21T08:00:00.000Z"`
`image`	URL gambar. Field galeri (multiple) dipost sebagai array URL.	`"https://storage.invitearound.com/photo.jpg"`
`music`	URL file audio (MP3).	`"https://storage.invitearound.com/music.mp3"`
`email`	Alamat email.	`"raka@example.com"`
`phone`	Nomor telepon, mis. nomor WhatsApp.	`"+6281234567890"`
`url`	URL lengkap, mis. tautan Google Maps.	`"https://maps.app.goo.gl/..."`
`video`	URL video atau embed URL (MP4 atau YouTube embed).	`"https://www.youtube.com/embed/..."`

Field yang ditandai multiple (mis. "photos") dipost sebagai array JSON berisi string URL, bukan satu string.

Field Wajib

Setiap kategori template mewajibkan field berikut. Field ini otomatis ditambahkan saat Kamu memilih kategori di form upload dan tidak bisa dihapus. Field datetime juga terkunci setelah undangan dipublikasikan.

Pernikahan (category: wedding)

brideName→text
groomName→text
weddingDate→datetime

Ulang Tahun (category: birthday-party)

eventName→text
birthdayDate→datetime

Konferensi (category: conference)

eventName→text
conferenceDate→datetime

Webinar (category: webinar)

eventName→text
webinarDate→datetime

Contoh Nilai yang Dipost

Saat pengguna melakukan sinkronisasi (pratinjau realtime) atau publish undangan, InviteAround mengirimkan nilai yang sudah diisi ke index.php Kamu sebagai body JSON POST. Kuncinya persis sama dengan kunci data-bind dan default.json Kamu. Nilai tanggal dan waktu selalu berupa string ISO 8601 dalam UTC, mis. "2026-05-21T08:00:00.000Z" — parse dan format sendiri untuk ditampilkan, dan tetap sediakan fallback dari default.json untuk mode preview.

{
  "groomName": "Raka Aditya Pratama",
  "groomNickName": "Raka",
  "brideName": "Salsabila Zahira",
  "brideNickName": "Salsabila",
  "weddingDate": "2026-05-21T08:00:00.000Z",
  "ceremonyDate": "2026-05-21T08:00:00.000Z",
  "ceremonyTime": "08.00 - 10.00 WIB",
  "ceremonyPlace": "Al-Ikhlas Mosque",
  "receptionDate": "2026-05-21T11:00:00.000Z",
  "receptionTime": "11.00 - 14.00 WIB",
  "receptionPlace": "The Ritz Garden Hall",
  "receptionAddress": "South Jakarta",
  "mapsUrl": "https://maps.app.goo.gl/...",
  "mapsEmbedUrl": "https://www.google.com/maps/embed?...",
  "musicUrl": "https://example.com/music.mp3",
  "musicTitle": "A Thousand Years",
  "musicArtist": "Christina Perri",
  "youtubeEmbedUrl": "https://www.youtube.com/embed/...",
  "bank1Name": "Bank BRI",
  "bank1Account": "1234-5678-9000",
  "bank1Holder": "Raka Aditya Pratama",
  "bank2Name": "Bank BCA",
  "bank2Account": "8765-4321-0000",
  "bank2Holder": "Salsabila Zahira",
  "photos": [
    "https://example.com/photo1.jpg",
    "https://example.com/photo2.jpg"
  ],
  "cityAndCountry": "Jakarta, Indonesia"
}

Mode Template

Template Kamu harus mendukung tiga mode berbeda:

Mode Preview (?template-mode=preview)

Digunakan di panel admin untuk meninjau template. Selalu menggunakan nilai dari default.json, mengabaikan data POST apa pun.

Mode Published (?template-mode=published)

Digunakan untuk undangan langsung. Menerima data pengguna nyata melalui POST dan merender undangan final.

Mode Realtime (?template-mode=realtime)

Digunakan untuk pratinjau instan ketika pengguna mengedit data undangan mereka. Menerima data melalui POST dan merender secara real-time.

Integrasi SDK InviteAround

Untuk mengaktifkan fungsi RSVP, integrasikan SDK InviteAround ke dalam template Kamu. Ini menyediakan sistem RSVP yang dikelola dengan pesan tamu dan pelacakan konfirmasi.

Mendapatkan Kunci Publik

Untuk mendapatkan kunci API publik Kamu, buka pengaturan profil:

Navigasi ke Akun → Pengaturan Profil
Klik "Generate Public Key"
Salin kunci publik Kamu (dimulai dengan pk_)

<!-- Add to your <head> -->
<script src="https://storage.invitearound.com/libs/invitearound.js"></script>

<!-- Initialize RSVP iframe -->
<script>
  const rsvpIframe = document.getElementById('rsvpIframe');
  if (rsvpIframe) {
    (async () => {
      const url = await InviteAround.getGuestMessageUrl({
        key: 'pk_YOUR_PUBLIC_KEY', // Replace with your actual public key
        locale: 'id'                // or 'en' for English
      });
      rsvpIframe.src = url;
    })();
  }
</script>

<!-- Add iframe in your HTML -->
<iframe
  id="rsvpIframe"
  src=""
  width="100%"
  height="600"
  style="border:0;"
></iframe>

Cara Mengunggah Template Kamu

Ikuti langkah-langkah ini untuk mengunggah dan mempublikasikan template Kamu:

Bergabung sebagai partner di platform InviteAround
Siapkan file template Kamu (index.php dan default.json)
Buat file ZIP yang berisi kedua file tersebut
Buka halaman Upload Template di dashboard partner Kamu
Isi detail template (nama, kategori, harga, dll)
Unggah screenshot thumbnail dan file ZIP Kamu
Submit untuk ditinjau. Template Kamu akan diperiksa dan disetujui oleh admin.

Sinkronisasi Data Real-time

InviteAround mendukung pratinjau real-time untuk template PHP. Ketika pengguna mengedit detail undangan mereka, perubahan langsung terlihat tanpa reload halaman.

Catatan Teknis

Sinkronisasi real-time bekerja dengan mengirim request POST ke index.php template Kamu dengan data yang diperbarui. Template Kamu harus menangani mode 'realtime' dengan benar untuk menampilkan perubahan.

Harga & Pendapatan

Kamu dapat menetapkan harga sendiri untuk template premium. Pendapatan dibagi antara Kamu dan platform.

Template Gratis

Tawarkan template secara gratis untuk membangun portofolio Kamu. Pengguna dapat mengaksesnya tanpa pembayaran.

Template Premium

Tetapkan harga sendiri (misalnya IDR 50.000 - IDR 500.000). Dapatkan penghasilan dari setiap penjualan melalui integrasi pembayaran DOKU kami.

Butuh Bantuan?

Jika Kamu memiliki pertanyaan atau memerlukan bantuan dengan pembuatan template, jangan ragu untuk menghubungi tim dukungan kami.

Email: invite.around.us@gmail.com