Wedding Invitation Template Guide

This guide shows you how to turn the template into your own website and publish it. No coding skills needed: follow the steps one at a time. Baca dalam bahasa Indonesia.

1. What is in the package

To look at your website at any time, double-click index.html and it opens in your browser. After editing and saving, press Refresh in the browser to see the change.

2. Indonesian words in the code

UpVire is an Indonesian studio, so the names inside the code are Indonesian. You never need to rename them, and every setting has an English comment next to it. The words you will meet most:

Comments in the file are written in both languages, Indonesian first and English on the next line.

3. Getting ready: an app to edit with

index.html is a plain text file. You need an app that edits text as-is, not a word processor like Microsoft Word.

Recommended: Visual Studio Code (free)

Download it from code.visualstudio.com (Windows, Mac and Linux). Open the app, choose File → Open Folder, and pick the template folder. Click index.html in the list on the left to edit it.

Without installing anything

• Windows: right-click index.html → Open with → Notepad.
• Mac (TextEdit): open TextEdit → TextEdit → Settings (or Preferences) → Open and Save tab → tick "Display HTML files as HTML code instead of formatted text". Without this setting TextEdit damages the file when saving.

Finding text

Press Ctrl+F (Windows) or Cmd+F (Mac) in your editor and type a word you see on the website. The editor jumps straight to it. This is the fastest way to find anything you want to change.

4. Quick start

If you are in a hurry, work through this list. Each step is explained in full further down.

1. Unzip the file and double-click index.html to see the starting point.
2. Fill in your WhatsApp number, with country code, under PENGATURAN.
3. Choose the default language, and whether visitors can switch.
4. Replace the name and sample text with your own.
5. Put your photos in the foto folder and link them.
6. Fill in the wedding date in PENGATURAN so the countdown is right.
7. Fill in your accounts for the wedding gift section, or delete it.
8. Match the colours to your brand.
9. Go through the checklist, then upload to Netlify or your web host.

Allow about 1–2 hours if you are new to this, most of it spent preparing photos and writing your own text.

5. WhatsApp number

This is the most important step. Without a number, the RSVP form and the question button do not work yet.

1. Open index.html and search for PENGATURAN (Indonesian for "settings"). It is near the bottom of the file.
2. Find this line:

   nomorWhatsApp: '',

3. Type your number between the two quote marks, starting with your country code:

   nomorWhatsApp: '+44 7700 900123',

   Spaces, dashes and the + are fine: only the digits are used.
4. Save, then refresh the browser. Click one of the WhatsApp buttons: WhatsApp opens with the message already typed.

While the number is empty, the buttons and form only show a reminder. This is on purpose, so no visitor messages a wrong number.

6. Replacing the text

Every name, number, story and project in this template is an example. The easiest way to replace them: search for the text you see on the website (for example Raka) with Ctrl+F / Cmd+F, then replace it.

Must replace

Removing a section

Each section starts with a comment such as <!-- ── KISAH CINTA / OUR STORY ── -->. To remove it, delete from the <section below that comment to its matching </section>. Also remove its menu links (search for href="#kisah").

7. Replacing the photos

The coloured boxes with an icon are photo placeholders. The template ships without photos on purpose: engagement photos or photos of the two of you are far more convincing than stock images.

Steps

1. Save your photos in the foto folder. Use lowercase names without spaces, for example us.jpg.
2. In index.html, find the photo box you want to replace. It looks like this:

   <div class="foto lebar">
       <svg ...>...</svg>
   </div>

3. Replace the whole <svg ...>...</svg> part with:

   <img src="foto/us.jpg" alt="Short description of the photo" />

   Fill in alt with a short description. Google and screen readers use it.

The photo is cropped neatly to the shape of its box automatically.

Photo size

• About 1200–1600 pixels wide is plenty.
• Keep each photo under 300 KB so the site loads fast on phones. Compress for free at squoosh.app.
• Phone photos are usually 3–5 MB. Always compress them first.
• The couple’s photos are arch-shaped portraits. Choose half-body photos with faces near the top so they are not cropped.

8. Two languages

This template shows in Indonesian and English. Every text is written twice, side by side:

<span lang="id">Layanan</span><span lang="en">Services</span>

Only the active language is shown. Edit both whenever you change a text, and never change the lang="id" and lang="en" markers themselves.

Default language and the ID/EN switch

• The default language is set on the <html lang="id"> line at the top of the file. Change it to <html lang="en"> so new visitors see English first.
• The ID/EN switch in the navigation is controlled by tombolBahasa: true in PENGATURAN. A visitor's choice is remembered in their browser.
• Direct link: add ?lang=en (or ?lang=id) to the end of your address, e.g. yourbusiness.com/?lang=en, to open a specific language. Handy in proposals and social profiles.

English only?

This is the most common setup outside Indonesia:

