Düz iframe

widget.js kullanmak önerilir; ancak betik çalıştıramadığınız ortamlarda (bazı CMS’ler veya betiğe izin vermeyen kısıtlı editörler) embed sayfasını doğrudan bir iframe ile de gömebilirsiniz.

<iframe
  src="https://mirac-ozdemir.com/tr/embed/kdv"
  title="KDV hesaplama aracı"
  width="100%"
  height="520"
  style="border:0;display:block"
  loading="lazy"
  referrerpolicy="strict-origin-when-cross-origin"
  sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"
></iframe>

Adres biçimi

https://mirac-ozdemir.com/{locale}/embed/{key}?theme=…&header=…&id=…&accent=…&radius=…&density=…&view=…&autorun=1&i.alan=değer

Parça	Değerler	Varsayılan	Açıklama
`{locale}`	`tr`, `en`		Arayüz dili (yolun parçası).
`{key}`	Araç anahtarı		Katalogdaki `key`. `kit` ayrılmış bir addır (aşağıya bakın).
`theme`	`light`, `dark`, `auto`	`auto`	`auto` sistem temasını izler. (`inherit` yalnızca yükleyicide vardır; düz iframe’de sayfanızın temasını siz çözüp `light`/`dark` verin.)
`header`	`0` veya `1`	`1`	`0` başlığı gizler.
`id`	`[A-Za-z0-9_-]`, 1–64 karakter	yok	Opak kimlik; her mesajda aynen geri gönderilir ve komut mesajlarında zorunludur.
`view`	`full`, `result`	`full`	`result` yalnızca sonuç panelini gösterir (girdiler gizli); ön değer gerektirir ve `autorun`’u içerir.
`accent`	6 onaltılık hane, `#` olmadan	site rengi	Birincil renk (`0a7d5a`). Üzerindeki yazı rengi parlaklığa göre seçilir.
`radius`	`none`, `sm`, `md`, `lg`	`md`	Köşe yuvarlaklığı.
`density`	`comfortable`, `compact`	`comfortable`	Boşluk ölçeği.
`autorun`	`1`	kapalı	Girdiler uygulandıktan hemen sonra hesaplar.
`i.<alan>`	kanonik değer	yok	Ön değer. `<alan>` `^[a-z][A-Za-z0-9_]{0,63}$`; en çok 50 alan, değer ≤ 64 karakter. Ondalık `"1234.56"`, mantıksal `true`/`false`, seçenek anahtarı, tarih `YYYY-MM-DD`. Bilinmeyen alanlar ve geçersiz değerler yok sayılır.

<iframe
  src="https://mirac-ozdemir.com/tr/embed/kdv?theme=dark&accent=0a7d5a&radius=lg&i.amount=1000&i.mode=exclusive&autorun=1&id=kdv-1"
  title="KDV hesaplama aracı"
  width="100%"
  height="520"
  style="border:0;display:block"
  sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"
></iframe>

Arama ve kategori sayfaları

https://mirac-ozdemir.com/{locale}/embed/kit/search?target=event&category=kdv
https://mirac-ozdemir.com/{locale}/embed/kit/category/{categoryKey}?target=event

Bu sayfalar theme, header, id, accent, radius, density ve target (_blank veya event) kabul eder; arama ayrıca category alır. Ayrıntılar: Widget türleri. target’ın _top değeri yoktur.

Bu adres biçimi ve parametreleri genel sözleşmenin parçasıdır (sürüm politikası).

Yüksekliği yönetme

Düz iframe’de yüksekliği postMessage mesajlarını dinleyerek siz ayarlarsınız. Embed sayfası ready ve resize mesajlarını gönderir:

<iframe id="mo-widget" src="https://mirac-ozdemir.com/tr/embed/kdv?id=mo-widget" width="100%" height="480" style="border:0;display:block"></iframe>

<script>
  const ORIGIN = 'https://mirac-ozdemir.com';
  const frame = document.getElementById('mo-widget');

  window.addEventListener('message', (event) => {
    // Gönderen: bizim origin'imiz ve bu iframe.
    if (event.origin !== ORIGIN || event.source !== frame.contentWindow) return;
    const message = event.data;
    if (!message || message.source !== 'mirac-ozdemir-widget' || message.version !== 1) return;

    if (message.type === 'ready' || message.type === 'resize') {
      frame.style.height = Math.min(10000, Math.max(120, message.height)) + 'px';
    }
    if (message.type === 'result') console.log(message.data.result, message.inputs);
    if (message.type === 'error') console.warn(message.error.code, message.error.fields);
  });
</script>

Mesajların tam biçimi: Olaylar ve mesaj protokolü.

iframe’i komutla sürme

Düz iframe’e de komut gönderebilirsiniz: tema/yoğunluk gibi sunum seçeneklerini değiştirmek, girdileri doldurmak, hesaplatmak veya sıfırlamak için postMessage ile ana pencereden iframe’e mesaj yollanır. Embed sayfası bir komutu yalnızca event.source === window.parent, zarf geçerli ve id kendi id’sine eşitse kabul eder (bu yüzden adreste id vermelisiniz). Hangi komutların desteklendiği ready mesajındaki features alanında yazar. Mesaj biçimleri: Olaylar ve mesaj protokolü.

frame.contentWindow.postMessage(
  { source: 'mirac-ozdemir-widget-host', version: 1, id: 'mo-widget', type: 'inputs', values: { amount: '2500' }, autorun: true },
  'https://mirac-ozdemir.com',
);

iframe’in sınırları

Düz iframe’de widget.js’in sağladığı şeyler size kalır: yükseklik ayarı, yer tutucu ve öğrenilen yükseklik (CLS), geçersiz seçenek uyarıları, mo:* olayları, update/calculate gibi çağrılar, theme=inherit ve birden fazla widget’ı birbirinden ayırma (id). sandbox niteliğini yukarıdaki gibi bırakın; hesaplayıcı betik ve form gerektirir, araç bağlantısı yeni sekmede açılır (allow-popups-to-escape-sandbox). Erişilebilirlik için iframe’e anlamlı bir title verin.