Widget CSS Dokümantasyonu
WASM widget'ımız fiyatları sizin sayfanızın kendi DOM'una yazar. iframe değildir: yazı tipiniz, renkleriniz, grid'iniz olduğu gibi geçerlidir ve görünümü tamamen kendi CSS'inizle belirlersiniz. Bu sayfa üretilen DOM'u, tüm sınıf kancalarını ve öznitelikleri anlatır.
Canlı örnekler: 1 · Haber sitesi · 2 · Trading panosu · 3 · Kuyumcu vitrini — üçü de birebir aynı HTML'i üretir, fark yalnızca CSS'tedir.
1. Kurulum
<div class="dd-widget"
data-semboller="dolar,euro,gram-altin"
data-para="try"
data-tema="unstyled"></div>
<script src="https://dovizdolar.com/w.js" async></script>Script'i sayfada bir kez çağırmanız yeterlidir; sayfadaki tüm .dd-widget
kutularını bulur ve doldurur. Anahtarsız da çalışır (kaynak linki görünür, IP limitli).
2. data-* öznitelikleri
| Öznitelik | Değerler | Açıklama |
|---|---|---|
data-semboller | virgülle ayrık slug listesi | Gösterilecek varlıklar. Örn. dolar,euro,gram-altin,bitcoin. Paketinizin sembol tavanı kadarı gösterilir. |
data-para | try · usd · eur | Baz para birimi. Tüm fiyatlar bu paraya çevrilir (örn. usd seçilince Bitcoin dolar cinsinden). |
data-tema | unstyled · light · dark | unstyled (önerilen): hiç stil basılmaz, görünüm tamamen sizde. light/dark: hazır tema. |
data-baslik | 0 | 0 verilirse başlık satırı (.dd-w-head) üretilmez. |
data-key | lisans anahtarı | Üye/kurumsal anahtar. Markasız görünüm, daha sık tazeleme, yüksek kota ve alan adı kilidi sağlar. |
3. Üretilen DOM
Widget, kutunuzun içine aşağıdaki yapıyı yazar ve kök elemana dd-w sınıfını ekler:
<div class="dd-widget dd-w" data-tema="unstyled">
<div class="dd-w-head"><span class="dd-w-dot"></span>Canlı Kur</div>
<div class="dd-w-row" data-sym="dolar" data-dir="up">
<span class="dd-w-name">Dolar (USD)</span>
<span class="dd-w-bid" data-f="bid">48,1234 ₺</span>
<span class="dd-w-ask" data-f="ask">48,2345 ₺</span>
</div>
<!-- her sembol için bir .dd-w-row -->
<a class="dd-w-credit" href="https://dovizdolar.com">Veri: dovizdolar.com</a>
<div class="dd-w-time">14:32</div>
</div>4. CSS kancaları
| Seçici | Nedir |
|---|---|
.dd-w | Kök kapsayıcı. Widget yüklenince kutunuza otomatik eklenir. |
.dd-w-head | Başlık satırı ("Canlı Kur"). data-baslik="0" ile kapatılır. |
.dd-w-dot | Başlıktaki canlılık noktası. Nabız animasyonu vermek size kalmış. |
.dd-w-row | Bir varlık satırı. Düzenin ana birimi — grid/flex ile karta, şeride veya tabloya dönüştürebilirsiniz. |
.dd-w-name | Varlık adı (örn. "Gram Altın"). |
.dd-w-bid | Alış fiyatı (para simgesi dâhil). |
.dd-w-ask | Satış fiyatı (para simgesi dâhil). |
.dd-w-credit | Kaynak bağlantısı. Ücretsiz katmanda görünür kalmalıdır; ücretli paketlerde hiç üretilmez. |
.dd-w-time | Son güncelleme saati. Gizlemek için display:none. |
.dd-w-err | Veri alınamadığında görünen kısa mesaj. |
5. Durum kancaları (renklendirme)
| Seçici | Ne zaman |
|---|---|
.dd-w-row[data-sym="dolar"] | Tek bir varlığı hedeflemek için (her satırda data-sym vardır). |
.dd-w-row[data-dir="up"] | Fiyat bir önceki güncellemeye göre yükseldi. |
.dd-w-row[data-dir="down"] | Fiyat düştü. |
.dd-w-stale | Kaynak bir süredir güncellenmedi (gecikmiş fiyat). Soluklaştırmak iyi bir pratiktir. |
[data-f="bid"] / [data-f="ask"] | Alış/satış alanlarını sınıf yerine öznitelikle seçmek isterseniz. |
/* yön renklendirme örneği */
.dd-w-row[data-dir="up"] .dd-w-ask { color:#16a34a }
.dd-w-row[data-dir="down"] .dd-w-ask { color:#dc2626 }
/* yalnız gram altını vurgula */
.dd-w-row[data-sym="gram-altin"] { background:#fffbe6 }
/* gecikmiş fiyatı soluklaştır */
.dd-w-stale { opacity:.5 }6. Satırı karta dönüştürme (Demo 2'deki numara)
DOM sabit olduğu için düzeni tamamen CSS belirler. Satırları yan yana kartlara çevirmek için:
.dd-w { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px }
.dd-w-head { grid-column:1 / -1 } /* başlık tüm satırı kaplasın */
.dd-w-row { display:flex; flex-direction:column; gap:5px;
border:1px solid #1e2839; border-radius:14px; padding:14px 16px }
.dd-w-ask { font-size:23px; font-weight:800 }7. Sık sorulanlar
Fiyatlar ne sıklıkla yenileniyor? Ücretsiz katmanda 30 saniyede bir; ücretli paketlerde 15/10/5 saniye. Widget kendi kendine yeniler, sayfa yenilemeye gerek yoktur.
Sembol slug'larını nereden bulurum? Her varlık sayfasının adresindeki son parçadır:
/birim/gram-altin. Hazır liste ve seçici için Sitene Ekle.
Kaynak linkini kaldırabilir miyim? Ücretsiz katmanda hayır (.dd-w-credit görünür
kalmalıdır). Ücretli paketlerde bu eleman hiç üretilmez — paketler.
Alan adı kilidi nedir? Lisans anahtarınızı yalnız kendi alan adlarınızda çalışacak şekilde kısıtlarsınız; anahtarınızı kopyalayan başkası kullanamaz. Dikkat: kilit açıkken anahtar yalnız tarayıcıdan çalışır — sunucu taraflı çağrılarınız varsa kilidi boş bırakın.
Birden fazla widget koyabilir miyim? Evet. Sayfadaki her .dd-widget kutusu
kendi data-* ayarlarıyla doldurulur; script'i yine bir kez çağırın.
İçerik güvenlik politikam (CSP) var. script-src için
dovizdolar.com ve cdn1.dovizdolar.com, connect-src için
dovizdolar.com izinli olmalıdır.
Sunulan fiyatlar bilgilendirme amaçlıdır, yatırım tavsiyesi niteliği taşımaz; gösterge niteliğindedir. Veriler çoklu kaynaktan derlenip ortancalanır.