InviteAround/Partner Documentation

Partner Documentation

Learn how to create, upload, and sell invitation templates on InviteAround

Download Sample Template

Get started quickly with our sample PHP invitation template. Includes all required files and structure.

Overview

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

Integration Steps Summary

Here is the whole integration flow at a glance. Your template is a PHP page; InviteAround posts the invitation data into it, and data-bind attributes keep everything in live sync.

Create your template in PHP with data-bind keys

Build your invitation as a normal PHP page (index.php), and give every element that displays dynamic data a data-bind attribute. data-bind is the main key — it is what allows InviteAround to live-sync values into your template.

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

Receive the values via POST in PHP

Values are never hardcoded. InviteAround's server sends the data to your index.php using the POST method (JSON body), so your template must read it. Use the post() helper: preview mode returns default.json values, while published and realtime modes return the posted values.

// 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 the InviteAround SDK script

This script tag must be present in every template. It powers the live sync and the RSVP system:

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

Echo the values inside data-bind elements

Print each value inside the element whose data-bind key matches the JSON key, always escaped with 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>

Use the values in JavaScript too

PHP values can also feed your scripts, for example a countdown target. The value still has to come from the POST body — never hardcode it:

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

The Key Concept

All values are posted from the InviteAround admin to your template. Your template only renders them: in preview mode from default.json, and in published/realtime mode from the JSON POST body.

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

Important: The data-bind attribute value must be exactly the same as the JSON key name. For example, if your JSON has "groomName", then use 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 -->

Field Types & Mandatory Fields

Every key in your default.json is a field with a type. The type controls what input users get when filling in their invitation, and what exact value InviteAround posts to your template on realtime sync or publish. Some fields are mandatory for each template category.

Attribute Types

All field types supported by InviteAround, with an example of the exact value your template receives in the JSON POST body:

Type	Description	Example posted value
`text`	Short single-line text, e.g. full name or place.	`"Raka Aditya Pratama"`
`long_text`	Multi-line text, e.g. a love story or a quote.	`"Merupakan kehormatan bagi kami..."`
`number`	A number, posted without quotes.	`50000`
`date`	Date in ISO 8601 format (UTC).	`"2026-05-21T00:00:00.000Z"`
`datetime`	Date and time in ISO 8601 format (UTC).	`"2026-05-21T08:00:00.000Z"`
`image`	Image URL. A gallery field (multiple) is posted as an array of URLs.	`"https://storage.invitearound.com/photo.jpg"`
`music`	Audio file URL (MP3).	`"https://storage.invitearound.com/music.mp3"`
`email`	Email address.	`"raka@example.com"`
`phone`	Phone number, e.g. WhatsApp number.	`"+6281234567890"`
`url`	Full URL, e.g. a Google Maps link.	`"https://maps.app.goo.gl/..."`
`video`	Video URL or embed URL (MP4 or YouTube embed).	`"https://www.youtube.com/embed/..."`

A field marked as multiple (e.g. "photos") is posted as a JSON array of URL strings instead of a single string.

Mandatory Fields

Each template category requires the fields below. They are added automatically when you choose the category on the upload form and cannot be removed. The datetime field is also locked after an invitation is published.

Wedding (category: wedding)

brideName→text
groomName→text
weddingDate→datetime

Birthday Party (category: birthday-party)

eventName→text
birthdayDate→datetime

Conference (category: conference)

eventName→text
conferenceDate→datetime

Webinar (category: webinar)

eventName→text
webinarDate→datetime

Example Posted Values

When a user syncs (realtime preview) or publishes an invitation, InviteAround sends the filled-in values to your index.php as the JSON POST body. The keys match your data-bind keys and default.json exactly. Date and time values always arrive as ISO 8601 strings in UTC, e.g. "2026-05-21T08:00:00.000Z" — parse and format them yourself for display, and keep a fallback from default.json for preview mode.

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

Template Modes

Your template must support three different modes:

Preview Mode (?template-mode=preview)

Used in the admin panel for reviewing templates. Always uses values from default.json, ignoring any POST data.

Published Mode (?template-mode=published)

Used for live invitations. Receives actual user data via POST and renders the final invitation.

Realtime Mode (?template-mode=realtime)

Used for instant preview when users edit their invitation data. Receives data via POST and renders in real-time.

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.

Getting Your Public Key

To get your public API key, go to your profile settings:

Navigate to Account → Profile Settings
Click "Generate Public Key"
Copy your public key (starts with 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>

How to Upload Your Template

Follow these steps to upload and publish your template:

Join as a partner on InviteAround platform
Prepare your template files (index.php and default.json)
Create a ZIP file containing both files
Go to the Upload Template page in your partner dashboard
Fill in the template details (name, category, price, etc.)
Upload your thumbnail screenshot and ZIP file
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.

Technical Note

Real-time sync works by sending POST requests to your template's index.php with the updated data. Your template must handle the 'realtime' mode correctly to display the changes.

Pricing & Revenue

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

Free Templates

Offer templates for free to build your portfolio. Users can access them without payment.

Premium Templates

Set your own price (e.g., IDR 50,000 - IDR 500,000). Earn revenue from each sale through our DOKU payment integration.

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