İçeriğe geç
Miraç Özdemir Geliştirici

Widget'a genel bakış

Widget, bir hesaplayıcıyı tek bir HTML satırıyla sayfanıza ekler. Küçük bir yükleyici betik (widget.js), işaretlediğiniz yere bir iframe yerleştirir; iframe’in içinde, sitemizdeki aynı interaktif hesaplayıcı ve sonuç paneli çalışır. Yalnızca hesaplayıcı değil, bir arama kutusu ve bir kategori listesi de gömülebilir (Widget türleri).

<div data-mo-tool="kdv" data-locale="tr"></div>
<script src="https://api.mirac-ozdemir.com/widget.js" async></script>

Anahtarsız ve ücretsiz

Kayıt veya API anahtarı gerekmez. Yükleyici ve hesaplayıcı herkese açıktır.

Sıçramayan yerleşim

Yer tutucu iskelet yüksekliği ayırır, öğrenilen yükseklik hatırlanır; içerik değiştikçe yükseklik otomatik ayarlanır.

Görünüm ayarları

Tema (inherit dahil), vurgu rengi, köşe yuvarlaklığı, yoğunluk; Türkçe veya İngilizce arayüz.

Programatik kontrol

update, setInputs, calculate, reset; zengin mo:* olayları; özel öğeler ve SDK.

Nasıl çalışır

Bölüm başlığı “Nasıl çalışır”
Sizin sayfanız (herhangi bir origin)              mirac-ozdemir.com
┌────────────────────────────────────┐            ┌───────────────────────────────────┐
│ <div data-mo-tool="kdv">           │            │ /tr/embed/kdv?theme=&header=&id=  │
│ <script src=…/widget.js async>     │   iframe   │                                   │
│   yükleyici seçenekleri doğrular,  ├───────────►│ hesaplayıcıyı çizer, public API'yi│
│   iframe'i kurar, mesajları dinler │◄───────────┤ çağırır, mesaj gönderir           │
│   ve iframe'i komutlarla sürer     │ postMessage│ ve sayfanızın komutlarını yanıtlar│
└────────────────────────────────────┘            └───────────────────────────────────┘
  1. widget.js, sayfadaki data-mo-tool, data-mo-search veya data-mo-category taşıyan her öğeyi (ve <mo-calculator>, <mo-search>, <mo-category> özel öğelerini) bulur, öznitelikleri doğrular ve bir iframe oluşturur.
  2. iframe, https://mirac-ozdemir.com/{dil}/embed/{key} sayfasını (arama ve kategori için /{dil}/embed/kit/…) yükler. Bu sayfa site iskeleti olmadan yalnızca hesaplayıcıyı, uyarıları, sorumluluk reddini ve tam araç sayfasına bir bağlantıyı gösterir.
  3. Sayfa, yüksekliğini ve sonuçlarını postMessage ile üst sayfaya bildirir; yükleyici bunları iframe yüksekliğine ve mo:* olaylarına çevirir. Tersi yönde yükleyici, seçenek değişikliklerini, ön değerleri ve hesaplama komutlarını iframe’e iletir.

Widget mı, API mı?

Bölüm başlığı “Widget mı, API mı?”
Widget Public API
Çaba Tek satır HTML Kendi arayüzünüzü yazarsınız
Görünüm Bizim arayüzümüz (tema, vurgu rengi, köşe, yoğunluk ayarlı) Tamamen sizin tasarımınız
Sonuçlara erişim mo:result olayı, calculate() Doğrudan yanıt
Hesaplama yükü Kullanıcının tarayıcısından, IP başına dağılır Sizin istemcinizden/sunucunuzdan
Sorumluluk metni Widget içinde gösterilir Sizin göstermeniz önerilir

Hızlıca başlamak, vergi/bordro araçlarını içeriğinize eklemek veya bir blog yazısına gömmek için widget uygundur. Özel bir form, mobil uygulama ya da sunucu tarafı hesap için Public API kullanın. İkisini birlikte de kullanabilirsiniz: widget’ı göstermek, sonucu mo:result ile alıp kendi bileşeninizde işlemek.

Neleri içerir

Bölüm başlığı “Neleri içerir”
  • Tüm araçlar: katalogdaki her key widget olarak gömülebilir.
  • Üç tür: hesaplayıcı, arama kutusu ve kategori listesi: Widget türleri.
  • Ön değerler ve otomatik hesaplama: formu açılışta doldurun, isterseniz hemen hesaplatın veya yalnızca sonuç panelini gösterin.
  • Görünüm özelleştirme: accent, radius, density, theme="inherit".
  • Uyarılar ve sorumluluk reddi: aracın uyarıları ve yasal notu widget’ın içinde gösterilir; kaldırılamaz.
  • Bakım modu: bir araç bakımdaysa widget hesaplama yerine bakım bildirimini gösterir.
  • Atıf bağlantısı: widget’ın altında, tam araç sayfasına giden bir bağlantı bulunur (yeni sekmede açılır).
  • Arama motorları: embed sayfaları dizine eklenmez (noindex); içerik değeriniz sizin sayfanızdadır.
  • Anonim kullanım sayımı: hangi alan adlarının widget gömdüğü toplu olarak sayılır; girdi veya sonuç saklanmaz: Güvenlik ve gizlilik.
KurulumÖznitelikler, ön değerler, birden fazla widget ve dinamik sayfalar.
Widget türleriArama kutusu, kategori listesi ve yalnızca sonuç görünümü.
Özel öğeler ve SDKmo-calculator öğeleri, React/Vue bileşenleri ve tipli yükleyici.
YapılandırıcıSeçenekleri seçin, canlı önizleyin, kodu kopyalayın.