Insluitbare widgets
Maak en beheer insluitbare widgets voor uw website. Een widget is een kant-en-klaar UI-component voor één astrologiefunctie: een formulier voor een geboortehoroscoop, een maankalender, een keuzemenu voor de dagelijkse horoscoop. U stelt de widget in via het dashboard of via deze API en plaatst hem met één script-tag op elke pagina.
Twee API's, twee sleutels
- De beheer-API (
/api/widgets) maakt widgets aan en configureert ze. Deze gebruikt uw gewone API-sleutel. - De widget-API (
/api/widget-api) is wat de SDK vanuit de browser van de bezoeker aanroept. Deze gebruikt de eigen sleutel van de widget, die veilig in een pagina kan staan omdat hij tot die ene widget beperkt is.
Zoekt u de handleiding zonder code? Zie Widgets toevoegen aan uw website.
Widgettypes
Welke widgettypes u kunt aanmaken hangt af van de modules van uw organisatie. GET /api/widgets/options toont de types die voor u beschikbaar zijn.
| Type | Beschrijving | Vereiste modules |
|---|---|---|
natal | Formulier voor geboortegegevens met horoscoop, posities en aspecten | module:natal |
synastry | Twee formulieren voor geboortegegevens, synastriehoroscoop en onderlinge aspecten | module:natal, module:synastry |
transit | Geboortegegevens plus een transitmoment, dubbele-ringhoroscoop | module:natal, module:transits |
composite | Twee formulieren voor geboortegegevens, composiethoroscoop | module:natal, module:composite |
moonphase | Huidige maanfase met verlichtingspercentage | module:moon |
daily-horoscope | Tekenkiezer met de horoscoop van vandaag | module:daily-report |
numerology | Formulier met naam en geboortedatum en de kerngetallen | module:numerology |
compatibility | Twee personen, numerologische compatibiliteitsscore | module:numerology, module:compatibility |
moon-calendar | Maandkalender met fasen, maansopkomst en maansondergang | module:moon |
Widgetbeheer
Alle beheer-endpoints zijn JSON:API en gebruiken het resourcetype widget.
Widgets opvragen
curl "https://api.astroapi.cloud/api/widgets" \
-H "X-Api-Key: your-api-key"Widget ophalen
curl "https://api.astroapi.cloud/api/widgets/wgt_abc123" \
-H "X-Api-Key: your-api-key"Widget aanmaken
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"
}
}
}
}
}'De response van een aanmaakverzoek is het enige moment waarop de volledige API-sleutel van de widget wordt teruggegeven (apiKey). Bewaar hem, of genereer hem later opnieuw; elke andere response bevat alleen 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 bijwerken
PATCH accepteert elke deelverzameling van name, enabled, allowedDomains en customization. De customization wordt in zijn geheel vervangen, dus stuur het volledige object mee.
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 verwijderen
curl -X DELETE "https://api.astroapi.cloud/api/widgets/wgt_abc123" \
-H "X-Api-Key: your-api-key"De API-sleutel van de widget opnieuw genereren
curl -X POST "https://api.astroapi.cloud/api/widgets/wgt_abc123/regenerate-key" \
-H "X-Api-Key: your-api-key"Geeft de widget terug met een nieuwe apiKey. Werk de embedcode op uw site bij met de nieuwe sleutel; het widget-ID blijft hetzelfde.
Beschikbare widgetopties
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 }
}
]
}
}
}Abonnementsfuncties
| Functie | Beschrijving |
|---|---|
canRemoveBranding | branding.showPoweredBy mag false zijn |
canUseCustomLogo | branding.logoUrl en branding.companyName mogen worden ingesteld |
canUseCustomCss | customCss wordt aan de widget meegegeven |
maxDomains | Maximaal aantal allowedDomains per widget, of "unlimited" |
Aanpassingsobject
Elk veld is optioneel; wat u weglaat wordt bij het uitserveren aangevuld met de standaardwaarden hieronder. Kleuren zijn CSS-kleurwaarden, afmetingen zijn getallen in pixels.
{
"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
}
}Aanpassingsvelden
| Veld | Type | Beschrijving |
|---|---|---|
colors.* | string | Tien CSS-kleuren, toegepast als CSS-variabelen op de widget |
fonts.family | string | CSS-waarde voor font-family |
fonts.sizeBase / sizeHeading / sizeSmall | number | Lettergroottes in pixels |
fonts.weightNormal / weightBold | number | Letterdiktes |
borders.radius / width | number | Pixels; gebruikt door invoervelden, knoppen en de kaartlayout |
borders.style | string | solid, dashed, dotted of none |
spacing.padding / margin | number | Pixels; de layouts card en compact gebruiken padding |
shadows.preset | string | none, sm, md, lg of xl (kaartlayout) |
shadows.custom | string | null | Een CSS-box-shadow die de preset overschrijft |
layout.variant | string | Zie Layoutvarianten |
interaction.tooltipEnabled | boolean | Tooltips bij hover op planeetregels, aspectregels en kalenderdagen |
interaction.animationsEnabled | boolean | Animaties bij het verschijnen; altijd uit voor bezoekers die minder beweging verkiezen |
interaction.clickThroughEnabled | boolean | Maakt van de getekende horoscoop een link naar clickThroughUrl |
interaction.clickThroughUrl | string | null | Opent in een nieuw tabblad |
chartSettings | object | Een gedeeltelijk horoscoopthema dat over het standaardthema wordt gelegd: kleuren per teken, punt en aspect, lijndiktes, showDegrees, showRetrograde enzovoort |
labels | object | Overschrijvingen voor elke labelsleutel; zie Talen en labels |
language | string | Een van de 13 ondersteunde taalcodes |
branding.showPoweredBy | boolean | Vereist canRemoveBranding om op false te zetten |
branding.logoUrl / companyName | string | null | Vereisen canUseCustomLogo |
customCss | string | null | Wordt voor de widget in de pagina geïnjecteerd; vereist canUseCustomCss |
widgetOptions.showAspects / showPoints | boolean | Toont de aspect- en positietabellen onder een horoscoop |
widgetOptions.showHouses | boolean | Toont huisnummers op de horoscoop |
widgetOptions.chartSize | string | number | small (300), medium (450), large (600) of een breedte in pixels |
widgetOptions.theme | string | light, dark, cosmic, custom of auto |
numerologyOptions.* | boolean | Welke getallen de numerologiewidget toont |
dailyHoroscopeOptions.autoRefresh | boolean | Gereserveerd |
moonCalendarOptions.* | boolean | Welke details een kalenderdag toont en welke fasen worden uitgelicht |
compatibilityOptions.* | boolean | Scorering, beschrijving en levenspadgetallen |
Layoutvarianten
| Waarde | Beschrijving |
|---|---|
card | Omkaderd vlak met de ingestelde radius, padding en schaduw (standaard) |
compact | De helft van de padding en iets kleinere letters, voor zijbalken |
full | Van rand tot rand, alleen verticale padding |
minimal | Helemaal geen kader; neemt alles over van de pagina |
Thema's
light, dark en cosmic zijn vaste paletten voor vlakken en randen. auto gebruikt het lichte palet en schakelt over naar het donkere zodra het systeem van de bezoeker donker verkiest. custom stelt niets in en vertrouwt volledig op uw colors. In elk thema winnen de tien colors die u instelt van het palet.
Talen en labels
De SDK levert labels voor en, nl, de, fr, es, es-419, it, pt, pt-BR, tr, ru, ja en zh-CN. Regiovarianten vallen terug op hun basistaal voor alles wat ze niet zelf overschrijven. labels overschrijft losse teksten bovenop de gekozen taal, bijvoorbeeld:
{ "language": "nl", "labels": { "calculateButton": "Bereken mijn horoscoop" } }De taal kan ook per pagina worden ingesteld: data-lang="de" op de script-tag, of ?lang=de in de URL van de pagina, beide gaan voor op de opgeslagen taal.
Een widget insluiten
De SDK wordt geserveerd vanaf https://widgets.astroapi.cloud/sdk.js. Het tabblad Embed in het dashboard genereert beide fragmenten hieronder met uw eigen ID's ingevuld.
Automatisch initialiseren
<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>Optionele attributen: data-container="#my-element" om ergens anders te renderen dan in de standaard-div, en data-lang="nl" om de taal te overschrijven.
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 wordt gelezen als lokale tijd in timezone; het formulier toont de waarde precies zoals u die opgeeft.
Instantie-API
| Onderdeel | Beschrijving |
|---|---|
id, type | Widget-ID en widgettype |
getResult() | Het laatste resultaat, of de bezoeker het nu berekende of calculate() |
setBirthData(data) | Geboortegegevens die calculate() gebruikt |
calculate() | Voert de berekening vanuit script uit en toont het resultaat. Ondersteund voor natal, transit (op het huidige moment), moonphase en moon-calendar (huidige maand); de overige types halen hun invoer bij de bezoeker en geven een error terug |
destroy() | Verwijdert de widget uit de pagina |
onResult vuurt bij elk resultaat dat de widget toont, voor alle widgettypes. AstroWidget.version geeft de build van de SDK.
Domeinen
allowedDomains beperkt waar de API-sleutel van de widget werkt, getoetst aan de Origin van het browserverzoek. Wildcards voor subdomeinen (*.example.com) worden ondersteund en www. wordt behandeld als het kale domein. Bij een lege lijst werkt de sleutel op elk domein, dus vul hem in voordat u de embedcode publiceert.
Widget-API
Dit zijn de endpoints die de SDK namens een bezoeker aanroept. Ze staan hier zodat u een eigen front-end tegen een widget kunt bouwen; de SDK is de referentieclient.
Authenticatie gebeurt met de API-sleutel van de widget in X-Api-Key. De preview in het dashboard gebruikt in plaats daarvan een sessie.
| Endpoint | Body | Widgettype |
|---|---|---|
GET /api/widget-api/config/:widgetId | — | elk; publiek, geeft widgetType en de samengevoegde customization |
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 } (naam en onderdelen van de geboortedatum) | 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= | — | elk; plaatszoeken voor het formulier met geboortegegevens |
birthData, person1 en person2 zijn voor de horoscoopwidgets { dateTime, latitude, longitude, timezone, placeName? }, waarbij dateTime lokale tijd is (1990-06-15T14:30:00) in timezone. Een endpoint aanroepen voor een widget van een ander type geeft 400; een uitgeschakelde widget geeft 403; een verzoek vanaf een domein buiten allowedDomains geeft 403 DOMAIN_NOT_ALLOWED.
Volgende stappen
- Widgets toevoegen aan uw website — stap voor stap voor WordPress, Wix, Squarespace, Shopify en Webflow
- Horoscopen renderen — het themaobject dat
chartSettingsaccepteert - AI-chatbot — de chatbot heeft zijn eigen insluitbare widget