Insluitbare widgets

Maak en beheer insluitbare widgets voor uw website. Widgets bieden kant-en-klare UI-componenten voor astrologiefuncties die in elke webpagina kunnen worden geintegreerd met een enkel script-tag.

Vereiste module

Alle widget-endpoints vereisen dat de module:embeddable-widgets module is ingeschakeld voor uw organisatie.

---

Widgettypes

De volgende widgettypes zijn beschikbaar op basis van uw actieve modules:

Type	Beschrijving	Vereiste module
natal	Interactieve geboortehoroscoop	natal:calc
synastry	Synastrie-vergelijkingshoroscoop	synastry:calc
transit	Transit-horoscoopoverlay	transit:calc
composite	Composiet-relatiehoroscoop	composite:calc
moonphase	Maanfaseweergave	moonphase:calc
daily-horoscope	Dagelijkse horoscoop voor alle tekens	module:daily-report
numerology	Numerologieprofielformulier	module:numerology
compatibility	Zonneteken-compatibiliteit	compatibility:calc
moon-calendar	Maandelijkse maankalender	moon-calendar:calc

---

Widgetbeheer

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

Widgets worden aangemaakt met JSON:API-formaat:

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 bijwerken

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 verwijderen

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

---

Widget-response

{
    "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 key opnieuw genereren

Genereer de ingebedde API key van de widget opnieuw. Gebruik dit als de key is gecompromitteerd:

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

Key-rotatie

Na het opnieuw genereren van de key stoppen bestaande embeds met de oude key onmiddellijk met werken. U hoeft de embedcode niet bij te werken - het widget-ID blijft hetzelfde.

---

Beschikbare widgetopties

Haal de widgettypes op die beschikbaar zijn voor uw organisatie op basis van uw actieve modules:

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

Response

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

Abonnementsfuncties

Functie	Beschrijving
canRemoveBranding	Of de AstroAPI-branding kan worden verborgen
canUseCustomLogo	Of een aangepast logo kan worden getoond in plaats van het standaardlogo
canUseCustomCss	Of aangepaste CSS kan worden geinjecteerd in de widget
maxDomains	Maximaal aantal toegestane domeinen per widget

---

Aanpassingsobject

Het customization-object regelt het uiterlijk en gedrag van de widget:

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

Aanpassingsvelden

Veld	Type	Beschrijving
colors.primary	string	Primaire accentkleur (hex)
colors.secondary	string	Secundaire accentkleur (hex)
colors.background	string	Widget-achtergrondkleur (hex)
colors.text	string	Hoofdtekstkleur (hex)
colors.border	string	Randkleur (hex)
fonts.family	string	CSS font-family waarde
fonts.size	string	Basis lettergrootte (CSS-waarde)
borders.radius	string	Randradius voor kaarten en invoervelden (CSS-waarde)
borders.width	string	Randbreedte (CSS-waarde)
spacing.padding	string	Interne padding (CSS-waarde)
spacing.gap	string	Ruimte tussen elementen (CSS-waarde)
shadows.card	string	CSS box-shadow voor kaartelementen
layout	string	Widget-layoutstijl (zie hieronder)
interaction.allowUserInput	boolean	Of gebruikers hun eigen geboortegegevens kunnen invoeren
interaction.showTooltips	boolean	Tooltips tonen bij hover
branding.showPoweredBy	boolean	"Powered by AstroAPI"-badge tonen
branding.logoUrl	string | null	Aangepaste logo-URL (vereist canUseCustomLogo)
language	string	Weergavetaalcode
customCss	string | null	Aangepaste CSS-injectie (vereist canUseCustomCss)
widgetOptions.showAspects	boolean	Aspectlijnen tonen op horoscopen
widgetOptions.showPoints	boolean	Planeetsymbolen tonen op horoscopen
widgetOptions.showHouses	boolean	Huisverdelingen tonen op horoscopen
widgetOptions.chartSize	number	Horoscoopgrootte in pixels
widgetOptions.theme	string	Kleurthema ("light" of "dark")

Layoutopties

Waarde	Beschrijving
compact	Minimale ruimte, geschikt voor zijbalken
card	Afgeronde kaart met schaduw (standaard)
full	Volledige breedte, geen randen
minimal	Geen achtergrond, zonder rand

---

Een widget insluiten

Na het aanmaken van een widget kopieert u de embedCode uit de response en plakt u deze in de HTML van uw website:

<!-- Plaats dit waar u de widget wilt tonen -->
<div id="astroapi-widget-container"></div>

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

Domein-allowlist

Widgets worden alleen geladen op domeinen die in allowedDomains staan vermeld. Zorg ervoor dat u alle domeinen (inclusief www-varianten) toevoegt waar u de widget wilt insluiten.