Form Embed — Jual Produk di Website Sendiri

Hasil akhir: Kamu punya form pemesanan Konvert yang tampil di website kamu sendiri (bukan landing page Konvert), lengkap dengan tampilan dan pixel tracking sendiri — dan setiap pesanan yang masuk tetap muncul di menu Orders seperti biasa. Butuh: Minimal satu produk atau bundle yang sudah dibuat, dan akses ke kode website kamu (atau ke orang yang mengelolanya) untuk menempel satu snippet.

8.6.1Ringkasan

Form Embed memungkinkan kamu menjual produk tanpa harus membuat landing page baru di Konvert. Kamu sudah punya website sendiri (WordPress, Shopify, atau aplikasi React/Next.js) dan cuma butuh form order untuk satu produk? Tinggal buat embed di Konvert, tempel satu snippet kecil ke halaman website kamu, dan form order langsung tampil di sana.

Yang penting: form ini tetap 100% form Konvert. Pembeli isi form → checkout → order masuk ke menu Orders persis seperti order dari landing page biasa, lengkap dengan saldo, fee, dan email notifikasi otomatis.

8.6.2Langkah-langkah

Di sidebar kiri, buka grup Toko → klik Form Embed. Kamu akan diarahkan ke halaman daftar embed toko kamu.

/store/:storeId/embeds

Kalau belum ada embed sama sekali, tabelnya kosong dengan pesan "Belum ada embed. Klik 'Buat Embed' untuk mulai."

2. Klik "Buat Embed"

Klik tombol Buat Embed di kanan atas. Kamu masuk ke halaman pembuatan embed baru, dengan panel form di kiri dan live preview di kanan.

/store/:storeId/embeds/new

Tips: Preview di kanan langsung update setiap kali kamu ubah pengaturan — pakai ini untuk cek tampilan sebelum simpan. Tombol order di preview tidak aktif (mode pratinjau saja).

3. Isi nama internal dan slug

Di card Embed paling atas:

Field	Keterangan
Nama internal	Nama untuk kamu sendiri, tidak tampil ke pembeli. Contoh: "Form Produk A — landingpage Shopify".
Slug (URL)	Bagian unik dari URL embed, contoh `produk-a-shopify`. Otomatis diubah ke huruf kecil + tanda hubung saat kamu mengetik. 4–48 karakter.

⚠️Slug tidak bisa diganti sembarangan

Setelah embed disimpan, slug bisa tetap kamu ubah — tapi kalau kamu sudah menempel snippet ke website, mengubah slug bikin snippet lama 404. Kalau terpaksa ganti, pastikan tempel ulang snippet baru di semua tempat form ini dipasang.

4. Aktifkan status dan pilih theme

Aktif — saklar ini menentukan apakah form tampil atau tidak di website kamu. Saat dinonaktifkan, embed di website pelanggan berhenti menampilkan form (tapi snippet-nya tidak perlu dihapus).
Theme — pilih Light atau Dark sebagai tampilan dasar form. Ini menyesuaikan warna latar form supaya cocok dengan tema website kamu; warna khusus yang kamu atur di bagian Style (lihat langkah 7) tetap menang di atas theme ini.

card Embed di /store/:storeId/embeds/new — toggle Aktif dan pilihan theme Light/Dark

5. Pilih produk atau bundle

Scroll ke card Content, lalu di field Yang dijual pilih salah satu:

Satu atau beberapa produk, atau
Satu bundle

Kamu tidak bisa mencampur produk dan bundle dalam satu embed — pilih salah satu.

Setelah produk/bundle dipilih, preview di kanan otomatis menampilkan form lengkap dengan gambar dan harga produk tersebut.

6. Atur field, quantity, summary, dan aksi setelah submit

Masih di card Content, atur detail form sesuai kebutuhan:

