Skip to content

Einbettbare Widgets

Erstellen und verwalten Sie einbettbare Widgets für Ihre Website. Ein Widget ist eine fertige UI-Komponente für genau eine Astrologie-Funktion: ein Formular für ein Geburtshoroskop, ein Mondkalender, eine Zeichenauswahl für das Tageshoroskop. Sie konfigurieren es im Dashboard oder über diese API und binden es mit einem einzigen Script-Tag auf jeder beliebigen Seite ein.

Zwei APIs, zwei Schlüssel

  • Die Verwaltungs-API (/api/widgets) erstellt und konfiguriert Widgets. Sie verwendet Ihren normalen API-Schlüssel.
  • Die Widget-API (/api/widget-api) ist das, was das SDK aus dem Browser des Besuchers aufruft. Sie verwendet den eigenen Schlüssel des Widgets, der gefahrlos in einer Seite stehen darf, weil er auf dieses eine Widget beschränkt ist.

Sie suchen die Anleitung ohne Code? Siehe Widgets zu Ihrer Website hinzufügen.


Widget-Typen

Welche Widget-Typen Sie erstellen können, hängt von den Modulen Ihrer Organisation ab. GET /api/widgets/options listet die für Sie verfügbaren Typen auf.

TypBeschreibungErforderliche Module
natalFormular für Geburtsdaten mit Horoskop, Positionen und Aspektenmodule:natal
synastryZwei Formulare für Geburtsdaten, Synastrie-Horoskop und wechselseitige Aspektemodule:natal, module:synastry
transitGeburtsdaten plus ein Transitzeitpunkt, Bi-Wheel-Horoskopmodule:natal, module:transits
compositeZwei Formulare für Geburtsdaten, Komposit-Horoskopmodule:natal, module:composite
moonphaseAktuelle Mondphase mit Beleuchtungsgradmodule:moon
daily-horoscopeZeichenauswahl mit dem Horoskop für heutemodule:daily-report
numerologyFormular für Name und Geburtsdatum mit den Kernzahlenmodule:numerology
compatibilityZwei Personen, numerologischer Kompatibilitätswertmodule:numerology, module:compatibility
moon-calendarMonatskalender mit Phasen, Mondaufgang und Monduntergangmodule:moon

Widget-Verwaltung

Alle Verwaltungs-Endpunkte sind JSON:API und verwenden den Ressourcentyp widget.

Widgets auflisten

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

Widget abrufen

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

Widget erstellen

bash
curl -X POST "https://api.astroapi.cloud/api/widgets" \
  -H "X-Api-Key: your-api-key" \
  -H "Content-Type: application/json" \
  -d '{
    "data": {
      "type": "widget",
      "attributes": {
        "name": "My Natal Chart Widget",
        "widgetType": "natal",
        "allowedDomains": ["example.com", "www.example.com"],
        "customization": {
          "language": "en",
          "layout": { "variant": "card" },
          "colors": {
            "primary": "#5b2d8e",
            "background": "#ffffff",
            "text": "#1a1a1a"
          },
          "widgetOptions": {
            "showAspects": true,
            "showPoints": true,
            "showHouses": true,
            "chartSize": "medium",
            "theme": "auto"
          }
        }
      }
    }
  }'

Die Antwort auf das Erstellen ist der einzige Moment, in dem der vollständige API-Schlüssel des Widgets zurückgegeben wird (apiKey). Speichern Sie ihn oder erzeugen Sie ihn später neu; jede andere Antwort enthält nur apiKeyPrefix.

json
{
    "data": {
        "type": "widget",
        "id": "wgt_abc123",
        "attributes": {
            "name": "My Natal Chart Widget",
            "widgetType": "natal",
            "customization": { "...": "as sent, merged with defaults when served" },
            "allowedDomains": ["example.com", "www.example.com"],
            "enabled": true,
            "createdAt": "2026-06-15T12:00:00.000Z",
            "updatedAt": "2026-06-15T12:00:00.000Z",
            "apiKey": "wk_live_...",
            "apiKeyPrefix": "wk_live_abc1"
        },
        "relationships": {
            "organization": { "data": { "type": "organization", "id": "org_..." } }
        }
    }
}

Widget aktualisieren

PATCH akzeptiert eine beliebige Teilmenge aus name, enabled, allowedDomains und customization. Die Customization wird als Ganzes ersetzt, senden Sie also das vollständige Objekt.

