Partner Documentation

Overview

InviteAround allows partners to create and sell wedding invitation templates. Users can customize your templates with their own wedding details, and you earn revenue from each sale. Currently, we support PHP-based templates with real-time data synchronization.

Requirements

Before creating your template, ensure you have:

• Basic knowledge of PHP and HTML
• Understanding of JSON configuration files
• Familiarity with CSS (Tailwind CSS is recommended)
• A working PHP hosting environment for testing

Template Structure

Each template must consist of exactly two files in a folder:

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

index.php - Main Template File

This is your main template file that renders the wedding invitation. It must handle three modes: preview (for admin review), published (live invitations), and realtime (for instant preview during editing). The file receives data via 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 - Default Configuration

This file contains all the customizable fields with sample data. Users will be able to modify these values when creating their invitations. All fields must be present in this file.

{
  "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"
}

Using data-bind Attributes

To display data from your config or default.json file, use the data-bind attribute. The value of data-bind must match the key name from your JSON config.

<!-- 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 -->

Template Modes

Your template must support three different modes:

InviteAround SDK Integration

To enable RSVP functionality, integrate the InviteAround SDK into your template. This provides a managed RSVP system with guest messages and confirmation tracking.

<!-- 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>

How to Upload Your Template

Follow these steps to upload and publish your template:

1. Join as a partner on InviteAround platform
2. Prepare your template files (index.php and default.json)
3. Create a ZIP file containing both files
4. Go to the Upload Template page in your partner dashboard
5. Fill in the template details (name, category, price, etc.)
6. Upload your thumbnail screenshot and ZIP file
7. Submit for review. Your template will be checked and approved by admin.

Real-time Data Synchronization

InviteAround supports real-time preview for PHP templates. When users edit their invitation details, changes are instantly reflected without page reload.

Pricing & Revenue

You can set your own price for premium templates. Revenue is shared between you and the platform.

Need Help?

If you have questions or need assistance with template creation, feel free to contact our support team.

Email: invite.around.us@gmail.com