Skip to content

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ürAçıklamaGerekli Modül
natalEtkileşimli doğum haritasınatal:calc
synastrySinastri karşılaştırma haritasısynastry:calc
transitGeçiş haritası katmanıtransit:calc
compositeKompozit ilişki haritasıcomposite:calc
moonphaseAy evresi gösterimimoonphase:calc
daily-horoscopeTüm burçlar için günlük burç yorumumodule:daily-report
numerologyNumeroloji profili formumodule:numerology
compatibilityGüneş burcu uyumluluğucompatibility:calc
moon-calendarAylık ay takvimimoon-calendar:calc

Widget Yönetimi

Widget'ları Listele

bash
curl "https://api.astroapi.cloud/api/widgets" \
  -H "X-Api-Key: your-api-key"

Widget Al

bash
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:

bash
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

bash
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

bash
curl -X DELETE "https://api.astroapi.cloud/api/widgets/wgt_abc123" \
  -H "X-Api-Key: your-api-key"

Widget Yanıtı

json
{
    "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:

bash
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:

bash
curl "https://api.astroapi.cloud/api/widgets/options" \
  -H "X-Api-Key: your-api-key"

Yanıt

json
{
    "data": {
        "availableTypes": ["natal", "moonphase", "daily-horoscope"],
        "planFeatures": {
            "canRemoveBranding": false,
            "canUseCustomLogo": false,
            "canUseCustomCss": true,
            "maxDomains": 5
        }
    }
}

Plan Özellikleri

ÖzellikAçıklama
canRemoveBrandingAstroAPI markalamasının gizlenip gizlenemeyeceği
canUseCustomLogoVarsayılan yerine özel logo gösterilip gösterilemeyeceği
canUseCustomCssWidget'a özel CSS enjekte edilip edilemeyeceği
maxDomainsWidget 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:

json
{
    "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ı

AlanTürAçıklama
colors.primarystringBirincil vurgu rengi (hex)
colors.secondarystringİkincil vurgu rengi (hex)
colors.backgroundstringWidget arka plan rengi (hex)
colors.textstringAna metin rengi (hex)
colors.borderstringKenarlık rengi (hex)
fonts.familystringCSS font-family değeri
fonts.sizestringTemel yazı tipi boyutu (CSS değeri)
borders.radiusstringKartlar ve girişler için kenarlık yarıçapı (CSS değeri)
borders.widthstringKenarlık genişliği (CSS değeri)
spacing.paddingstringİç dolgu (CSS değeri)
spacing.gapstringÖğeler arası boşluk (CSS değeri)
shadows.cardstringKart öğeleri için CSS box-shadow
layoutstringWidget düzen stili (aşağıya bakın)
interaction.allowUserInputbooleanKullanıcıların kendi doğum verilerini girebilip giremeyeceği
interaction.showTooltipsbooleanFareyle üzerine gelindiğinde araç ipuçlarını göster
branding.showPoweredByboolean"Powered by AstroAPI" rozetini göster
branding.logoUrlstring | nullÖzel logo URL'si (canUseCustomLogo gerektirir)
languagestringGörüntüleme dili kodu
customCssstring | nullÖzel CSS enjeksiyonu (canUseCustomCss gerektirir)
widgetOptions.showAspectsbooleanHaritalarda açı çizgilerini göster
widgetOptions.showPointsbooleanHaritalarda gezegen sembollerini göster
widgetOptions.showHousesbooleanHaritalarda ev bölümlerini göster
widgetOptions.chartSizenumberPiksel cinsinden harita boyutu
widgetOptions.themestringRenk teması ("light" veya "dark")

Düzen Seçenekleri

DeğerAçıklama
compactMinimal alan, kenar çubuğu için uygundur
cardGölgeli yuvarlak kart (varsayılan)
fullTam genişlik, kenarlıksız
minimalArka 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:

html
<!-- 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.

AstroAPI Documentation