Widget siap pakai

Widget Cek Resi – tinggal tempel, langsung bekerja.

Q: Platform apa saja yang mendukung widget cek resi ini?

Widget cek resi dapat dipasang di WordPress, Blogger, Shopify, Wix, Squarespace, Notion, Webflow, hingga framework custom seperti Laravel atau React. Cukup tempel snippet HTML pada blok yang mendukung JavaScript.

Q: Apakah tampilan widget responsif di layar kecil?

Skrip embed.js mengatur tinggi iframe dan menyesuaikan lebar container secara otomatis sehingga widget tampil rapi di desktop maupun seluler. Pastikan container tidak diberi overflow hidden agar responsivitas optimal.

Q: Bagaimana cara mengubah warna, tema, atau font?

Anda bisa menggunakan atribut data-theme (auto, light, dark), data-primary untuk warna utama, serta data-border dan data-radius untuk mengatur garis luar dan sudut. Widget mengikuti font utama situs Anda.

Q: Seberapa besar dampaknya terhadap kecepatan situs?

Widget berukuran kurang dari 40 KB, dimuat secara async, dan hanya diinisialisasi sekali sehingga tetap ringan. Peletakan snippet mendekati akhir konten membantu menjaga Core Web Vitals tetap hijau.

Q: Bisakah memasang banyak widget cek resi dalam satu halaman?

Bisa. Setiap div dengan class coid-widget akan dideteksi secara otomatis meskipun menggunakan konfigurasi data yang berbeda, sehingga aman untuk landing page yang menampilkan beberapa form sekaligus.

Q: Apakah widget ini aman untuk SEO?

Widget dimuat lewat iframe dengan lazy loading sehingga tidak menimpa heading, meta, maupun konten utama. Cara ini membuat struktur on-page dan skor SEO tetap terjaga.

Q: Apakah perlu update manual bila ada kurir baru?

Tidak perlu update manual. Kami mengirimkan versi embed.js terbaru secara otomatis sehingga ekspedisi baru maupun perbaikan tampilan langsung aktif ketika halaman dimuat.

Q: Di mana mendapatkan bantuan pemasangan atau troubleshooting?

Tim Cek Ongkir ID dapat dihubungi melalui email help@cek-ongkir.id dan menyediakan panduan di halaman preview widget. Sertakan URL situs agar kami bisa menganalisis konfigurasi Anda.

Tampilkan pelacakan paket multi-kurir (JNE, J&T, SiCepat, Pos, Anteraja, dan lainnya) langsung di situsmu. Widget ini ringan, responsif, mendukung mode gelap, serta otomatis menyesuaikan tinggi iframe.

Coba snippet Lihat dokumentasi

Kenapa widget cek resi ini jadi favorit developer?

Satu snippet untuk semua platform Tempel kode HTML di WordPress, Blogger, Notion, Wix, Squarespace, atau proyek custom tanpa konfigurasi tambahan.
Ringan & aman Berukuran < 40 KB, otomatis mendeteksi tinggi konten, serta sandbox iframe memastikan keamanan embed lintas domain.
Mudah dikustom Ganti warna utama, tema terang/gelap, prefill kurir atau nomor resi, hingga atur auto-submit melalui atribut data-*.

Kode HTML siap tempel

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

Favorit: data-theme="dark" data-primary="#16a34a" data-awb="JP1234567890" data-auto-submit="true"

Cara pasang

Salin snippet HTML di atas.
Tempel pada blok Custom HTML / Code platform favoritmu.
Simpan perubahan — widget langsung tampil dan siap dipakai.

Tidak perlu menambahkan query version (?v=...); file akan otomatis revalidate berkala.

Atribut data `data-*` yang tersedia

Gunakan atribut berikut untuk mengatur tampilan & perilaku widget.