1. Change the top line to <html lang="en">.
2. Set tombolBahasa: false in PENGATURAN. The switch disappears.
3. Edit only the lang="en" texts and the data-en... attributes. The Indonesian texts stay in the file but never show, so you can leave them as they are.

You can use any other second language the same way: write it in the lang="id" slots and relabel the switch button (the ID text inside id="pilih-bahasa").

Text inside attributes

Some text is not shown directly on the page, so its English version is an extra attribute starting with data-en:

The English version is ideal for guests from abroad or family who don’t speak Indonesian. Send them the link with ?lang=en, which you can combine with the guest name: ?lang=en&to=Mr%20and%20Mrs%20Smith. The Google Calendar title and location also have two versions in PENGATURAN.

9. Pages, look and dark theme

The menu at the top does not just scroll: each menu item opens its own page, with its own link and a smooth transition. It is still one index.html file, so everything you edit stays in one place.

How the pages are made

• Every link in the top menu, e.g. <a href="#mempelai">, becomes a page made of the section with that id.
• A section that is not in the menu joins the page before it. Everything before the first menu section is the Home page.
• The Home page lists every page as a card (Explore), and each page ends with a Next card. Both are made automatically from the menu and each section's <h2> heading.
• Each page has its own address, e.g. yourbusiness.com/#mempelai. Share it on social media or in a WhatsApp message to open that page directly.

Adding or removing a page

1. To add one: give a section an id (lowercase, no spaces) and add a link to it in the menu: <a href="#yourid">Name</a>.
2. To remove one: delete its link from the menu (the section then joins the page before it), or delete the section and its link.

One long page instead

Set halamanTerpisah: false in PENGATURAN. The menu then scrolls down one long page, as on a classic one-page website.

Light and dark theme

• The default theme is set on the first line of the page: <html lang="id" data-tema="otomatis">. Use otomatis to follow the visitor's phone or computer setting, terang for light, or gelap for dark.
• The sun/moon button lets visitors switch, and remembers their choice. Hide it with tombolTema: false in PENGATURAN; the page then always uses the default theme.
• Your colours (--utama) work in both themes. The dark theme’s colours are in the CSS block marked Tema gelap / Dark theme, near the end of the styles.

The glass look and the animations

The frosted-glass cards, the soft moving colour in the background and the animations are in the CSS block marked KACA (glass). You do not need to change anything there. Two values you may want to tweak, at the top of that block:

Visitors who turned on Reduce motion on their device get the same pages and themes without the animations.

10. Date & countdown

The countdown and the Google Calendar button read one setting in PENGATURAN:

tanggalAcara: '2027-03-20T08:00:00+07:00',
durasiJam: 6,
judulKalender: { id: 'Pernikahan Raka & Sinta', en: 'Raka & Sinta’s Wedding' },
lokasiKalender: { id: 'Gedung Serbaguna Melati, Bandung', en: 'Gedung Serbaguna Melati, Bandung, Indonesia' },

Writing the date

The order is YEAR-MONTH-DAY, the letter T, HOUR:MINUTE:00 (24-hour clock), then your time zone offset from UTC. Month and day always have two digits (03, not 3).

durasiJam only sets the end time in guests’ calendars. The date and time shown on the page (opening and events) are ordinary text you change yourself.

Once the date has passed, the countdown turns into "The big day is here" automatically.

11. Guest names in each link

One file works for every guest. Add ?to= to the end of the link, followed by the guest’s name:

https://yourdomain.com/?to=Mr%20and%20Mrs%20Smith

• Spaces are written %20.
• Without ?to=, the page shows "Honoured guest" (in Indonesian "Bapak/Ibu/Saudara/i"). You can change these words in the text.
• Add lang=en to open the English version too: ?lang=en&to=Mr%20and%20Mrs%20Smith.
• For many guests, list the names in Google Sheets and build the links in the next column with a formula such as ="https://yourdomain.com/?lang=en&to="&SUBSTITUTE(A2," ","%20").

12. Events, story & gallery

Events

Each event is one <article class="acara"> block. Copy a whole block to add an event (a rehearsal dinner, a second reception), delete one to remove it. Change the name, day, date, time, venue and address in both languages.

The "View on Maps" button uses a search link. Replace the part after query= with the venue name (spaces become %20). More precise: open the venue in Google Maps → Share → Copy link, and paste it in place of the whole href="...".

Our story

Each milestone is one <li> block. Copy to add, delete to remove. Not needed? Delete the whole section (see "Removing a section" in the text chapter).

Guest information

Three cards: dress code, parking & access, and live stream.

• Dress code: change the text, and the four colour circles through style="background:#6b7f5e". No dress code? Delete the whole <div class="warna-dress"> block and the sentence above it.
• Parking & access: replace with your venue’s real information.
• Live stream: this card stays hidden until you fill in linkLive in PENGATURAN, e.g. linkLive: 'https://youtube.com/live/...'. Empty it again to hide the card.

