siap tempel

Widget Cek Ongkir yang terasa seperti native.

Q: Di platform apa saja Widget Cek Ongkir bisa dipasang?

Widget Cek Ongkir bersifat plug-and-play sehingga dapat ditambahkan ke WordPress, Blogspot, Wix, Squarespace, Shopify, Laravel, dan situs custom lainnya. Cukup tempel snippet HTML ke blok atau template yang mendukung JavaScript.

Q: Bagaimana memastikan widget responsif di semua perangkat?

Script embed.js mengatur tinggi iframe secara otomatis, mengikuti lebar container 100%, serta membaca preferensi mode terang atau gelap pengunjung. Pastikan kontainer tidak memiliki overflow tersembunyi agar responsif bekerja optimal.

Q: Bisakah warna dan tema widget diubah?

Anda dapat memakai atribut data-theme untuk memilih auto, light, atau dark, mengatur warna utama melalui data-primary, dan menyesuaikan radius serta border menggunakan data-radius dan data-border.

Q: Apakah widget ini mempengaruhi kecepatan halaman?

Widget berukuran kurang dari 35 KB, dimuat secara async, dan hanya diinisialisasi sekali sehingga tetap ringan. Menempatkan snippet di bagian akhir konten membantu menjaga skor Core Web Vitals.

Q: Bisakah memasang lebih dari satu widget di halaman?

Bisa. Tambahkan beberapa div dengan class coid-widget dan tetapkan atribut data berbeda sesuai kebutuhan. Script akan mendeteksi dan menginisialisasi seluruh widget tanpa konflik.

Q: Apakah widget aman untuk SEO dan Core Web Vitals?

Widget dimuat melalui iframe dengan dukungan lazy loading, sehingga tidak memodifikasi heading utama halaman maupun konten yang dirayapi mesin pencari. Hal ini menjaga struktur SEO dan metrik performa Anda.

Q: Perlukah memperbarui widget saat ada fitur baru?

Tidak perlu update manual. File embed.js dikirimkan selalu dalam versi terbaru sehingga perubahan ekspedisi atau tampilan langsung terlihat ketika halaman dimuat ulang.

Q: Bagaimana jika butuh bantuan pemasangan lebih lanjut?

Tim Cek Ongkir ID siap membantu melalui email help@cek-ongkir.id dan menyediakan panduan pada halaman preview widget. Sertakan URL situs agar analisis dapat dilakukan lebih cepat.

Hadirkan kalkulator ongkir yang responsif, ringan, dan langsung mengikuti tema situs kamu. Cukup satu snippet HTML untuk WordPress, Blogspot, Shopify, atau website custom—sekarang dengan pilihan dropdown bertingkat ataupun autocomplete cepat tanpa kompromi performa.

Auto-resize Tema auto / gelap / terang Performa < 35 KB Dropdown & Autocomplete

Coba snippet Lihat dokumentasi

Kenapa widget ini disukai developer & marketer?

Tinggal tempel Satu snippet HTML langsung aktif untuk WordPress, Wix, Squarespace, hingga situs custom.
Gesit dan ringan Inisialisasi cuma sekali per halaman < 35 KB — tetap ngebut meski dipasang lebih dari satu widget.
Pintar beradaptasi Otomatis menyesuaikan tinggi, tema terang/gelap, dan warna utama (data-primary).
Dua gaya input Pilih dropdown bertingkat atau pencarian autocomplete cepat sesuai alur pengguna.

Auto-height Tinggi iframe menyesuaikan konten — cocok untuk sidebar sempit.

Dark mode aware Mode auto mengikuti preferensi pengunjung tanpa perlu kode tambahan.

Multi-widget safe embed.js cukup dimuat sekali walau ada beberapa widget di halaman.

Kode HTML siap tempel

<div class="coid-widget" data-theme="auto" data-primary="#2563eb" data-lang="id"></div>
<script async src="https://cek-ongkir.id/static/widget/embed.js"></script>

Parameter favorit: data-theme="dark" data-primary="#16a34a" data-origin-id="ID-JK-71" data-destination-id="ID-JB-22" data-path="/widget/card-auto"

Cara pasang (umum)

Salin snippet HTML di atas.
Tempel pada blok Custom HTML / Code platform pilihanmu.
Simpan perubahan dan lihat widget langsung menyatu dengan situsmu 🎉

Tidak perlu menambahkan query version (?v=...). Berkas akan otomatis revalidate secara berkala.

Atribut `data-*` yang tersedia