bash
curl -X PATCH "https://api.astroapi.cloud/api/widgets/wgt_abc123" \
  -H "X-Api-Key: your-api-key" \
  -H "Content-Type: application/json" \
  -d '{
    "data": {
      "type": "widget",
      "id": "wgt_abc123",
      "attributes": {
        "name": "Updated Widget Name",
        "customization": { "language": "nl" }
      }
    }
  }'

Widget löschen

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

Den API-Schlüssel des Widgets neu erzeugen

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

Gibt das Widget mit einem frischen apiKey zurück. Aktualisieren Sie den Einbettungscode auf Ihrer Website mit dem neuen Schlüssel; die Widget-ID bleibt dieselbe.


Verfügbare Widget-Optionen

bash
curl "https://api.astroapi.cloud/api/widgets/options" \
  -H "X-Api-Key: your-api-key"
json
{
    "data": {
        "type": "widget-options",
        "id": "org_...",
        "attributes": {
            "plan": "Gold",
            "organizationModules": ["module:natal", "module:moon"],
            "availableWidgetTypes": ["natal", "moonphase", "moon-calendar"],
            "features": {
                "canRemoveBranding": false,
                "canUseCustomLogo": false,
                "canUseCustomCss": false,
                "maxDomains": 5
            },
            "allWidgetTypes": [
                {
                    "id": "natal",
                    "name": "Natal Chart",
                    "requiredModules": ["module:natal"],
                    "displayOptions": { "showChartSize": true, "showAspects": true, "showPoints": true }
                }
            ]
        }
    }
}

Tarif-Funktionen

FunktionBeschreibung
canRemoveBrandingbranding.showPoweredBy darf false sein
canUseCustomLogobranding.logoUrl und branding.companyName dürfen gesetzt werden
canUseCustomCsscustomCss wird an das Widget ausgeliefert
maxDomainsMaximale Anzahl an allowedDomains pro Widget, oder "unlimited"

Customization-Objekt

Jedes Feld ist optional; was Sie weglassen, wird bei der Auslieferung aus den unten stehenden Standardwerten ergänzt. Farben sind CSS-Farbwerte, Größen sind Zahlen in Pixeln.

json
{
    "colors": {
        "primary": "#6366f1",
        "secondary": "#8b5cf6",
        "background": "#ffffff",
        "surface": "#f8fafc",
        "text": "#1e293b",
        "textSecondary": "#64748b",
        "border": "#e2e8f0",
        "error": "#ef4444",
        "success": "#22c55e",
        "accent": "#f59e0b"
    },
    "fonts": {
        "family": "Inter, system-ui, sans-serif",
        "sizeBase": 16,
        "sizeHeading": 24,
        "sizeSmall": 12,
        "weightNormal": 400,
        "weightBold": 600
    },
    "borders": { "radius": 8, "width": 1, "style": "solid" },
    "spacing": { "padding": 16, "margin": 16 },
    "shadows": { "preset": "sm", "custom": null },
    "layout": { "variant": "card" },
    "interaction": {
        "tooltipEnabled": true,
        "animationsEnabled": true,
        "clickThroughEnabled": false,
        "clickThroughUrl": null
    },
    "chartSettings": {},
    "labels": {},
    "language": "en",
    "branding": { "showPoweredBy": true, "logoUrl": null, "companyName": null },
    "customCss": null,
    "widgetOptions": {
        "showAspects": true,
        "showPoints": true,
        "showHouses": true,
        "chartSize": "medium",
        "theme": "light"
    },
    "numerologyOptions": {
        "showLifePath": true,
        "showExpression": true,
        "showSoulUrge": true,
        "showPersonality": true,
        "showBirthday": true,
        "showPersonalCycles": true
    },
    "dailyHoroscopeOptions": { "autoRefresh": false },
    "moonCalendarOptions": {
        "showMoonrise": true,
        "showMoonset": true,
        "showIllumination": true,
        "showPhaseEmoji": true,
        "highlightFullMoon": true,
        "highlightNewMoon": true
    },
    "compatibilityOptions": {
        "showScore": true,
        "showDescription": true,
        "showLifePaths": true
    }
}

Customization-Felder