Bagian	Opsi
Product Image	Tampilkan gambar produk di form + atur ukurannya
Form Fields	Tampilkan/wajibkan field Catatan (Notes)
Quantity	Aktifkan selector jumlah beli + atur minimum/maksimum/default
Variants	Tampilkan pilihan varian (dropdown / tombol / kartu) kalau produk punya varian
Order Summary	Tampilkan ringkasan pesanan (subtotal, diskon, total) di form
Discount Code	Tampilkan field kode voucher + opsi voucher default yang otomatis terisi
Submit Button	Ubah teks tombol (misal "Order Now") dan teks saat loading
After Submission	Setelah bayar berhasil: lanjut ke Payment (form pembayaran tampil di iframe yang sama) atau Redirect to URL ke halaman lain
On Payment Success	Tampilkan tombol WhatsApp otomatis ke nomor kamu + atur pengiriman produk digital (tampil di halaman / email / keduanya)

card Content di /store/:storeId/embeds/new — field Yang dijual terisi produk, toggle Product Image/Order Summary/Discount Code terlihat

7. Atur warna (Style)

Card Style berisi color picker untuk setiap bagian form:

Warna label, background input, teks input, border input
Warna background tombol dan teks tombol
Warna background, teks, dan harga di Order Summary

Ini sama persis dengan panel styling Order Form di builder landing page — kalau kamu sudah pernah styling Order Form di LP, tampilannya akan familiar.

card Style di /store/:storeId/embeds/new — color picker label/input/tombol/summary

8. Pasang Pixel tracking (Meta + TikTok)

Card Tracking adalah tempat kamu menghubungkan pixel iklan ke form embed ini:

Pixel	Cara kerja
Meta Pixel	Pilih satu pixel Meta yang sudah terhubung di Settings. `PageView` selalu otomatis fired saat form dimuat.
TikTok Pixel	Pilih satu atau lebih pixel TikTok sekaligus (centang semua yang relevan) — beda dari Meta yang cuma satu pixel per embed.
On Page View Event	Event tambahan opsional (misalnya `ViewContent` atau `Lead`) yang ikut fired ke Meta Pixel saat embed dimuat, di luar `PageView` otomatis.

ℹ️Belum ada pixel terhubung?

Kalau kamu belum menghubungkan pixel Meta atau TikTok, card ini menampilkan tombol pintasan ke halaman Settings terkait. Lihat panduan Meta Pixel untuk detailnya.

card Tracking di /store/:storeId/embeds/new — dropdown pilih Meta Pixel dan daftar checklist TikTok Pixel

9. Simpan

Klik Simpan di kanan atas atau di bagian bawah form. Kalau berhasil, kamu diarahkan ke halaman edit embed — di sinilah snippet kode untuk website kamu muncul.

8.6.32. Pasang Snippet ke Website

10. Salin kode embed

Di halaman edit embed, card Kode Embed paling atas menampilkan snippet siap pakai dalam 3 pilihan tab:

Tab	Untuk platform
HTML	WordPress, Shopify (custom HTML block), atau halaman HTML biasa
React	Aplikasi React murni (Vite / CRA)
Next.js	Aplikasi Next.js (App Router atau Pages Router)

/store/:storeId/embeds/:id

Klik Salin di tab yang sesuai, lalu tempel ke halaman website kamu. Contoh snippet HTML:

<div data-konvert-embed="produk-a-shopify"></div>
<script src="https://konvert.id/embed.js" async></script>

card Kode Embed di /store/:storeId/embeds/:id — tab HTML/React/Next.js dengan tombol Salin

💡Cara kerjanya

<div data-konvert-embed="..."> adalah tempat form akan muncul. Script embed.js otomatis mendeteksi div ini, menyuntikkan form sebagai iframe, dan menyesuaikan tingginya secara otomatis mengikuti isi form (auto-resize) — kamu tidak perlu mengatur tinggi manual.

11. Cek hasilnya di website kamu

Setelah snippet ditempel dan halaman website kamu dimuat ulang, form order akan tampil persis seperti preview di Konvert. Kalau form tidak muncul:

Pastikan snippet ditempel persis (tidak ada karakter yang terpotong)
Cek status embed di Konvert — pastikan Aktif
Buka console browser di website kamu, cek ada error atau tidak saat memuat embed.js

12. Preview cepat tanpa website

Kalau kamu cuma mau lihat tampilan form tanpa pasang ke website dulu, klik Buka full di halaman edit embed (atau menu ⋮ → Preview di daftar embed). Ini membuka form dalam tab baru sebagai halaman penuh — berguna untuk share link cek ke tim atau testing sebelum dipasang.

/embed/:slug

