3 layanan sekaligus

Widget Combo Tabs – ongkir, resi, & kode pos dalam satu panel.

Cukup satu widget untuk menghadirkan kalkulator ongkir, pelacakan resi, dan pencarian kode pos. Ringan, responsif, otomatis mengikuti mode gelap/terang situs, dan mudah disesuaikan warnanya.

Coba snippet Lihat dokumentasi
Live preview

Kenapa memilih widget combo?

  • Satu embed untuk tiga kebutuhan Pengunjung bisa cek ongkir dengan pencarian autocomplete, lacak resi, dan cari kode pos tanpa berpindah tab — cocok untuk landing page, blog, atau portal logistik.
  • Performa tinggi, ringan < 40 KB Script embed yang sama dipakai untuk semua widget. Cukup dimuat sekali meski ada lebih dari satu widget di halaman.
  • Mode tab fleksibel Prefill parameter ongkir, resi, atau kode pos sesuai kebutuhan kampanye lewat atribut data-*.
Auto height Tinggi iframe menyesuaikan konten tiap tab, bebas scroll bar.
Dark mode ready Gunakan data-theme="auto" agar mengikuti preferensi pengunjung.
Full responsive Layout tab otomatis berubah menjadi stack pada layar sempit.

Snippet HTML siap tempel

<div class="coid-widget"
     data-mode="combo"
     data-path="/widget/combo-card"
     data-theme="auto"
     data-primary="#2563eb"
     data-lang="id"
     data-credit-outside="true"></div>
<script async src="https://cek-ongkir.id/static/widget/embed.js"></script>
Parameter favorit: data-theme="dark" data-origin-id="ID-JK-71" data-destination-id="ID-BT-11" data-weight="1000"

Cara pasang

  1. Salin snippet HTML di atas.
  2. Tempel pada blok Custom HTML / Embed (WordPress, Blogger, Notion, Shopify, dsb.).
  3. Simpan perubahan lalu muat ulang halaman. Widget otomatis menyesuaikan lebar container.

Tidak perlu query versi tambahan. Berkas embed akan auto update ketika ada pembaruan.

Atribut data-* yang tersedia

Gunakan kombinasi atribut berikut untuk menyesuaikan pengalaman pengguna sesuai konteks halaman atau kampanye.

Nama atribut Contoh Fungsi
data-mode combo Mengaktifkan mode tab ongkir, resi, dan kode pos sekaligus.
data-theme auto / light / dark Mengikuti tema situs atau memaksa mode terang/gelap.
data-primary #2563eb Menentukan warna utama tombol dan aksen.
data-radius 20 Mengatur radius sudut iframe dalam piksel.
data-border false Menyembunyikan border default iframe.
data-origin-id ID-JK-71 Prefill kota asal ongkir. Kombinasikan dengan data-destination-id dan data-weight.
data-destination-id ID-BT-11 Prefill kota tujuan ongkir.
data-weight 1000 Prefill berat paket (gram).
data-couriers jne,jnt,sicepat Membatasi kurir yang ditampilkan pada tab ongkir.
data-auto-ongkir true Menampilkan hasil ongkir langsung setelah parameter terisi.
data-courier jne Prefill pilihan kurir pada tab resi.
data-awb JP1234567890 Prefill nomor resi pada tab pelacakan.
data-auto-submit true Menjalankan pelacakan resi otomatis saat tab dibuka.
data-query bandung wetan Prefill kata kunci pencarian kode pos.
data-auto-search true Menampilkan hasil kode pos secara instan ketika query tersedia.
data-min-height 520 Menetapkan tinggi minimum iframe agar layout tab stabil.
data-lang id Mengatur bahasa antarmuka (default: id).
data-credit-outside true true menampilkan kredit di luar iframe, false memindahkan ke dalam.
data-path /widget/combo-card Memastikan iframe memuat kartu combo terbaru, berguna untuk cache skrip lama.

Contoh penggunaan cepat

Landing page kampanye Prefill kota asal dan tujuan agar calon pelanggan langsung melihat estimasi biaya kirim promo.
Dashboard seller komunitas Tampilkan tab resi otomatis dengan nomor terakhir via data-awb dan data-auto-submit.
Blog panduan kirim barang Sisipkan widget di tengah artikel untuk membantu pembaca mencoba layanan tanpa meninggalkan halaman.

FAQ singkat

Apakah widget ini gratis?

Ya! Anda bisa menggunakan layanan ini secara Gratis.

Bisakah dimuat lebih dari sekali?

Bisa. Script embed.js otomatis mendeteksi dan menginisialisasi setiap .coid-widget hanya sekali.

Apakah aman untuk Core Web Vitals?

Widget memanfaatkan loading lazy dan auto-resize via postMessage. Tempatkan setelah konten utama untuk hasil terbaik.