Menambahkan HTML, CSS, dan JavaScript di Studio

Panel Custom HTML / CSS / JavaScript di Studio dipakai untuk menambah elemen atau efek yang tidak tersedia di panel visual. Kamu tidak perlu kode untuk mengedit teks, warna, layout, atau gambar biasa. Untuk itu, pakai panduan Studio.

Intinya

Tulis kode di tiga panel, jalankan dengan Jalankan custom code, cek hasilnya, lalu simpan. Kode berjalan di area terisolasi (sandbox), jadi ada hal-hal yang sengaja diblokir.

Cara kerjanya

Kode kamu tidak dijalankan langsung di canvas. Saat menekan Jalankan custom code, Studio membuat halaman uji terpisah (sandbox) yang berisi desain plus kodemu. Sandbox ini dipisahkan dari akunmu supaya kode yang salah atau berbahaya tidak bisa membaca sesi login, data pelanggan, atau mengirim data ke luar. Karena itu, permintaan jaringan, library dari CDN, dan font atau gambar dari alamat luar diblokir.

Kode tersimpan sebagai bagian dari dokumen desain, jadi ikut aturan simpan yang sama: aman setelah Simpan draft undangan dan ikut dibatasi total ukuran dokumen 256 KiB.

Sebelum mulai

• Buka undangan lewat Undangan saya → Edit undangan → Buka Studio — fullscreen.
• Simpan pekerjaan dan buat cadangan dengan Export JSON lokal sebelum mengubah kode yang sudah ada.
• Jangan pernah menaruh password, API key, token pembayaran, atau kunci AI di kode desain. Kode desain bisa dibaca siapa pun yang membuka undangan.
• Pakai kode yang kamu pahami dan boleh kamu gunakan.

Langkah 1: Isi panel kode

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

Kode tidak langsung dijalankan di canvas. Jadi kalau canvas belum berubah, bukan berarti kodemu hilang.

Contoh sederhana tanpa library

Coba contoh ini di draft latihan. Kalau panel sudah berisi kode, buat cadangan dulu sebelum menimpanya.

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.

Langkah 2: Jalankan dan cek 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 custom code dan tidak menjalankan interaksinya. Untuk mengecek kode, selalu pakai Jalankan custom code.

Batas yang perlu kamu tahu

• Sumber eksternal diblokir. Script CDN, library dari URL, font web eksternal, dan gambar dari alamat luar tidak akan termuat.
• Permintaan jaringan diblokir. Kode tidak bisa memanggil API RSVP, pembayaran, AI, atau layanan lain.
• Kode terpisah dari halaman akun. Kode tidak bisa membaca sesi dashboard atau halaman induk. Ini sengaja, demi keamanan akunmu.
• Kamera, mikrofon, lokasi, clipboard, halaman tertanam, dan pengiriman formulir tidak tersedia.
• Total dokumen Studio, termasuk gambar dan kode, dibatasi 256 KiB. Kalau terlalu besar, buat cadangan lalu sederhanakan isinya.

Elemen dari custom HTML tampil bersama desain, tapi tidak muncul di Layers. Ubah lewat panel kode, bukan panel visual.

Langkah 3: 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 kamu maksud.

Kalau berhasil

Kode tetap ada di ketiga panel setelah dibuka ulang dari server, dan pratinjaunya berjalan sesuai harapan. Ingat, ini baru draft: pratinjau yang berhasil bukan publikasi.

Kalau ada masalah

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