Gömülü Widget'lar
Web siteniz için gömülü widget'lar oluşturun ve yönetin. Widget'lar, tek bir script etiketi ile herhangi bir web sayfasına entegre edilebilen, kullanıma hazır astroloji özellikleri için kullanıcı arayüzü bileşenleri sağlar.
Gerekli Modül
Tüm widget uç noktaları, kuruluşunuz için module:embeddable-widgets modülünün etkinleştirilmesini gerektirir.
Widget Türleri
Aktif modüllerinize göre aşağıdaki widget türleri mevcuttur:
| Tür | Açıklama | Gerekli Modül |
|---|---|---|
natal | Etkileşimli doğum haritası | natal:calc |
synastry | Sinastri karşılaştırma haritası | synastry:calc |
transit | Geçiş haritası katmanı | transit:calc |
composite | Kompozit ilişki haritası | composite:calc |
moonphase | Ay evresi gösterimi | moonphase:calc |
daily-horoscope | Tüm burçlar için günlük burç yorumu | module:daily-report |
numerology | Numeroloji profili formu | module:numerology |
compatibility | Güneş burcu uyumluluğu | compatibility:calc |
moon-calendar | Aylık ay takvimi | moon-calendar:calc |
Widget Yönetimi
Widget'ları Listele
curl "https://api.astroapi.cloud/api/widgets" \
-H "X-Api-Key: your-api-key"Widget Al
curl "https://api.astroapi.cloud/api/widgets/wgt_abc123" \
-H "X-Api-Key: your-api-key"Widget Oluştur
Widget'lar JSON:API formatı kullanılarak oluşturulur:
curl -X POST "https://api.astroapi.cloud/api/widgets" \
-H "X-Api-Key: your-api-key" \
-H "Content-Type: application/vnd.api+json" \
-d '{
"data": {
"type": "widgets",
"attributes": {
"name": "My Natal Chart Widget",
"widgetType": "natal",
"allowedDomains": ["example.com", "www.example.com"],
"customization": {
"language": "en",
"layout": "card",
"colors": {
"primary": "#5b2d8e",
"background": "#ffffff",
"text": "#1a1a1a"
},
"widgetOptions": {
"showAspects": true,
"showPoints": true,
"showHouses": true,
"chartSize": 500,
"theme": "light"
}
}
}
}
}'Widget Güncelle
curl -X PATCH "https://api.astroapi.cloud/api/widgets/wgt_abc123" \
-H "X-Api-Key: your-api-key" \
-H "Content-Type: application/vnd.api+json" \
-d '{
"data": {
"type": "widgets",
"id": "wgt_abc123",
"attributes": {
"name": "Updated Widget Name",
"customization": {
"language": "nl"
}
}
}
}'Widget Sil
curl -X DELETE "https://api.astroapi.cloud/api/widgets/wgt_abc123" \
-H "X-Api-Key: your-api-key"Widget Yanıtı
{
"data": {
"type": "widgets",
"id": "wgt_abc123",
"attributes": {
"name": "My Natal Chart Widget",
"widgetType": "natal",
"allowedDomains": ["example.com", "www.example.com"],
"embedCode": "<script src=\"https://cdn.astroapi.cloud/widget.js\" data-widget-id=\"wgt_abc123\"></script>",
"customization": {
"language": "en",
"layout": "card",
"colors": {
"primary": "#5b2d8e",
"background": "#ffffff",
"text": "#1a1a1a"
},
"widgetOptions": {
"showAspects": true,
"showPoints": true,
"showHouses": true,
"chartSize": 500,
"theme": "light"
}
},
"createdAt": "2024-06-15T12:00:00Z",
"updatedAt": "2024-06-15T12:00:00Z"
}
}
}API Anahtarını Yeniden Oluştur
Widget'ın gömülü API anahtarını yeniden oluşturun. Anahtar ele geçirilmişse bunu kullanın:
curl -X POST "https://api.astroapi.cloud/api/widgets/wgt_abc123/regenerate-key" \
-H "X-Api-Key: your-api-key"Anahtar Rotasyonu
Anahtarı yeniden oluşturduktan sonra, eski anahtarı kullanan mevcut gömüler hemen çalışmayı durduracaktır. Gömme kodunu güncellemenize gerek yoktur — widget ID'si aynı kalır.
Mevcut Widget Seçenekleri
Aktif modüllerinize göre kuruluşunuzda mevcut widget türlerini alın:
curl "https://api.astroapi.cloud/api/widgets/options" \
-H "X-Api-Key: your-api-key"Yanıt
{
"data": {
"availableTypes": ["natal", "moonphase", "daily-horoscope"],
"planFeatures": {
"canRemoveBranding": false,
"canUseCustomLogo": false,
"canUseCustomCss": true,
"maxDomains": 5
}
}
}Plan Özellikleri
| Özellik | Açıklama |
|---|---|
canRemoveBranding | AstroAPI markalamasının gizlenip gizlenemeyeceği |
canUseCustomLogo | Varsayılan yerine özel logo gösterilip gösterilemeyeceği |
canUseCustomCss | Widget'a özel CSS enjekte edilip edilemeyeceği |
maxDomains | Widget başına izin verilen maksimum alan adı sayısı |
Özelleştirme Nesnesi
customization nesnesi, widget'ın görünümünü ve davranışını kontrol eder:
{
"colors": {
"primary": "#5b2d8e",
"secondary": "#a07cc5",
"background": "#ffffff",
"text": "#1a1a1a",
"border": "#e0e0e0"
},
"fonts": {
"family": "Inter, sans-serif",
"size": "14px"
},
"borders": {
"radius": "8px",
"width": "1px"
},
"spacing": {
"padding": "16px",
"gap": "12px"
},
"shadows": {
"card": "0 2px 8px rgba(0,0,0,0.1)"
},
"layout": "card",
"interaction": {
"allowUserInput": true,
"showTooltips": true
},
"branding": {
"showPoweredBy": true,
"logoUrl": null
},
"language": "en",
"customCss": ".astroapi-widget { font-weight: 500; }",
"widgetOptions": {
"showAspects": true,
"showPoints": true,
"showHouses": true,
"chartSize": 500,
"theme": "light"
}
}Özelleştirme Alanları
| Alan | Tür | Açıklama |
|---|---|---|
colors.primary | string | Birincil vurgu rengi (hex) |
colors.secondary | string | İkincil vurgu rengi (hex) |
colors.background | string | Widget arka plan rengi (hex) |
colors.text | string | Ana metin rengi (hex) |
colors.border | string | Kenarlık rengi (hex) |
fonts.family | string | CSS font-family değeri |
fonts.size | string | Temel yazı tipi boyutu (CSS değeri) |
borders.radius | string | Kartlar ve girişler için kenarlık yarıçapı (CSS değeri) |
borders.width | string | Kenarlık genişliği (CSS değeri) |
spacing.padding | string | İç dolgu (CSS değeri) |
spacing.gap | string | Öğeler arası boşluk (CSS değeri) |
shadows.card | string | Kart öğeleri için CSS box-shadow |
layout | string | Widget düzen stili (aşağıya bakın) |
interaction.allowUserInput | boolean | Kullanıcıların kendi doğum verilerini girebilip giremeyeceği |
interaction.showTooltips | boolean | Fareyle üzerine gelindiğinde araç ipuçlarını göster |
branding.showPoweredBy | boolean | "Powered by AstroAPI" rozetini göster |
branding.logoUrl | string | null | Özel logo URL'si (canUseCustomLogo gerektirir) |
language | string | Görüntüleme dili kodu |
customCss | string | null | Özel CSS enjeksiyonu (canUseCustomCss gerektirir) |
widgetOptions.showAspects | boolean | Haritalarda açı çizgilerini göster |
widgetOptions.showPoints | boolean | Haritalarda gezegen sembollerini göster |
widgetOptions.showHouses | boolean | Haritalarda ev bölümlerini göster |
widgetOptions.chartSize | number | Piksel cinsinden harita boyutu |
widgetOptions.theme | string | Renk teması ("light" veya "dark") |
Düzen Seçenekleri
| Değer | Açıklama |
|---|---|
compact | Minimal alan, kenar çubuğu için uygundur |
card | Gölgeli yuvarlak kart (varsayılan) |
full | Tam genişlik, kenarlıksız |
minimal | Arka plansız, kenarlıksız |
Widget Yerleştirme
Bir widget oluşturduktan sonra yanıttaki embedCode'u kopyalayın ve web sitenizin HTML'sine yapıştırın:
<!-- Widget'ın görünmesini istediğiniz yere yerleştirin -->
<div id="astroapi-widget-container"></div>
<!-- Widget script'ini yükleyin -->
<script
src="https://cdn.astroapi.cloud/widget.js"
data-widget-id="wgt_abc123">
</script>Alan Adı İzin Listesi
Widget'lar yalnızca allowedDomains'de listelenen alan adlarında yüklenecektir. Widget'ı yerleştirmeyi planladığınız tüm alan adlarını (www varyantları dahil) eklediğinizden emin olun.