8.6.43. Kelola Embed yang Sudah Dibuat

Aksi di daftar Form Embed

Kembali ke /store/:storeId/embeds, tiap baris embed punya menu titik-tiga (⋮) dengan pilihan:

Aksi	Keterangan
Edit	Buka halaman edit lengkap
Preview	Buka form di tab baru sebagai halaman penuh
Salin snippet	Salin snippet HTML langsung tanpa buka halaman edit
Hapus	Hapus embed — snippet di website berhenti menampilkan form, tapi order lama tetap tersimpan

menu titik-tiga di baris embed pada /store/:storeId/embeds — pilihan Edit, Preview, Salin snippet, Hapus terlihat

Cari dan filter

Di atas tabel tersedia:

Search — cari berdasarkan nama atau slug
Filter status — Semua status / Aktif / Nonaktif

Berguna kalau kamu punya banyak embed untuk produk berbeda-beda.

Setiap pesanan yang masuk lewat form embed tampil di menu Orders seperti biasa — tidak ada tabel terpisah.

/store/:storeId/orders

Untuk membedakan order dari embed dan dari landing page, buka detail order tersebut — bagian Sumber Pesanan di sidebar detail order akan menyebutkan nama embed yang dipakai, bukan nama landing page. Order dari embed tidak terhubung ke landing page manapun.

Selebihnya, order dari embed diproses persis sama seperti order LP — status Pending → Processing → Completed, fee platform, saldo, dan email notifikasi berjalan seperti biasa. Lihat Kelola Orders untuk detail alur order.

8.6.6Troubleshooting

Form tidak muncul sama sekali di website:

Cek embed berstatus Aktif di Konvert
Cek snippet ditempel utuh (dua baris: <div> dan <script>)
Cek console browser di website — kalau script gagal dimuat, biasanya ada masalah jaringan atau CSP di sisi website kamu

Form muncul tapi tinggi terpotong / ada scroll ganda: Form seharusnya auto-resize mengikuti tinggi konten. Kalau masih terpotong, pastikan elemen pembungkus <div data-konvert-embed="..."> di website kamu tidak diberi height atau overflow:hidden manual — biarkan script yang mengatur tingginya.

Saya ganti slug dan sekarang form 404 di website: Slug lama tidak lagi valid setelah diganti. Buka halaman edit embed, salin snippet baru (dengan slug terbaru), lalu tempel ulang ke semua tempat form ini dipasang.

Order dari embed tidak muncul di Orders: Order embed masuk ke pipeline order yang sama seperti LP — cek filter status/tanggal di menu Orders, dan pastikan kamu melihat toko yang benar (kalau kamu punya banyak toko).

8.6.7FAQ

Bisa pasang embed yang sama di beberapa halaman/website sekaligus?

Bisa. Snippet yang sama bisa ditempel di banyak halaman atau bahkan banyak domain berbeda — semuanya menunjuk ke embed yang sama, jadi kalau kamu ubah pengaturan sekali, semua tempat ikut berubah.

Apakah bisa jual lebih dari satu produk sekaligus lewat satu form embed?

Untuk saat ini, satu form embed terhubung ke satu pilihan "Yang dijual" (produk atau bundle). Kalau mau jual beberapa produk berbeda di halaman yang sama, buat bundle yang menggabungkan produk-produk tersebut, atau buat beberapa embed terpisah masing-masing dengan div berbeda.

Apa bedanya embed dengan landing page Konvert biasa?

Landing page dibuat dan di-hosting penuh di Konvert (punya slug halaman sendiri, /nama-toko/nama-lp). Form embed hanya berupa satu komponen form yang kamu tempel ke halaman milik kamu sendiri — sisanya (header, konten produk, footer, dll) tetap kamu yang kelola di website sendiri.

8.6.8Hasilnya

Setelah tutorial ini, kamu sudah bisa:

Membuat form embed baru lengkap dengan tampilan, field, dan tracking pixel
Menempel snippet ke website sendiri (HTML, React, atau Next.js)
Membedakan dan memantau order yang masuk dari embed di menu Orders
Mengelola (edit/nonaktifkan/hapus) embed yang sudah dipasang

Last reviewed: 2026-07-10

8.6 Form Embed — Jual Produk di Website Sendiri