Menambahkan HTML, CSS, dan JavaScript di Studio

Isi panel kode, jalankan pratinjau terisolasi, periksa hasil, lalu simpan perubahan ke draft undangan.

Anda tidak perlu menulis kode untuk mengedit teks, warna, layout, atau gambar. Gunakan panduan Studio untuk pengeditan visual. Panduan ini untuk panel Custom HTML / CSS / JavaScript pada Studio layar penuh, bukan tab editor formulir.

Sebelum mulai

• Buka undangan yang benar melalui Undangan saya → Edit undangan → Buka Studio — fullscreen.
• Simpan pekerjaan dan pilih Export JSON lokal sebagai cadangan sebelum mengubah kode yang sudah ada. Pastikan file terunduh.
• Gunakan materi contoh tanpa nama tamu, data pelanggan, atau kredensial. Jangan menaruh password, API key, token pembayaran, atau kunci AI dalam kode desain.
• Gunakan kode yang Anda pahami dan berhak gunakan. Hindari kode yang tidak diketahui asalnya, pengiriman data, atau perulangan tanpa batas.

1. Isi panel kode

Di sisi kanan Studio, cari Custom HTML / CSS / JavaScript.

Isi kode tidak langsung dijalankan pada canvas. Jangan menganggap tampilan canvas yang belum berubah berarti kode tidak tersimpan pada draft lokal.

Contoh sederhana tanpa library

Gunakan contoh ini pada draft latihan. Jika panel sudah berisi kode, jangan menimpanya tanpa cadangan.

Masukkan ke HTML:

<section class="demo-salam">
  <h2>Dengan penuh sukacita</h2>
  <p id="demo-pesan" aria-live="polite">Kami menantikan kehadiran Anda.</p>
  <button id="demo-tombol" type="button">Lihat pesan</button>
</section>

Masukkan ke CSS:

.demo-salam {
  padding: 24px;
  text-align: center;
  color: #20352d;
  background: #f3f6f2;
}
.demo-salam button {
  padding: 12px 20px;
  color: #ffffff;
  background: #1e4d3c;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.demo-salam button:focus-visible {
  outline: 3px solid #20352d;
  outline-offset: 4px;
}

Masukkan ke JavaScript:

const tombol = document.getElementById('demo-tombol');
const pesan = document.getElementById('demo-pesan');
 
if (tombol && pesan) {
  tombol.addEventListener('click', () => {
    pesan.textContent = 'Sampai jumpa di acara!';
  });
}

Contoh ini hanya mengganti teks saat tombol ditekan. Ini bukan formulir RSVP dan tidak menyimpan respons tamu.

2. Jalankan dan periksa pratinjau

1. Pilih Jalankan custom code pada toolbar Studio.
2. Tunggu bagian Pratinjau custom code menampilkan hasil. Saat berhasil, status menyatakan Custom code aktif di sandbox. Perubahan ini belum dipublikasikan.
3. Untuk contoh di atas, tekan Lihat pesan pada pratinjau. Teks seharusnya berubah menjadi Sampai jumpa di acara! Coba juga mengaktifkan tombol memakai keyboard.
4. Bandingkan Desktop dan Mobile. Periksa ukuran teks, jarak, tombol, dan apakah ada bagian yang terpotong.
5. Setelah mengubah kode lagi, pilih Jalankan custom code kembali untuk memeriksa versi terbaru. Pratinjau sebelumnya tidak otomatis mengikuti setiap ketikan.
6. Pilih Tutup pratinjau setelah selesai.

Pratinjau visual statis tidak menampilkan tambahan custom HTML/CSS/JavaScript dan tidak menjalankan interaksinya. Gunakan Jalankan custom code untuk pemeriksaan kode, bukan mode statis.

3. Pahami batas pratinjau kode

• Sumber eksternal diblokir. Jangan mengandalkan script CDN, impor library dari URL, font web eksternal, atau gambar dari alamat luar untuk contoh kode ini. Library tambahan tidak otomatis tersedia.
• Permintaan jaringan diblokir. Kode tidak dapat dipakai untuk memanggil API RSVP, pembayaran, AI, atau layanan toko dari pratinjau ini.
• Kode berjalan terpisah dari halaman akun. Jangan mencoba membaca sesi dashboard, mengakses halaman induk, atau melewati pengamanan agar integrasi berjalan.
• Kamera, mikrofon, lokasi, clipboard, halaman tertanam, dan pengiriman formulir tidak tersedia untuk pratinjau kode ini.
• Total dokumen Studio, termasuk gambar dan kode, tetap dibatasi 256 KiB. Jika terlalu besar, amankan cadangan dan sederhanakan materi; jangan mengubah format backup untuk melewati batas.

Tambahan HTML ditampilkan bersama desain visual, bukan otomatis menjadi elemen yang dapat dipilih melalui Layers. Gunakan panel kode untuk mengubah tambahan tersebut, dan panel visual untuk elemen canvas.

4. Simpan dan buka ulang

1. Setelah hasil sesuai, pilih Simpan draft undangan pada toolbar proyek.
2. Tunggu Draft privat tersimpan, versi …. Jika masih ada perubahan baru yang belum tersimpan, selesaikan dan simpan lagi.
3. Pilih Export JSON lokal bila ingin menyimpan cadangan terbaru. Unduhan ini bukan konfirmasi penyimpanan akun.
4. Setelah salinan aman, pilih Buka ulang versi server, baca konfirmasi, lalu periksa isi ketiga panel kode.
5. Jalankan kembali Jalankan custom code untuk memastikan kode yang dibuka ulang menghasilkan interaksi yang Anda maksud.

Menyimpan kode hanya menyimpan draft undangan. Pratinjau yang berhasil bukan publikasi dan tidak membuat tautan undangan untuk tamu.

Jika kode tidak bekerja

Saat meminta bantuan, kirim potongan kode sekecil mungkin dengan data contoh dan pesan error yang relevan. Jangan mengirim seluruh backup pelanggan atau kredensial.