FeldTypBeschreibung
colors.*stringZehn CSS-Farben, die als CSS-Variablen auf das Widget angewendet werden
fonts.familystringWert für CSS-font-family
fonts.sizeBase / sizeHeading / sizeSmallnumberSchriftgrößen in Pixeln
fonts.weightNormal / weightBoldnumberSchriftstärken
borders.radius / widthnumberPixel; verwendet von Eingabefeldern, Schaltflächen und dem Karten-Layout
borders.stylestringsolid, dashed, dotted oder none
spacing.padding / marginnumberPixel; die Layouts card und compact verwenden padding
shadows.presetstringnone, sm, md, lg oder xl (Karten-Layout)
shadows.customstring | nullEin CSS-box-shadow, der das Preset überschreibt
layout.variantstringSiehe Layout-Varianten
interaction.tooltipEnabledbooleanTooltips beim Überfahren von Planetenzeilen, Aspektzeilen und Kalendertagen
interaction.animationsEnabledbooleanEinblendanimationen; immer aus für Besucher, die reduzierte Bewegung bevorzugen
interaction.clickThroughEnabledbooleanMacht das gezeichnete Horoskop zu einem Link auf clickThroughUrl
interaction.clickThroughUrlstring | nullÖffnet in einem neuen Tab
chartSettingsobjectEin partielles Horoskop-Theme, das über das Standard-Theme gelegt wird: Farben pro Zeichen, Punkt und Aspekt, Linienstärken, showDegrees, showRetrograde und so weiter
labelsobjectÜberschreibungen für jeden Label-Schlüssel; siehe Sprachen und Labels
languagestringEiner der 13 unterstützten Sprachcodes
branding.showPoweredBybooleanErfordert canRemoveBranding, um auf false gesetzt zu werden
branding.logoUrl / companyNamestring | nullErfordern canUseCustomLogo
customCssstring | nullWird für das Widget in die Seite injiziert; erfordert canUseCustomCss
widgetOptions.showAspects / showPointsbooleanZeigt die Aspekt- und Positionstabellen unter einem Horoskop
widgetOptions.showHousesbooleanZeigt Häusernummern im Horoskop
widgetOptions.chartSizestring | numbersmall (300), medium (450), large (600) oder eine Breite in Pixeln
widgetOptions.themestringlight, dark, cosmic, custom oder auto
numerologyOptions.*booleanWelche Zahlen das Numerologie-Widget anzeigt
dailyHoroscopeOptions.autoRefreshbooleanReserviert
moonCalendarOptions.*booleanWelche Details ein Kalendertag zeigt und welche Phasen hervorgehoben werden
compatibilityOptions.*booleanScore-Ring, Beschreibung und Lebenszahlen

Layout-Varianten

WertBeschreibung
cardUmrandete Fläche mit dem konfigurierten Radius, Padding und Schatten (Standard)
compactHalbes Padding und etwas kleinere Schrift, für Seitenleisten
fullVon Rand zu Rand, nur vertikales Padding
minimalÜberhaupt kein Rahmen; übernimmt alles von der Seite

Themes

light, dark und cosmic sind feste Paletten für Flächen und Rahmen. auto verwendet die helle Palette und wechselt zur dunklen, sobald das System des Besuchers Dunkel bevorzugt. custom setzt nichts und verlässt sich auf Ihre colors. In jedem Theme haben die zehn colors, die Sie setzen, Vorrang vor der Palette.

Sprachen und Labels

Das SDK liefert Labels für en, nl, de, fr, es, es-419, it, pt, pt-BR, tr, ru, ja und zh-CN. Regionsvarianten fallen für alles, was sie nicht selbst überschreiben, auf ihre Basissprache zurück. labels überschreibt einzelne Texte zusätzlich zur gewählten Sprache, zum Beispiel:

json
{ "language": "nl", "labels": { "calculateButton": "Bereken mijn horoscoop" } }

Die Sprache lässt sich auch pro Seite setzen: data-lang="de" am Script-Tag oder ?lang=de in der Seiten-URL, beide haben Vorrang vor der gespeicherten Sprache.


Ein Widget einbetten

Das SDK wird von https://widgets.astroapi.cloud/sdk.js ausgeliefert. Der Tab Embed im Dashboard erzeugt beide Snippets unten mit Ihren eigenen IDs.

Automatisch initialisieren

html
<script
  src="https://widgets.astroapi.cloud/sdk.js"
  data-widget-id="wgt_abc123"
  data-api-key="your-widget-api-key"
  data-api-url="https://api.astroapi.cloud"
></script>
<div id="astro-widget-wgt_abc123"></div>

Optionale Attribute: data-container="#my-element", um an anderer Stelle als im standardmäßigen div zu rendern, und data-lang="nl", um die Sprache zu überschreiben.

