Widget yapılandırıcı

Aşağıdaki araç, gerçek widget.js yükleyicisini ve gerçek hesaplayıcıyı kullanır: yaptığınız ayarlar önizlemede anında görünür ve kod bloğu buna göre güncellenir. Önizlemede bir hesaplama yaptığınızda widget’ın sayfanıza gönderdiği mo:* olaylarını olay günlüğünde izleyebilirsiniz.

Yapılandırma

Widget türüAraç anahtarıKatalogdaki bir key yazın veya listeden seçin.DilTemaGörünümKöşe yuvarlaklığıYoğunlukBaşlangıç yüksekliği (px)Boş: son ölçülen yükseklik veya 480.

Vurgu rengi Özel vurgu rengi kullan

Seçim davranışıAramayı kategoriye sınırla

Ön değerlerHer satıra bir değer: amount=1000

Başlığı göster Otomatik hesapla Varsayılan öznitelikleri de yaz Sabit sürüm + bütünlük (SRI) kullan

Canlı önizleme

Bu düğmeler widget'ı JavaScript API ile sürer.

Kod

Sayfanızda Content-Security-Policy kullanıyorsanız şunları ekleyin:

Olay günlüğü

Neler yapabilirsiniz

Widget türü. Hesaplayıcı, Arama kutusu veya Kategori listesi seçin (Widget türleri). Hesaplayıcıda araç anahtarı, kategori listesinde kategori anahtarı girilir; arama kutusunda isteğe bağlı bir kategori filtresi vardır. Anahtar kutusu katalogdaki değerleri önerir.
Görünüm ve davranış. Dil, tema (inherit dahil), görünüm (tam ya da yalnızca sonuç), vurgu rengi, köşe yuvarlaklığı, yoğunluk, başlangıç yüksekliği, başlık, otomatik hesaplama ve seçim davranışı (_blank veya event). Ön değerleri her satıra bir alan=değer yazarak girin.
Canlı güncelleme ile yeniden kurma. Tema, görünüm, vurgu rengi, köşe, yoğunluk, başlık ve yükseklik değişince önizleme update ile iframe yeniden yüklenmeden güncellenir; önizlemenin üstündeki rozet “Canlı güncellendi (yeniden yükleme yok)” der. Tür, anahtar, dil, ön değerler, otomatik hesaplama, target ve kategori filtresi değişince widget yeniden kurulur (“Yeniden kuruldu”). Uygulamanızda da aynı ayrım geçerlidir: update.
Programatik kontrol düğmeleri. Hesaplayıcı önizlemesinin altında üç düğme bulunur: calculate() formu hesaplatıp sonucu (result ve inputs) gösterir ya da hatayı (code, fields) yazar; setInputs(ön değerler) ön değer alanındaki değerleri, Otomatik hesapla kutusunun durumuyla widget’a uygular; reset() formu sıfırlar. Çıktı kutusu çağrının döndürdüğü değeri gösterir. Bunlar yükleyicinin JavaScript API çağrılarıdır.
Sabit sürüm + bütünlük (SRI). İşaretlerseniz yapılandırıcı /widget/manifest.json dosyasını okur ve üretilen kodda değişmez /widget/v1.1.0.js adresini integrity ve crossorigin="anonymous" ile verir; önizleme de bu sabit betiği kullanır. Manifest okunamazsa normal adres gösterilir. Ayrıntı: Sürüm politikası.
Varsayılan öznitelikleri de yaz. İşaretlenirse kod, varsayılan değerleri de (data-theme="auto" gibi) açıkça içerir.

Kod sekmeleri

Sekme	İçerik
HTML	`data-mo-*` kapsayıcısı ve yükleyici betiği.
Özel öğe	`<mo-calculator>`, `<mo-search>` veya `<mo-category>` ve yükleyici betiği: Özel öğeler ve SDK.
iframe	Betik çalıştıramadığınız yerler için doğrudan embed adresi: Düz iframe.
React	Seçeneklerle doldurulmuş bir bileşen (yükleyiciyi yükler, `mount`/`unmount` eder).
Vue	Aynısının Vue 3 `<script setup>` karşılığı.
JS API	Seçilen türe uygun kısa bir `update` / `setInputs` / `calculate` / `mo:*` örneği.

Kodun altında, sayfanızda Content-Security-Policy varsa eklemeniz gereken kurallar da görünür: Güvenlik ve CSP.

Araç anahtarını bulmak için Araç kataloğunu kullanın; katalogdaki her satırdan bu sayfaya araç seçili olarak gelebilirsiniz (?tool=kdv).