Apa itu widget kalkulator
Widget kalkulator adalah versi ringkas dan mandiri dari kalkulator Calculate.Studio yang berjalan langsung di dalam halaman Anda. Secara teknis bentuknya adalah iframe — elemen HTML yang menyisipkan satu halaman ke dalam halaman lain — yang mengarah ke versi sematan kalkulator yang ringan, ditambah satu paragraf kredit di bawahnya. Iframe adalah elemen HTML baku yang didukung semua peramban modern, sehingga tidak ada yang perlu dipasang dan tidak ada yang bisa berbenturan dengan kode situs Anda sendiri.
Widget ini adalah kalkulator yang sama persis dengan yang berjalan di Calculate.Studio: rumus teruji yang sama, hasil instan di sisi peramban yang sama, dan untuk perkakas kesehatan maupun keuangan, disklaimer yang sama pula. Pengunjung cukup mengetik angka mereka dan hasilnya langsung muncul tanpa perlu meninggalkan halaman Anda. Karena perhitungan berlangsung di peramban pengunjung dan bukan di server, widget tetap gesit meski lalu lintas sedang padat, sedangkan data pengunjung tidak dikirim ke mana pun.
Seluruh 210 kalkulator di situs ini bisa disematkan. Galeri di calculate.studio/en/widgets menampilkan yang paling banyak diminta — antara lain BMI, KPR, pinjaman, persentase, bunga majemuk, usia, kalori, dan IPK — sedangkan setiap halaman kalkulator punya tombol Embed di samping tombol berbagi yang memunculkan kode sematan untuk perkakas tersebut.
Cara memasangnya — metode umum
Pemasangan cukup sekali salin-tempel. Kode sematan terdiri atas dua bagian: iframe yang menampilkan kalkulator, dan satu paragraf kredit kecil yang menaut ke kalkulator versi penuh serta ke Calculate.Studio. Menjaga baris kredit itu tetap utuh adalah satu-satunya syarat penggunaan gratis — justru itulah yang membuat program ini tetap bebas biaya bagi semua orang.
- Buka calculate.studio/en/widgets, atau buka halaman kalkulator mana pun lalu klik tombol </> Embed.
- Klik Copy code. Kode sematan akan tersalin ke papan klip Anda.
- Di editor situs web Anda, beralihlah ke tampilan HTML (kadang disebut “code” atau “source”) pada halaman yang ingin diisi kalkulator.
- Tempelkan kode di posisi tempat kalkulator seharusnya muncul, lalu simpan dan terbitkan.
- Pratinjau halamannya. Kalkulator seharusnya termuat dan langsung menghitung — coba sekali dengan angka contoh.
Panduan per platform
Sebagian besar pembangun situs menerima HTML mentah lewat blok atau elemen khusus, sehingga kode yang sama bisa dipakai di mana saja. Yang berbeda hanyalah penamaannya di tiap platform:
| Platform | Tempat menempelkan kode sematan |
|---|---|
| WordPress (editor blok) | Tambahkan blok “Custom HTML” lalu tempelkan kodenya di situ. |
| WordPress (editor klasik) | Pindahkan tab editor dari “Visual” ke “Text”, lalu tempelkan. |
| Wix | Tambahkan elemen “Embed HTML” (Add → Embed code → Embed HTML), lalu tempelkan. |
| Squarespace | Tambahkan blok “Code” pada bagian halaman tersebut, lalu tempelkan. |
| Shopify | Di editor halaman atau pos blog, klik tombol <> (Show HTML), lalu tempelkan. |
| Webflow | Tambahkan komponen “Embed”, lalu tempelkan. |
| Situs HTML biasa | Tempelkan kode langsung ke dalam HTML halaman, di posisi tempat kalkulator akan tampil. |
Ukuran, tampilan, dan performa
Kode sematan datang dengan pengaturan bawaan yang masuk akal: lebar penuh (width="100%"), tinggi tetap yang disesuaikan dengan jumlah masukan kalkulator tersebut, serta bingkai tipis bersudut membulat. Anda boleh mengubah nilai tinggi bila tema situs menuntut bingkai yang lebih jangkung atau lebih pendek, dan boleh pula menyunting atau menghapus gaya bingkainya agar selaras dengan desain Anda. Lebarnya sudah responsif sejak awal, sehingga widget tampil rapi di ponsel tanpa penyesuaian tambahan.
Iframe-nya menyertakan loading="lazy", atribut peramban baku yang menunda pemuatan widget sampai pengunjung menggulir mendekatinya. Artinya, menyematkan kalkulator praktis tidak menambah waktu muat awal halaman Anda — peramban baru mengambil widget ketika benda itu hampir terlihat.
Halaman sematannya sendiri ditandai noindex dengan tautan kanonis ke halaman kalkulator versi penuh, sesuai panduan Google untuk konten yang disematkan dan konten ganda. Karena itu, menyematkan widget tidak mungkin menimbulkan masalah konten ganda, baik bagi situs Anda maupun bagi situs kami.
Satu-satunya syarat: pertahankan tautan balik
Program widget ini gratis tanpa pendaftaran karena satu syarat saja: paragraf kredit kecil di bawah iframe — baris yang berbunyi “[Nama kalkulator] by Calculate.Studio” — harus tetap ada. Teksnya berukuran 12 piksel, duduk tenang di bawah widget, dan tidak bersaing dengan konten Anda.
Anda bebas mengubah ukuran iframe, menata ulang bingkainya, dan menempatkan widget di mana pun pada situs Anda, termasuk situs komersial, blog, maupun proyek klien. Bila kalkulator yang Anda butuhkan tidak ada di galeri unggulan, setiap halaman kalkulator di situs ini punya tombol Embed sendiri, sehingga seluruh 210 perkakas tetap tersedia.
Kalkulator mana yang paling cocok dijadikan widget?
Widget terbaik untuk situs Anda adalah yang membuat pembaca tak perlu meninggalkan halaman demi mencarinya di tempat lain. Blog kebugaran dan kesehatan biasanya menyematkan kalkulator BMI, kalori, atau TDEE. Situs properti dan keuangan pribadi menyematkan kalkulator KPR, pinjaman, dan bunga majemuk. Situs pelajar dan pendidikan menyematkan kalkulator IPK serta persentase, sedangkan blog bertopik umum kerap menambahkan kalkulator usia pada tulisan yang tak lekang waktu.
Karena setiap widget menampilkan versi ringkas kalkulator lengkap dengan tautan ke versi penuhnya — yang memuat tabel penafsiran, contoh perhitungan, dan sumber rujukan — pembaca Anda memperoleh jawaban seketika di halaman Anda sekaligus jalan menuju penjelasan yang lebih dalam saat mereka menginginkannya.
Pertanyaan yang sering diajukan
Apakah widget kalkulatornya benar-benar gratis?
Ya. Tidak ada pendaftaran, tidak ada kunci API, tidak ada batas pemakaian, dan tidak ada biaya. Satu-satunya syarat adalah baris kredit kecil di bawah widget, yang menaut ke Calculate.Studio, harus tetap ada.
Apakah widget ini akan memperlambat situs web saya?
Tidak. Iframe-nya memakai pemuatan tertunda bawaan peramban, sehingga baru diambil ketika pengunjung menggulir mendekatinya, sedangkan perhitungannya berjalan sepenuhnya di peramban pengunjung. Praktis tidak ada tambahan beban pada waktu muat awal halaman Anda.
Bisakah saya menyematkan kalkulator di situs web komersial atau situs klien?
Bisa. Widget boleh dipakai di situs komersial, blog, dan proyek klien tanpa biaya, sepanjang tautan kredit di bawah widget tetap utuh.
Bisakah saya mengubah ukuran atau bingkai widget?
Bisa. Anda boleh menyunting tinggi iframe dan gaya bingkainya agar cocok dengan situs Anda. Lebarnya sudah responsif (100%), sehingga otomatis menyesuaikan diri dengan layar ponsel dan kolom sempit.
Apakah menyematkan widget menimbulkan masalah konten ganda untuk SEO?
Tidak. Halaman sematan ditandai noindex dengan tautan kanonis yang mengarah ke halaman kalkulator versi penuh, sesuai panduan resmi Google, sehingga mesin telusur tidak memperlakukan widget itu sebagai konten ganda di situs Anda.
Referensi
- MDN Web Docs — <iframe>: The Inline Frame element. Mozilla Developer Network. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
- MDN Web Docs — Lazy loading (loading attribute). Mozilla Developer Network. https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading
- Google Search Central — Consolidate duplicate URLs with canonicals. Google. https://developers.google.com/search/docs/crawling-indexing/consolidate-duplicate-urls
- Google Search Central — Block search indexing with noindex. Google. https://developers.google.com/search/docs/crawling-indexing/block-indexing
- WHATWG HTML Living Standard — The iframe element. https://html.spec.whatwg.org/multipage/iframe-embed-object.html