Programmatisch

html
<script src="https://widgets.astroapi.cloud/sdk.js"></script>
<div id="my-widget"></div>
<script>
  AstroWidget.create({
    widgetId: "wgt_abc123",
    apiKey: "your-widget-api-key",
    apiBaseUrl: "https://api.astroapi.cloud",
    container: "#my-widget",
    language: "nl",
    defaultValues: {
      dateTime: "1990-06-15T14:30:00",
      latitude: 52.3676,
      longitude: 4.9041,
      timezone: "Europe/Amsterdam",
      placeName: "Amsterdam"
    },
    onLoad: () => console.log("Widget loaded"),
    onResult: (result) => console.log("Result", result),
    onError: (err) => console.error(err)
  }).then((widget) => {
    // widget.type, widget.getResult(), widget.setBirthData(), widget.calculate(), widget.destroy()
  });
</script>

defaultValues.dateTime wird als Ortszeit in timezone interpretiert; das Formular zeigt den Wert genau so an, wie Sie ihn angeben.

Instanz-API

ElementBeschreibung
id, typeWidget-ID und Widget-Typ
getResult()Das letzte Ergebnis, gleich ob der Besucher es berechnet hat oder calculate()
setBirthData(data)Geburtsdaten, die calculate() verwendet
calculate()Führt die Berechnung per Script aus und zeigt das Ergebnis an. Unterstützt für natal, transit (zum aktuellen Zeitpunkt), moonphase und moon-calendar (aktueller Monat); die übrigen Typen beziehen ihre Eingabe vom Besucher und liefern einen Fehler zurück
destroy()Entfernt das Widget aus der Seite

onResult wird bei jedem Ergebnis ausgelöst, das das Widget anzeigt, und zwar für alle Widget-Typen. AstroWidget.version gibt den Build des SDK aus.

Domains

allowedDomains schränkt ein, wo der API-Schlüssel des Widgets funktioniert, geprüft gegen die Origin der Browser-Anfrage. Subdomain-Wildcards (*.example.com) werden unterstützt, und www. wird wie die nackte Domain behandelt. Bei einer leeren Liste funktioniert der Schlüssel auf jeder Domain, füllen Sie sie also aus, bevor Sie den Einbettungscode veröffentlichen.


Widget-API

Dies sind die Endpunkte, die das SDK stellvertretend für einen Besucher aufruft. Sie sind hier aufgeführt, damit Sie ein eigenes Frontend gegen ein Widget bauen können; das SDK ist der Referenz-Client.

Die Authentifizierung erfolgt über den API-Schlüssel des Widgets in X-Api-Key. Die Vorschau im Dashboard verwendet stattdessen eine Session.

EndpunktBodyWidget-Typ
GET /api/widget-api/config/:widgetIdbeliebig; öffentlich, gibt widgetType und die zusammengeführte customization zurück
POST /api/widget-api/natal/:widgetId{ birthData }natal
POST /api/widget-api/synastry/:widgetId{ person1, person2 }synastry
POST /api/widget-api/transit/:widgetId{ birthData, transitDateTime, transitTimezone? }transit
POST /api/widget-api/composite/:widgetId{ person1, person2 }composite
POST /api/widget-api/moonphase/:widgetId{ date?, latitude? }moonphase
POST /api/widget-api/daily-horoscope/:widgetId{ zodiacSign, date? }daily-horoscope
POST /api/widget-api/numerology/:widgetId{ fullName, birthYear, birthMonth, birthDay }numerology
POST /api/widget-api/compatibility/:widgetId{ person1, person2 } (Name und Bestandteile des Geburtsdatums)compatibility
POST /api/widget-api/moon-calendar/:widgetId{ year, month, latitude?, longitude?, timezone? }moon-calendar
GET /api/widget-api/geocoding/search/:widgetId?q=&limit=&lang=beliebig; Ortssuche für das Formular mit Geburtsdaten

birthData, person1 und person2 sind bei den Horoskop-Widgets { dateTime, latitude, longitude, timezone, placeName? }, wobei dateTime die Ortszeit (1990-06-15T14:30:00) in timezone ist. Der Aufruf eines Endpunkts für ein Widget eines anderen Typs liefert 400; ein deaktiviertes Widget liefert 403; eine Anfrage von einer Domain außerhalb von allowedDomains liefert 403 DOMAIN_NOT_ALLOWED.


Nächste Schritte

AstroAPI Documentation