Einbettbare Widgets

Erstellen und verwalten Sie einbettbare Widgets für Ihre Website. Widgets bieten gebrauchsfertige UI-Komponenten für Astrologie-Funktionen, die mit einem einzigen Script-Tag in jede Webseite integriert werden können.

Erforderliches Modul

Alle Widget-Endpunkte erfordern das aktivierte Modul module:embeddable-widgets für Ihre Organisation.

---

Widget-Typen

Die folgenden Widget-Typen sind basierend auf Ihren aktiven Modulen verfügbar:

Typ	Beschreibung	Erforderliches Modul
natal	Interaktives Geburtshoroskop	natal:calc
synastry	Synastrie-Vergleichshoroskop	synastry:calc
transit	Transit-Horoskop-Überlagerung	transit:calc
composite	Komposit-Beziehungshoroskop	composite:calc
moonphase	Mondphasenanzeige	moonphase:calc
daily-horoscope	Tageshoroskop für alle Zeichen	module:daily-report
numerology	Numerologie-Profilformular	module:numerology
compatibility	Sonnenzei chen-Kompatibilität	compatibility:calc
moon-calendar	Monatlicher Mondkalender	moon-calendar:calc

---

Widget-Verwaltung

Widgets auflisten

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

Widget abrufen

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

Widget erstellen

Widgets werden im JSON:API-Format erstellt:

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 aktualisieren

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 löschen

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

---

Widget-Antwort

{
    "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-Schlüssel neu generieren

Den eingebetteten API-Schlüssel des Widgets neu generieren. Verwenden Sie dies, wenn der Schlüssel kompromittiert wurde:

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

Schlüsselrotation

Nach der Neugenerierung des Schlüssels werden bestehende Einbettungen, die den alten Schlüssel verwenden, sofort aufhören zu funktionieren. Sie müssen den Einbettungscode nicht aktualisieren – die Widget-ID bleibt dieselbe.

---

Verfügbare Widget-Optionen

Die für Ihre Organisation verfügbaren Widget-Typen basierend auf Ihren aktiven Modulen abrufen:

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

Antwort

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

Plan-Funktionen

Funktion	Beschreibung
canRemoveBranding	Ob das AstroAPI-Branding ausgeblendet werden kann
canUseCustomLogo	Ob ein benutzerdefiniertes Logo anstelle des Standard-Logos angezeigt werden kann
canUseCustomCss	Ob benutzerdefiniertes CSS in das Widget injiziert werden kann
maxDomains	Maximale Anzahl erlaubter Domains pro Widget

---

Anpassungs-Objekt

Das customization-Objekt steuert das Erscheinungsbild und Verhalten des Widgets:

{
    "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"
    }
}

Anpassungsfelder

Feld	Typ	Beschreibung
colors.primary	string	Primäre Akzentfarbe (Hex)
colors.secondary	string	Sekundäre Akzentfarbe (Hex)
colors.background	string	Widget-Hintergrundfarbe (Hex)
colors.text	string	Haupttextfarbe (Hex)
colors.border	string	Rahmenfarbe (Hex)
fonts.family	string	CSS-Schriftfamilien-Wert
fonts.size	string	Basis-Schriftgröße (CSS-Wert)
borders.radius	string	Rahmenradius für Karten und Eingaben (CSS-Wert)
borders.width	string	Rahmenbreite (CSS-Wert)
spacing.padding	string	Innerer Abstand (CSS-Wert)
spacing.gap	string	Abstand zwischen Elementen (CSS-Wert)
shadows.card	string	CSS-Box-Shadow für Kartenelemente
layout	string	Widget-Layout-Stil (siehe unten)
interaction.allowUserInput	boolean	Ob Benutzer eigene Geburtsdaten eingeben können
interaction.showTooltips	boolean	Tooltips beim Hovern anzeigen
branding.showPoweredBy	boolean	„Powered by AstroAPI"-Badge anzeigen
branding.logoUrl	string | null	Benutzerdefinierte Logo-URL (erfordert canUseCustomLogo)
language	string	Anzeigesprachen-Code
customCss	string | null	Benutzerdefinierte CSS-Injektion (erfordert canUseCustomCss)
widgetOptions.showAspects	boolean	Aspektlinien auf Horoskopen anzeigen
widgetOptions.showPoints	boolean	Planetensymbole auf Horoskopen anzeigen
widgetOptions.showHouses	boolean	Hauseinteilungen auf Horoskopen anzeigen
widgetOptions.chartSize	number	Horoskopgröße in Pixeln
widgetOptions.theme	string	Farbthema ("light" oder "dark")

Layout-Optionen

Wert	Beschreibung
compact	Minimaler Platz, geeignet für Seitenleisten
card	Gerundete Karte mit Schatten (Standard)
full	Volle Breite, keine Rahmen
minimal	Kein Hintergrund, rahmenlos

---

Ein Widget einbetten

Nach dem Erstellen eines Widgets kopieren Sie den embedCode aus der Antwort und fügen Sie ihn in das HTML Ihrer Website ein:

<!-- Platzieren Sie dies, wo das Widget erscheinen soll -->
<div id="astroapi-widget-container"></div>

<!-- Widget-Script laden -->
<script
    src="https://cdn.astroapi.cloud/widget.js"
    data-widget-id="wgt_abc123">
</script>

Domain-Zulassungsliste

Widgets werden nur auf Domains geladen, die in allowedDomains aufgeführt sind. Fügen Sie alle Domains (einschließlich www-Varianten) hinzu, auf denen Sie das Widget einbetten möchten.