Skip to content

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.

TypeBeschrijvingVereiste modules
natalFormulier voor geboortegegevens met horoscoop, posities en aspectenmodule:natal
synastryTwee formulieren voor geboortegegevens, synastriehoroscoop en onderlinge aspectenmodule:natal, module:synastry
transitGeboortegegevens plus een transitmoment, dubbele-ringhoroscoopmodule:natal, module:transits
compositeTwee formulieren voor geboortegegevens, composiethoroscoopmodule:natal, module:composite
moonphaseHuidige maanfase met verlichtingspercentagemodule:moon
daily-horoscopeTekenkiezer met de horoscoop van vandaagmodule:daily-report
numerologyFormulier met naam en geboortedatum en de kerngetallenmodule:numerology
compatibilityTwee personen, numerologische compatibiliteitsscoremodule:numerology, module:compatibility
moon-calendarMaandkalender met fasen, maansopkomst en maansondergangmodule:moon

Widgetbeheer

Alle beheer-endpoints zijn JSON:API en gebruiken het resourcetype widget.

Widgets opvragen

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

Widget ophalen

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

Widget aanmaken

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

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.

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 bijwerken

PATCH accepteert elke deelverzameling van name, enabled, allowedDomains en customization. De customization wordt in zijn geheel vervangen, dus stuur het volledige object mee.

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 verwijderen

bash
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

bash
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

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 }
                }
            ]
        }
    }
}

Abonnementsfuncties

FunctieBeschrijving
canRemoveBrandingbranding.showPoweredBy mag false zijn
canUseCustomLogobranding.logoUrl en branding.companyName mogen worden ingesteld
canUseCustomCsscustomCss wordt aan de widget meegegeven
maxDomainsMaximaal 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.

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

Aanpassingsvelden

VeldTypeBeschrijving
colors.*stringTien CSS-kleuren, toegepast als CSS-variabelen op de widget
fonts.familystringCSS-waarde voor font-family
fonts.sizeBase / sizeHeading / sizeSmallnumberLettergroottes in pixels
fonts.weightNormal / weightBoldnumberLetterdiktes
borders.radius / widthnumberPixels; gebruikt door invoervelden, knoppen en de kaartlayout
borders.stylestringsolid, dashed, dotted of none
spacing.padding / marginnumberPixels; de layouts card en compact gebruiken padding
shadows.presetstringnone, sm, md, lg of xl (kaartlayout)
shadows.customstring | nullEen CSS-box-shadow die de preset overschrijft
layout.variantstringZie Layoutvarianten
interaction.tooltipEnabledbooleanTooltips bij hover op planeetregels, aspectregels en kalenderdagen
interaction.animationsEnabledbooleanAnimaties bij het verschijnen; altijd uit voor bezoekers die minder beweging verkiezen
interaction.clickThroughEnabledbooleanMaakt van de getekende horoscoop een link naar clickThroughUrl
interaction.clickThroughUrlstring | nullOpent in een nieuw tabblad
chartSettingsobjectEen gedeeltelijk horoscoopthema dat over het standaardthema wordt gelegd: kleuren per teken, punt en aspect, lijndiktes, showDegrees, showRetrograde enzovoort
labelsobjectOverschrijvingen voor elke labelsleutel; zie Talen en labels
languagestringEen van de 13 ondersteunde taalcodes
branding.showPoweredBybooleanVereist canRemoveBranding om op false te zetten
branding.logoUrl / companyNamestring | nullVereisen canUseCustomLogo
customCssstring | nullWordt voor de widget in de pagina geïnjecteerd; vereist canUseCustomCss
widgetOptions.showAspects / showPointsbooleanToont de aspect- en positietabellen onder een horoscoop
widgetOptions.showHousesbooleanToont huisnummers op de horoscoop
widgetOptions.chartSizestring | numbersmall (300), medium (450), large (600) of een breedte in pixels
widgetOptions.themestringlight, dark, cosmic, custom of auto
numerologyOptions.*booleanWelke getallen de numerologiewidget toont
dailyHoroscopeOptions.autoRefreshbooleanGereserveerd
moonCalendarOptions.*booleanWelke details een kalenderdag toont en welke fasen worden uitgelicht
compatibilityOptions.*booleanScorering, beschrijving en levenspadgetallen

Layoutvarianten

WaardeBeschrijving
cardOmkaderd vlak met de ingestelde radius, padding en schaduw (standaard)
compactDe helft van de padding en iets kleinere letters, voor zijbalken
fullVan rand tot rand, alleen verticale padding
minimalHelemaal 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:

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

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>

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

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 wordt gelezen als lokale tijd in timezone; het formulier toont de waarde precies zoals u die opgeeft.

Instantie-API

OnderdeelBeschrijving
id, typeWidget-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.

EndpointBodyWidgettype
GET /api/widget-api/config/:widgetIdelk; 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

AstroAPI Documentation