Gallery

Six photo boxes. Add or remove <div class="foto"> boxes inside <div class="galeri">.

13. Wedding gift (bank accounts)

Each account is one <div class="rekening"> block (rekening = bank account). Change three things, and the same number in two places:

<span class="nomor" data-salin="1234567890">1234567890</span>
...
<button ... data-salin-tombol="1234567890">

• The number shown (between > and <) and the number in data-salin-tombol must match, because the second one is what the button copies.
• Change the bank or payment service (for example PayPal or Wise) and the account holder’s name.
• Only one account? Delete a whole block. Not using this at all? Delete the whole AMPLOP DIGITAL / WEDDING GIFT section.

14. RSVP and wishes

The RSVP form sends one WhatsApp message to your number with the name, attendance, number of guests and wishes, in the language the guest is viewing. Nothing is stored on any server, so you keep track of replies straight from WhatsApp.

• Change the attendance or guest-number choices by editing the <option> lines in the <select>. The English text is in data-en="...".
• Change the opening sentence in data-wa-form / data-en-wa-form on the <form> tag.
• Guests press Send in WhatsApp themselves after it opens.

As everything arrives in one chat, keep a list (Google Sheets, for example) to count who is coming.

15. Background music (optional)

1. Prepare one song as an MP3 file. Use music you have the rights to, or royalty-free music. Putting copyrighted songs on a public website can cause problems.
2. Create a musik folder next to index.html and save the song there, e.g. musik/song.mp3. Keep it under 4 MB.
3. In PENGATURAN, fill in:

   musik: 'musik/song.mp3'

4. Save and refresh. A round button with a music note appears at the bottom left. The music only starts when a guest presses it, because browsers block sound that plays by itself.

Upload the musik folder too when you publish. Empty the setting again (musik: '') to turn the feature off.

16. Changing the colours

Near the top of the file, find :root. Change these two lines to your brand colour (utama means primary, gelap means dark):

--utama: #6b7f5e;
--utama-gelap: #566849;

--utama-gelap is a slightly darker shade, used for gradients and hover states. Find colour codes with Google: color picker. Avoid very light colours for --utama, because white text on top of it becomes hard to read.

17. Publishing your website

Before publishing, go through the checklist below.

Option A: Netlify (free, easiest)

1. Create a free account at netlify.com.
2. Go to app.netlify.com/drop.
3. Drag the whole template folder (the one with index.html and the foto folder) onto the page.
4. Wait a few seconds. Your site is online at an address like random-name.netlify.app, which you can rename in the site settings.

To update the site later, drag the folder again onto that site's Deploys page in Netlify.

Option B: a web host with cPanel

1. Log in to cPanel → File Manager → open public_html.
2. Click Upload and upload index.html and the foto folder with its contents. (Or upload a ZIP, then right-click → Extract.)
3. Open your domain in the browser.

The guides and licence files do not need to be uploaded.

Option C: GitHub Pages (free)

Handy if you already have a GitHub account. Create a public repository, upload index.html and the foto folder, then under Settings → Pages choose the main branch and the / (root) folder.

Using your own domain

Buy a domain from any registrar (Namecheap, Cloudflare, Porkbun and many others). In Netlify, open the site settings → Domain management and follow the steps. With cPanel hosting, the domain is usually connected when you buy the plan.

18. How the link looks when shared

When your link is shared on WhatsApp, LinkedIn or other social media, the preview shows the title and description from og:title and og:description near the top of the file. Replace both. These two do not switch language, so write them in the language of your main market.

To show an image too, prepare a picture of about 1200 × 630 pixels, save it in the foto folder, and add this line right below og:description. The address must be complete, including your domain:

<meta property="og:image" content="https://yourdomain.com/foto/cover.jpg" />

19. Checklist before publishing

Open your website in the browser and check each item:

• The WhatsApp number is filled in with a country code, and the buttons open the right chat.
• No sample names, addresses, prices or numbers are left, in both languages (or the language switch is off).
• All photos show (no placeholder boxes left).
• The date in PENGATURAN matches the date written on the page.
• The countdown shows the right number of days.
• Account numbers are correct. Try the "Copy number" button and compare.
• The Maps buttons for the ceremony and reception open the right places.
• You sent yourself one test RSVP and the message arrived complete.
• A link with ?to=Name shows the guest’s name correctly.
• The browser tab title and og:title are replaced.
• Tested on a phone, not just a computer.
• Every button clicked at least once.

20. If something goes wrong

Want us to set it up?

If you'd rather not edit it yourself, there is a Website Setup Service (sold separately): we edit this template to your brief and put it online on Netlify's free plan, in an account in your name. Look for Website Setup Service in the UpVire shop where you bought this template (Gumroad, Etsy or Lynk.id).

Questions about your purchase or download can be sent through the product page on the platform where you bought it.