Kirim Undangan Untuk Para Tamu ALternatrif
Kirim Undangan Untuk Para Tamu Spesial.
- Masukkan nama tamu undangan kamu pada kolom nama tamu undangan.
- Pisahkan dengan baris baru (enter) untuk memisahkan nama yang akan di undang.
- Masukkan nama tamu, nama tamu support simbol (&) koma(,) titik(.) contohnya : Andy & Zhea
- Klik tombol Buka Link untuk membuka link undangan yang sudah dilengkapi dengan parameter nama tamunya.
- Klik tombol Salin Link + Kata Pengantar untuk menyimpan hasil generate undangan.
- Klik tombol Share to Facebook untuk mengirimkan undangan ke aplikasi sosial media facebook.
- Klik tombol Share to Whatsapp untuk mengirimkan undangan ke kontak whatsapp tamu yang akan diundang.
- Klik tombol Copy Link, dan paste-kan di WA / Socmed ketika kamu ingin menyebarkan undangannya
- Anda bisa menghapus kolom yang di generate dengan menekan tombol hapus/delete.
- Sebaiknya test dulu kirim ke pasangan jika baru pertama kali menggunakan fitur ini.
- Jika menggunakan smartphone/ HP disarankan pakai BROWSER CHROME untuk menggunakan generator tamu undangan ini. Dan pastikan enable javascript browsernya terlebih dahulu.
- Penggunaan generator melalui PC/ Laptop terkadang tidak bisa menampilkan gambar saat sebar undangan.
- TIDAK DIREKOMENDASIKAN untuk membagikan link melalui DM Instagram, karena IG bukan tempat untuk berbagi link.
- Anda bisa menampilkan gambar (thumbnail) saat sebar undangan dengan cara setelah klik tautan kirim whatsapp, tunggu beberapa detik supaya WA load gambarnya. JADI TIDAK LANGSUNG DIKIRIM sebelum gambar muncul.
Buat undangan jadi lebih ekslusif dan personal di setiap undangan yang akan dikirimkan.
Silahkan Generate Link nya di bawah ini:
Undangan Formal Wedding - Muslim Wedding - Nasrani Wedding - Hindu Birthday Anak Tasmiyah Akikah
| Nama Tamu | Options |
|---|
// Fungsi untuk mengambil nilai parameter dari URL
function getParameterByName(name) {
const url = window.location.href;
name = name.replace(/[\[\]]/g, '\\$&');
const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
const results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
// Ambil nilai dari parameter 'id'
const undanganId = getParameterByName('id');
// Event Listener untuk Tombol Generate
document.getElementById("generateButton").addEventListener("click", function() {
// Ambil input pengguna
const namaTamu = document.getElementById("namaTamuInput").value.split("\n");
const teksPengantar = document.getElementById("teksPengantar").value;
// Container untuk hasil generate
const daftarNamaContainer = document.querySelector("#daftarNamaContainer tbody");
daftarNamaContainer.innerHTML = ""; // Bersihkan daftar sebelumnya
// Opsi teks pengantar berdasarkan pilihan
const teks = {
formal: `Dengan segala hormat, kami bermaksud mengundang Bapak/Ibu/Saudara/i *${"{nama}"}* untuk menghadiri acara kami.\n\n*Berikut link undangan kami*, untuk informasi lebih lengkap mengenai acara dapat diakses melalui tautan berikut:\n\n[link-undangan]\n\nKami berharap Bapak/Ibu/Saudara/i dapat meluangkan waktu untuk menghadiri acara kami.\n\n*Mohon maaf undangan ini hanya disampaikan melalui pesan ini.*\n\nTerima kasih atas perhatiannya.`,
muslim: `_Assalamualaikum Warahmatullahi Wabarakatuh_\n\nTanpa mengurangi rasa hormat, perkenankan kami mengundang Bapak/Ibu/Saudara/i *${"{nama}"}* untuk menghadiri acara kami.\n\n*Berikut link undangan kami*, untuk info lengkap dari acara bisa kunjungi :\n\n[link-undangan]\n\nMerupakan suatu kebahagiaan bagi kami apabila Bapak/Ibu/Saudara/i berkenan untuk hadir dan memberikan doa restu.\n\n*Mohon maaf perihal undangan hanya di bagikan melalui pesan ini.*\n\nTerima kasih banyak atas perhatiannya.\n\n_Wassalamualaikum Warahmatullahi Wabarakatuh_`,
nasrani: `Kepada:\n\n*${"{nama}"}*\n\nSalam Sejahtera Bagi Kita Semua. Tuhan membuat segala sesuatu indah pada waktunya dan mempersatukan kami dalam suatu ikatan pernikahan kudus, semoga Tuhan memberkati dalam mengiringi pernikahan kami.\n\nTanpa mengurangi rasa hormat, perkenankan kami mengundang Bapak/Ibu/Saudara/i untuk menghadiri acara kami.\n\nBerikut link undangan kami:\n\n[link-undangan]\n\nMerupakan suatu kebahagiaan bagi kami apabila Bapak/Ibu/Saudara/i berkenan untuk hadir dan memberikan doa restu.\n\n*Mohon maaf perihal undangan hanya di bagikan melalui pesan ini.*\n\nTerima kasih.`,
hindu: `Kepada Yth.\n\n*${"{nama}"}*\n\nOm Swastiastu\n\nTanpa mengurangi rasa hormat, perkenankan kami mengundang Bapak/Ibu/Saudara/i, teman sekaligus sahabat, untuk menghadiri acara pernikahan kami:\n\nBerikut link undangan kami untuk info lengkap dari acara bisa kunjungi :\n\n[link-undangan]\n\nMerupakan suatu kebahagiaan bagi kami apabila Bapak/Ibu/Saudara/i berkenan untuk hadir dan memberikan doa restu.\n\nOm Shanti, Shanti, Shanti, Om.`,
birthdayAnak: `Halo Bapak/Ibu/Saudara/i *${"{nama}"}*,\n\nKami dengan senang hati mengundang Bapak/Ibu beserta keluarga untuk menghadiri acara ulang tahun anak kami.\n\n*Berikut link undangan kami* untuk informasi lebih lengkap mengenai acara dapat diakses melalui tautan berikut:\n\n[link-undangan]\n\nTerima kasih banyak atas perhatian dan kehadirannya.`,
akikahTasmiyah: `Assalamualaikum Warahmatullahi Wabarakatuh,\n\nDengan penuh rasa syukur, kami mengundang Bapak/Ibu/Saudara/i *${"{nama}"}* untuk menghadiri acara akikah/tasmiyah anak kami.\n\n*Berikut link undangan kami* untuk informasi lebih lengkap mengenai acara dapat diakses melalui tautan berikut:\n\n[link-undangan]\n\nMerupakan kebahagiaan bagi kami jika Bapak/Ibu/Saudara/i berkenan hadir dan turut mendoakan anak kami.\n\nTerima kasih atas perhatian dan kehadirannya.\n\nWassalamualaikum Warahmatullahi Wabarakatuh.`,
};
// URL basis (ambil secara otomatis dari domain website)
const baseUrl = window.location.origin;
// Loop untuk setiap nama tamu
let hasGenerated = false;
namaTamu.forEach(function(nama) {
if (nama.trim() !== "") {
if (undanganId) {
hasGenerated = true; // Tandai bahwa ada nama yang diproses
// Buat link undangan yang dipersonalisasi
const linkUndangan = `${baseUrl}/${undanganId}?to=${encodeURIComponent(nama.trim())}`;
const personalizedText = teks[teksPengantar].replace("{nama}", nama.trim()).replace("[link-undangan]", linkUndangan);
// Buat elemen baru untuk menampilkan hasilnya di tabel
const row = document.createElement("tr");
row.innerHTML = `
${nama.trim()}
`;
daftarNamaContainer.appendChild(row);
} else {
alert("Parameter 'id' tidak ditemukan di URL. Silakan pastikan URL mengandung parameter 'id'.");
}
}
});
// Tampilkan tabel jika ada nama yang berhasil di-generate
if (hasGenerated) {
document.getElementById("daftarNamaContainer").classList.remove("hidden");
}
});
// Fungsi untuk menyalin teks ke clipboard dengan fallback
function copyTextToClipboard(text) {
text = decodeURIComponent(text);
const textArea = document.createElement("textarea");
textArea.value = text;
textArea.style.position = "fixed";
textArea.style.left = "-9999px";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
const successful = document.execCommand('copy');
if (successful) {
alert('Teks berhasil disalin ke clipboard.');
} else {
alert('Gagal menyalin teks ke clipboard.');
}
} catch (err) {
console.error('Gagal menyalin teks menggunakan execCommand: ', err);
}
document.body.removeChild(textArea);
}
/* Typography Default untuk Elemen dalam Form Undangan */
#form-undangan,
#form-undangan textarea,
#form-undangan select,
#form-undangan button,
#daftarNamaContainer {
font-family: 'Poppins', sans-serif;
font-size: 14px;
line-height: 1.25em;
}
/* Styling untuk Elemen Textarea */
#form-undangan textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-bottom: 15px;
}
/* Styling untuk Elemen Select */
#form-undangan select {
width: 100%;
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-bottom: 10px;
appearance: none; /* Menghilangkan gaya bawaan browser */
-webkit-appearance: none; /* Menghilangkan gaya bawaan pada Safari */
-moz-appearance: none; /* Menghilangkan gaya bawaan pada Firefox */
}
/* Styling untuk Tombol Generate */
#form-undangan button {
background-color: #FFDFDF; /* Warna hijau untuk tombol (default) */
color: #6D2956;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.1s ease;
}
/* Warna Merah Saat di-hover dan Diklik */
#form-undangan button:hover,
#form-undangan button:active {
background-color: #EE629B; /* Warna merah saat di-hover dan diklik */
color: #ffffff;
transform: scale(0.98); /* Efek kecil saat tombol diklik */
}
/* Menyembunyikan elemen dengan class "hidden" */
.hidden {
display: none;
}
/* Typography untuk Tabel "Nama + Aksi" */
#daftarNamaContainer {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
#daftarNamaContainer th, #daftarNamaContainer td {
padding: 8px;
text-align: center;
border-bottom: 1px solid #ddd;
}
/* Default untuk Versi Tablet dan Desktop: Kolom Nama 65%, Kolom Aksi 35% */
#daftarNamaContainer th:nth-child(1),
#daftarNamaContainer td:nth-child(1) {
width: 75%; /* Kolom Nama (65%) */
}
#daftarNamaContainer th:nth-child(2),
#daftarNamaContainer td:nth-child(2) {
width: 25%; /* Kolom Aksi (35%) */
}
/* Styling Icon Actions */
.actions {
display: flex;
flex-wrap: wrap; /* Membuat ikon berbaris secara responsif */
gap: 5px; /* Jarak antar ikon */
justify-content: center; /* Justifikasi ke kiri */
}
.actions i {
font-size: 12px; /* Ukuran ikon lebih kecil (10px) */
cursor: pointer;
padding: 0.75em; /* Padding sekitar 0.75em */
border-radius: 5px; /* Bentuk ikon lebih tidak bulat (10px) */
background-color: #4CAF50;/* Warna hijau sebagai warna default */
color: white; /* Warna teks (ikon) menjadi putih */
transition: background-color 0.3s ease, transform 0.1s ease;
}
/* Warna Merah Saat Ikon di-hover dan Diklik */
.actions i:hover,
.actions i:active {
background-color: #f44336; /* Warna merah saat di-hover dan diklik */
transform: scale(1.1); /* Efek pembesaran saat ikon di-hover */
}
/* Styling Tooltips */
.actions i::after {
content: attr(title);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background-color: #e5e5e5; /* Warna latar belakang tooltips */
color: #2f3e46; /* Warna teks tooltips */
font-family: 'Poppins', sans-serif; /* Font Poppins untuk tooltips */
font-size: 10px; /* Ukuran font tooltips 10px */
padding: 5px;
border-radius: 3px;
opacity: 0;
visibility: hidden;
white-space: nowrap;
transition: opacity 0.3s, visibility 0.3s;
}
.actions i:hover::after {
opacity: 1;
visibility: visible;
}
/* Responsivitas untuk Mobile: Kolom Nama 55%, Kolom Aksi 45% */
@media (max-width: 768px) {
#daftarNamaContainer th:nth-child(1),
#daftarNamaContainer td:nth-child(1) {
width: 55%; /* Kolom Nama (55%) */
}
#daftarNamaContainer th:nth-child(2),
#daftarNamaContainer td:nth-child(2) {
width: 45%; /* Kolom Aksi (45%) */
}
/* Ukuran font dan padding ikon lebih kecil di layar mobile */
.actions {
gap: 8px; /* Jarak antar ikon dikurangi pada layar kecil */
}
.actions i {
padding: 0.5em; /* Kurangi padding pada layar kecil */
font-size: 10px; /* Kurangi ukuran font ikon pada layar kecil */
}
}
Kirim Undangan Untuk Para Tamu
Kirim Undangan Untuk Para Tamu Spesial.
- Masukkan nama tamu undangan kamu pada kolom nama tamu.
- Pisahkan dengan baris baru (enter) untuk memisahkan nama yang akan di undang.
- Masukkan nama tamu, nama tamu support simbol (&) koma(,) titik(.) contohnya : Andy & Zhea
- Masukkan teks pengantar sesuai dengan kebutuhan, anda pun bisa menyisipkan link undangan dan custom nama tamu pada bagian teks pengantar yang akan dikirimkan.
- Pada saat pengiriman ada tambahan shortcode [link-undangan] untuk menyisipkan link undangan kedalam teks pengantar.
- Saat pengiriman dengan teks pengantar, tambahan shortcode [nama] untuk menyisipkan nama tamu yang akan di undang kedalam teks pengantar.
- Klik Buat Daftar Nama Tamu jika sudah melakukan pengisian untuk mendapatkan link undangan yang akan dikirimkan.
- Klik tombol Share to Whatsapp untuk mengirimkan undangan ke kontak whatsapp tamu yang akan diundang.
- Klik tombol Copy Link, dan paste-kan di WA / Socmed ketika kamu ingin menyebarkan undangannya
- Klik tombol Copy Kata Pengantar untuk menyimpan hasil generate undangan.
- Anda bisa menghapus kolom yang di generate dengan menekan tombol hapus.
- Sebaiknya test dulu kirim ke pasangan jika baru pertama kali menggunakan fitur ini.
- Disarankan menggunakan smartphone/ HP dan pakai BROWSER CHROME untuk menggunakan generator tamu undangan ini.
- Penggunaan generator melalui PC/ Laptop terkadang tidak bisa menampilkan gambar saat sebar undangan.
- Anda bisa menampilkan gambar (thumbnail) saat sebar undangan dengan cara setelah klik tautan kirim whatsapp, tunggu beberapa detik supaya WA load gambarnya. JADI TIDAK LANGSUNG DIKIRIM sebelum gambar muncul.
- Tidak direkomendasikan berbagi link melalui DM Instagram, karena IG bukanlah tempat berbagi link. Silahkan bagikan undangan anda secara personal melalui pesan di No. Whatsapp para tamu undangan anda.
Buat undangan jadi lebih ekslusif dan personal di setiap undangan yang akan dikirimkan.
Silahkan Generate Link nya di bawah ini:
Text berhasil di copy, silahkan pastekan di kolom chat
* Gunakan baris baru (↵) untuk memisahkan nama yang akan Anda undang.
* Isikan text ini [link-undangan] pada text pengantar agar otomatis tercantumkan link kehalaman undangan.
* Anda juga bisa menggunakan [nama] untuk menyertakan nama yang Anda undang.
Daftar Nama Tamu
| No | Tamu | Opsi |
|---|
Terima kasih telah memilih produk kami.
Semoga pernikahan Anda Barakah dan menjadi
keluarga yang Sakinah, Mawaddah, Warahmah. Aamiin
Kirim Undangan Untuk Para Tamu
Buat undangan jadi lebih ekslusif dan personal di setiap undangan yang akan dikirimkan. Silahkan Generate Link nya di bawah ini:
Petunjuk:
- Jika URL undangan kamu weddingpress.co.id/namamempelai berarti Nama Undangan kamu adalah namamempelai
- Masukkan nama undangan kamu tersebut pada kolom undangan
- Masukkan nama tamu, nama tamu support simbol (&) koma(,) titik(.) contohnya Andy & Zhea
- Klik Generate jika sudah melakukan pengisian untuk mendapatkan link undangan
- Klik tombol copy, dan paste-kan di WA / Socmed ketika kamu ingin menyebarkan undangannya
- Sebaiknya test dulu di browser jika baru pertama kami menggunakan fitur ini
