Komponen Custom HTML — Embed Kode Apapun di Landing Page

Apa itu: Komponen escape hatch untuk menyisipkan kode HTML, CSS, dan JavaScript arbitrary langsung ke landing page kamu — tanpa batasan komponen bawaan builder. Kapan pakai: Embed widget pihak ketiga (Calendly, chatbot, form eksternal), tambahkan schema.org JSON-LD untuk SEO rich snippet, buat animasi custom, atau integrasikan fitur apa pun yang belum tersedia sebagai komponen resmi di Konvert.

Apa itu Custom HTML?

Custom HTML adalah komponen "pintu keluar" dari builder visual. Saat kamu perlu sesuatu yang tidak bisa dilakukan komponen-komponen standar Konvert, Custom HTML memberi kamu ruang kosong untuk menulis kode HTML mentah — lengkap dengan CSS inline dan JavaScript.

Kode yang kamu tulis di sini akan dirender langsung di landing page publik, persis seperti yang kamu ketik. Ini artinya kamu punya kekuatan penuh — sekaligus tanggung jawab penuh atas apa yang kamu paste.

Kapan Pakai Custom HTML?

• Embed widget pihak ketiga — Calendly booking widget, Typeform, Tally form, chatbot script, dll
• Schema.org JSON-LD — data terstruktur untuk rich snippet di Google (Product, FAQ, Review, dll)
• Animasi Lottie — player animasi JSON yang tidak ada sebagai komponen bawaan
• Iframe embed eksternal — Google Maps, YouTube dengan custom param, atau microsite
• Custom tracking pixel — script tracking yang tidak tercakup oleh pixel standar (Meta/FB, TikTok, GTM)
• Banner / ribbon dekoratif — efek CSS yang butuh markup khusus

Properties

Property	Tipe	Penjelasan
HTML Code	Textarea (monospace, 12 baris)	Kode HTML yang akan dirender. Bisa menyertakan tag <style>, <script>, atau markup biasa.

Cara Pakai

Langkah Dasar

1. Drag komponen Custom HTML dari panel kiri ke kanvas builder
2. Klik komponen untuk membuka panel kanan
3. Temukan textarea HTML Code — tulis atau paste kode kamu di sini
4. Klik Save atau klik di luar — preview langsung muncul di kanvas

Cara Sisipkan CSS

Kalau kode kamu butuh styling, letakkan blok <style> di dalam textarea yang sama:

<style>
  .kotak-custom {
    background: linear-gradient(135deg, #f57c00, #e53935);
    color: white;
    padding: 24px;
    border-radius: 12px;
    text-align: center;
    font-family: sans-serif;
  }
</style>

<div class="kotak-custom">
  <h2>Penawaran Terbatas!</h2>
  <p>Hanya tersisa 10 slot hari ini.</p>
</div>

Cara Sisipkan JavaScript

Script akan dieksekusi saat halaman landing page publik dimuat:

<div id="countdown-custom"></div>

<script>
  const target = new Date('2025-12-31T23:59:59');
  function tick() {
    const now = new Date();
    const diff = target - now;
    const h = Math.floor(diff / 3600000);
    const m = Math.floor((diff % 3600000) / 60000);
    const s = Math.floor((diff % 60000) / 1000);
    document.getElementById('countdown-custom').innerText =
      `${h}j ${m}m ${s}d tersisa`;
  }
  setInterval(tick, 1000);
  tick();
</script>

Contoh Penggunaan Nyata

Contoh 1 — Calendly Inline Widget

Paste embed code dari dashboard Calendly ke dalam textarea HTML Code — berupa tag <div> dengan atribut data-url yang menunjuk ke link booking kamu, diikuti satu tag <script> yang memuat widget Calendly dari CDN mereka. Hasilnya: kalender booking interaktif muncul langsung di landing page tanpa redirect.

Contoh 2 — Schema.org JSON-LD untuk SEO

Sisipkan blok <script type="application/ld+json"> berisi data Product schema (nama produk, deskripsi, brand, harga, dan ketersediaan dalam format JSON-LD). Komponen ini tidak menghasilkan tampilan visual di canvas maupun di halaman publik — tapi Google membacanya dan bisa menampilkan harga serta informasi produk kaya di hasil pencarian (rich snippet).

Contoh 3 — Lottie Animation

Load library lottie-player via tag <script> eksternal, lalu tambahkan elemen <lottie-player> dengan atribut src menunjuk ke URL file JSON animasi, ditambah atribut loop dan autoplay. Hasilnya: animasi SVG bergerak (checkmark, ilustrasi produk, loader) tampil mulus di landing page tanpa plugin tambahan.

Contoh 4 — Google Maps Iframe

Tambahkan tag <iframe> dengan src dari Google Maps Embed API (URL yang kamu salin dari "Bagikan → Sematkan peta"), set width="100%" dan height="400", serta tambahkan border-radius: 12px via atribut style untuk tampilan yang rapi. Lokasi toko langsung tampil sebagai peta interaktif yang bisa di-zoom dan diklik pengunjung.

Tips & Gotchas