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.
| Typ | Beschreibung | Erforderliche Module |
|---|---|---|
natal | Formular für Geburtsdaten mit Horoskop, Positionen und Aspekten | module:natal |
synastry | Zwei Formulare für Geburtsdaten, Synastrie-Horoskop und wechselseitige Aspekte | module:natal, module:synastry |
transit | Geburtsdaten plus ein Transitzeitpunkt, Bi-Wheel-Horoskop | module:natal, module:transits |
composite | Zwei Formulare für Geburtsdaten, Komposit-Horoskop | module:natal, module:composite |
moonphase | Aktuelle Mondphase mit Beleuchtungsgrad | module:moon |
daily-horoscope | Zeichenauswahl mit dem Horoskop für heute | module:daily-report |
numerology | Formular für Name und Geburtsdatum mit den Kernzahlen | module:numerology |
compatibility | Zwei Personen, numerologischer Kompatibilitätswert | module:numerology, module:compatibility |
moon-calendar | Monatskalender mit Phasen, Mondaufgang und Monduntergang | module:moon |
Widget-Verwaltung
Alle Verwaltungs-Endpunkte sind JSON:API und verwenden den Ressourcentyp widget.
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
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.
{
"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.
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
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
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
curl "https://api.astroapi.cloud/api/widgets/options" \
-H "X-Api-Key: your-api-key"{
"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
| Funktion | Beschreibung |
|---|---|
canRemoveBranding | branding.showPoweredBy darf false sein |
canUseCustomLogo | branding.logoUrl und branding.companyName dürfen gesetzt werden |
canUseCustomCss | customCss wird an das Widget ausgeliefert |
maxDomains | Maximale 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.
{
"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
| Feld | Typ | Beschreibung |
|---|---|---|
colors.* | string | Zehn CSS-Farben, die als CSS-Variablen auf das Widget angewendet werden |
fonts.family | string | Wert für CSS-font-family |
fonts.sizeBase / sizeHeading / sizeSmall | number | Schriftgrößen in Pixeln |
fonts.weightNormal / weightBold | number | Schriftstärken |
borders.radius / width | number | Pixel; verwendet von Eingabefeldern, Schaltflächen und dem Karten-Layout |
borders.style | string | solid, dashed, dotted oder none |
spacing.padding / margin | number | Pixel; die Layouts card und compact verwenden padding |
shadows.preset | string | none, sm, md, lg oder xl (Karten-Layout) |
shadows.custom | string | null | Ein CSS-box-shadow, der das Preset überschreibt |
layout.variant | string | Siehe Layout-Varianten |
interaction.tooltipEnabled | boolean | Tooltips beim Überfahren von Planetenzeilen, Aspektzeilen und Kalendertagen |
interaction.animationsEnabled | boolean | Einblendanimationen; immer aus für Besucher, die reduzierte Bewegung bevorzugen |
interaction.clickThroughEnabled | boolean | Macht das gezeichnete Horoskop zu einem Link auf clickThroughUrl |
interaction.clickThroughUrl | string | null | Öffnet in einem neuen Tab |
chartSettings | object | Ein partielles Horoskop-Theme, das über das Standard-Theme gelegt wird: Farben pro Zeichen, Punkt und Aspekt, Linienstärken, showDegrees, showRetrograde und so weiter |
labels | object | Überschreibungen für jeden Label-Schlüssel; siehe Sprachen und Labels |
language | string | Einer der 13 unterstützten Sprachcodes |
branding.showPoweredBy | boolean | Erfordert canRemoveBranding, um auf false gesetzt zu werden |
branding.logoUrl / companyName | string | null | Erfordern canUseCustomLogo |
customCss | string | null | Wird für das Widget in die Seite injiziert; erfordert canUseCustomCss |
widgetOptions.showAspects / showPoints | boolean | Zeigt die Aspekt- und Positionstabellen unter einem Horoskop |
widgetOptions.showHouses | boolean | Zeigt Häusernummern im Horoskop |
widgetOptions.chartSize | string | number | small (300), medium (450), large (600) oder eine Breite in Pixeln |
widgetOptions.theme | string | light, dark, cosmic, custom oder auto |
numerologyOptions.* | boolean | Welche Zahlen das Numerologie-Widget anzeigt |
dailyHoroscopeOptions.autoRefresh | boolean | Reserviert |
moonCalendarOptions.* | boolean | Welche Details ein Kalendertag zeigt und welche Phasen hervorgehoben werden |
compatibilityOptions.* | boolean | Score-Ring, Beschreibung und Lebenszahlen |
Layout-Varianten
| Wert | Beschreibung |
|---|---|
card | Umrandete Fläche mit dem konfigurierten Radius, Padding und Schatten (Standard) |
compact | Halbes Padding und etwas kleinere Schrift, für Seitenleisten |
full | Von 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:
{ "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
<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
<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
| Element | Beschreibung |
|---|---|
id, type | Widget-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.
| Endpunkt | Body | Widget-Typ |
|---|---|---|
GET /api/widget-api/config/:widgetId | — | beliebig; ö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
- Widgets zu Ihrer Website hinzufügen — Schritt für Schritt für WordPress, Wix, Squarespace, Shopify und Webflow
- Horoskop-Rendering — das Theme-Objekt, das
chartSettingsakzeptiert - KI-Chatbot — der Chatbot hat sein eigenes einbettbares Widget