Nama atribut	Contoh	Fungsi
`data-mode`	`resi`	Wajib untuk mengaktifkan mode cek resi.
`data-theme`	`light` / `dark` / `auto`	Mengatur tema widget mengikuti situsmu.
`data-primary`	`#2563eb`	Menentukan warna utama tombol dan aksen.
`data-courier`	`jne`	Prefill pilihan kurir (opsional).
`data-awb` / `data-resi`	`JP1234567890`	Prefill nomor resi awal.
`data-last5`	`12345`	5 digit terakhir no. HP penerima (khusus JNE).
`data-auto-submit`	`true` / `false`	Jika `true`, widget otomatis melacak saat nomor resi & kurir diprefill.
`data-min-height`	`420`	Menetapkan tinggi minimum iframe.
`data-radius`	`16`	Mengatur radius sudut iframe dalam piksel.
`data-border`	`false`	Hilangkan border default iframe bila diperlukan.
`data-path`	`/widget/resi-card`	Memastikan iframe memuat kartu resi terbaru (berguna untuk cache skrip lama).
`data-lang`	`id`	Mengatur bahasa antarmuka (default: `id`).
`data-credit-outside`	`false`	`true` menampilkan kredit di luar iframe, `false` memindahkan ke dalam.

Contoh penggunaan cepat

Landing page after-sales Isi data-awb dan data-courier agar pelanggan langsung melihat status kiriman.

Dashboard seller Aktifkan data-auto-submit untuk pelacakan instan saat halaman dibuka.

Halaman FAQ Gunakan data-credit-outside="false" agar kredit tetap rapi di dalam iframe.

FAQ Widget Cek Resi

Pertanyaan populer sebelum memasang Widget Cek Resi

Kami rangkum jawaban teknis dan bisnis agar integrasi pelacakan resi di situs Anda lebih cepat, aman, dan ramah SEO.

Platform apa saja yang mendukung widget cek resi ini?

Widget dapat ditempel di WordPress, Blogger, Shopify, Wix, Squarespace, Notion, Webflow, hingga aplikasi custom berbasis Laravel atau React. Cukup gunakan blok Custom HTML dan tempel snippet yang tersedia.

Apakah tampilan widget responsif di layar kecil?

Ya. embed.js mengatur ukuran iframe otomatis mengikuti lebar container dan preferensi tema perangkat. Pastikan kontainer memiliki lebar 100% serta tidak dibatasi overflow:hidden.

Bagaimana cara mengubah warna, tema, atau font?

Gunakan atribut data-theme (auto, light, dark), data-primary untuk warna utama, serta data-border/data-radius demi menyesuaikan tepi. Widget mengikuti font dasar situs sehingga tampil serasi.

Seberapa besar dampaknya terhadap kecepatan situs?

Ukuran skrip < 40 KB dan dimuat secara async, sehingga tidak menghalangi render. Script juga hanya diinisialisasi satu kali meski ada beberapa widget, menjaga skor Core Web Vitals tetap stabil.

Bisakah memasang banyak widget cek resi dalam satu halaman?

Ya. Setiap blok coid-widget akan dikenali secara otomatis. Anda dapat memberikan atribut data-courier atau data-awb berbeda untuk menyesuaikan kampanye atau landing page tertentu.

Apakah widget ini aman untuk SEO?

Widget dimuat melalui iframe dengan dukungan lazy loading sehingga tidak mengubah struktur heading, meta, maupun konten utama halaman. Hal ini menjaga optimasi on-page dan tidak menambah script berat.

Apakah perlu update manual bila ada kurir baru?

Tidak perlu. Kami memperbarui backend serta embed.js secara berkala. Saat halaman dimuat ulang, widget otomatis menggunakan fitur terbaru termasuk dukungan ekspedisi tambahan.

Di mana mendapatkan bantuan pemasangan atau troubleshooting?

Hubungi [email protected] atau kunjungi halaman preview widget resi untuk panduan lanjutan. Sertakan URL situs agar tim kami dapat melakukan pengecekan cepat.