Sesuaikan perilaku widget ongkir agar selaras dengan alur belanja dan kampanye Anda.

Nama atribut	Contoh	Fungsi
`data-theme`	`auto` / `light` / `dark`	Mengikuti tema situs atau memaksa mode terang/gelap.
`data-primary`	`#2563eb`	Menentukan warna utama tombol dan aksen.
`data-path`	`/widget/card-auto`	Memaksa mode autocomplete. Kosongkan untuk dropdown standar.
`data-origin-id`	`ID-JK-71`	Prefill kota asal ongkir agar pengguna tinggal memilih tujuan.
`data-destination-id`	`ID-JB-22`	Prefill kota tujuan ongkir untuk mempercepat simulasi biaya.
`data-weight`	`1000`	Prefill berat paket (angka). Cocok untuk produk dengan bobot tetap.
`data-couriers`	`jne,jnt,sicepat`	Membatasi kurir yang ditampilkan (pisahkan dengan koma).
`data-auto-ongkir`	`true`	Menampilkan hasil ongkir otomatis saat parameter terisi.
`data-radius`	`16`	Mengatur radius sudut iframe dalam piksel.
`data-border`	`false`	Menyembunyikan border default iframe.
`data-credit-outside`	`true` / `false`	`true` menampilkan kredit di luar iframe, `false` memindahkan ke dalam.
`data-lang`	`id`	Mengatur bahasa antarmuka (default: `id`).

Contoh penggunaan cepat

Landing page promo Prefill data-origin-id, data-destination-id, lalu aktifkan data-auto-ongkir agar biaya kirim langsung tampil.

Halaman produk Isi data-weight dan batasi kurir lewat data-couriers supaya kalkulasi ongkir konsisten.

Artikel edukasi Gunakan data-path="/widget/card-auto" untuk pencarian cepat tanpa dropdown bertingkat.

FAQ Widget Cek Ongkir

Pertanyaan populer sebelum memasang Widget Cek Ongkir

Jawaban singkat agar implementasi widget ongkir di WordPress, Blogger, Shopify, atau situs custom berjalan mulus dan ramah SEO.

Di platform apa saja Widget Cek Ongkir bisa dipasang?

Widget ini berbasis HTML dan JavaScript ringan sehingga bisa ditempel di WordPress, Blogspot, Wix, Squarespace, Shopify, Laravel, hingga landing page static. Cukup gunakan blok Custom HTML atau paste snippet ke template Anda.

Bagaimana memastikan widget responsif di semua perangkat?

Script embed.js otomatis menyesuaikan tinggi iframe, mengikuti lebar container, dan membaca preferensi tema pengguna. Anda hanya perlu memastikan container memiliki lebar 100% dan tidak dikurung elemen dengan overflow:hidden.

Bisakah warna dan tema widget diubah?

Ya. Gunakan atribut data-theme untuk memilih auto, light, atau dark dan atur warna utama dengan data-primary. Anda juga dapat menambahkan data-radius atau data-border untuk menyesuaikan sudut dan garis luar.

Apakah widget ini mempengaruhi kecepatan halaman?

Widget Cek Ongkir berukuran < 35 KB dan dimuat secara async, sehingga tidak memblokir rendering. Script hanya diinisialisasi sekali meski ada beberapa widget. Tempatkan snippet mendekati akhir konten untuk menjaga skor Core Web Vitals.

Bisakah memasang lebih dari satu widget di halaman?

Bisa. Selama setiap blok memiliki <div class="coid-widget">, script akan mendeteksi dan menginisialisasi semuanya tanpa konflik. Pengaturan seperti data-origin-id, data-destination-id, atau data-couriers dapat berbeda pada tiap widget.

Apakah widget aman untuk SEO dan Core Web Vitals?

Widget dimuat via iframe dengan dukungan lazy loading, tidak menambah script berat, dan menampilkan konten sesuai interaksi pengunjung. Hal ini menjaga SEO on-page dan tidak mengubah struktur heading utama halaman Anda.

Perlukah memperbarui widget saat ada fitur baru?

Tidak. File embed.js selalu disajikan secara otomatis dengan versi terbaru. Cukup muat ulang halaman untuk mendapatkan pembaruan tampilan maupun ekspedisi baru yang kami tambahkan.

Bagaimana jika butuh bantuan pemasangan lebih lanjut?

Kami menyediakan dokumentasi singkat di halaman preview widget dan dukungan langsung lewat email [email protected]. Sertakan URL situs agar tim kami bisa membantu dengan cepat.