Skip to content

Widget Incorporabili

Crea e gestisci widget incorporabili per il tuo sito web. Un widget è un componente UI pronto all'uso per una singola funzionalità astrologica: un modulo per il tema natale, un calendario lunare, un selettore dell'oroscopo giornaliero. Lo configuri dalla dashboard o tramite questa API e lo inserisci in qualsiasi pagina con un solo tag script.

Due API, due chiavi

  • L'API di gestione (/api/widgets) crea e configura i widget. Usa la tua chiave API normale.
  • L'API del widget (/api/widget-api) è quella che il SDK chiama dal browser del visitatore. Usa la chiave propria del widget, che si può inserire in una pagina senza rischi perché è limitata a quel singolo widget.

Cerchi la guida senza codice? Vedi Aggiungere Widget al Tuo Sito Web.


Tipi di Widget

I tipi di widget che puoi creare dipendono dai moduli attivi sulla tua organizzazione. GET /api/widgets/options elenca quelli disponibili per te.

TipoDescrizioneModuli richiesti
natalModulo dei dati di nascita con tema, posizioni e aspettimodule:natal
synastryDue moduli dei dati di nascita, tema di sinastria e aspetti incrociatimodule:natal, module:synastry
transitDati di nascita più un momento di transito, tema a doppia ruotamodule:natal, module:transits
compositeDue moduli dei dati di nascita, tema compositomodule:natal, module:composite
moonphaseFase lunare attuale con l'illuminazionemodule:moon
daily-horoscopeSelettore del segno con l'oroscopo di oggimodule:daily-report
numerologyModulo con nome e data di nascita e i numeri principalimodule:numerology
compatibilityDue persone, punteggio di compatibilità numerologicamodule:numerology, module:compatibility
moon-calendarCalendario mensile con fasi, sorgere e tramontare della Lunamodule:moon

Gestione dei Widget

Tutti gli endpoint di gestione sono JSON:API e usano il tipo di risorsa widget.

Elenca i Widget

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

Ottieni un Widget

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

Crea un Widget

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

La risposta alla creazione è l'unica occasione in cui viene restituita la chiave API completa del widget (apiKey). Conservala, oppure rigenerala in seguito; tutte le altre risposte contengono solo 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_..." } }
        }
    }
}

Aggiorna un Widget

PATCH accetta qualsiasi sottoinsieme di name, enabled, allowedDomains e customization. La personalizzazione viene sostituita per intero, quindi invia l'oggetto completo.

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

Elimina un Widget

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

Rigenera la chiave API del widget

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

Restituisce il widget con una nuova apiKey. Aggiorna il codice di incorporamento sul tuo sito con la nuova chiave; l'ID del widget resta lo stesso.


Opzioni Widget Disponibili

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

Funzionalità del Piano

FunzionalitàDescrizione
canRemoveBrandingbranding.showPoweredBy può essere impostato a false
canUseCustomLogobranding.logoUrl e branding.companyName possono essere impostati
canUseCustomCsscustomCss viene servito al widget
maxDomainsNumero massimo di allowedDomains per widget, oppure "unlimited"

Oggetto di Personalizzazione

Ogni campo è facoltativo; ciò che ometti viene completato con i valori predefiniti qui sotto quando il widget viene servito. I colori sono stringhe di colore CSS, le dimensioni sono numeri in pixel.

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

Campi di Personalizzazione

CampoTipoDescrizione
colors.*stringDieci colori CSS, applicati come variabili CSS sul widget
fonts.familystringValore CSS font-family
fonts.sizeBase / sizeHeading / sizeSmallnumberDimensioni dei caratteri in pixel
fonts.weightNormal / weightBoldnumberSpessori dei caratteri
borders.radius / widthnumberPixel; usati dai campi di input, dai pulsanti e dal layout a scheda
borders.stylestringsolid, dashed, dotted o none
spacing.padding / marginnumberPixel; i layout card e compact usano padding
shadows.presetstringnone, sm, md, lg o xl (layout a scheda)
shadows.customstring | nullUn box-shadow CSS che sovrascrive il preset
layout.variantstringVedi Varianti di layout
interaction.tooltipEnabledbooleanTooltip al passaggio del mouse su righe dei pianeti, righe degli aspetti e giorni del calendario
interaction.animationsEnabledbooleanAnimazioni di ingresso; sempre disattivate per i visitatori che preferiscono meno movimento
interaction.clickThroughEnabledbooleanRende il tema renderizzato un link verso clickThroughUrl
interaction.clickThroughUrlstring | nullSi apre in una nuova scheda
chartSettingsobjectUn tema grafico parziale unito al tema predefinito: colori per segno, punto e aspetto, spessori delle linee, showDegrees, showRetrograde e così via
labelsobjectSostituzioni per qualsiasi chiave di etichetta; vedi Lingue ed etichette
languagestringUno dei 13 codici lingua supportati
branding.showPoweredBybooleanRichiede canRemoveBranding per impostarlo a false
branding.logoUrl / companyNamestring | nullRichiedono canUseCustomLogo
customCssstring | nullIniettato nella pagina per il widget; richiede canUseCustomCss
widgetOptions.showAspects / showPointsbooleanMostra le tabelle degli aspetti e delle posizioni sotto un tema
widgetOptions.showHousesbooleanMostra i numeri delle case sul tema
widgetOptions.chartSizestring | numbersmall (300), medium (450), large (600) oppure una larghezza in pixel
widgetOptions.themestringlight, dark, cosmic, custom o auto
numerologyOptions.*booleanQuali numeri mostra il widget di numerologia
dailyHoroscopeOptions.autoRefreshbooleanRiservato
moonCalendarOptions.*booleanQuali dettagli mostra un giorno del calendario e quali fasi vengono evidenziate
compatibilityOptions.*booleanAnello del punteggio, descrizione e numeri del sentiero di vita

Varianti di layout

ValoreDescrizione
cardSuperficie con bordo e con raggio, padding e ombra configurati (predefinito)
compactMetà del padding e caratteri leggermente più piccoli, per le barre laterali
fullDa bordo a bordo, solo padding verticale
minimalNessuna cornice; eredita tutto dalla pagina

Temi

light, dark e cosmic sono palette fisse per superfici e bordi. auto usa la palette chiara e passa a quella scura quando il sistema del visitatore preferisce il tema scuro. custom non imposta nulla e si affida ai tuoi colors. In ogni tema i dieci colors che imposti hanno la precedenza sulla palette.

Lingue ed etichette

Il SDK include le etichette per en, nl, de, fr, es, es-419, it, pt, pt-BR, tr, ru, ja e zh-CN. Le varianti regionali ricadono sulla lingua di base per tutto ciò che non sovrascrivono. labels sostituisce singole stringhe sopra la lingua scelta, ad esempio:

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

La lingua può anche essere impostata per pagina: data-lang="de" sul tag script, oppure ?lang=de nell'URL della pagina; entrambi hanno la precedenza sulla lingua memorizzata.


Incorporare un Widget

Il SDK viene servito da https://widgets.astroapi.cloud/sdk.js. La scheda Embed della dashboard genera entrambi gli snippet qui sotto con i tuoi ID già compilati.

Inizializzazione automatica

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>

Attributi facoltativi: data-container="#my-element" per il rendering in un elemento diverso dal div predefinito e data-lang="nl" per forzare la lingua.

Uso programmatico

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 viene interpretato come ora locale nel fuso timezone; il modulo la mostra esattamente come è stata indicata.

API dell'istanza

MembroDescrizione
id, typeID del widget e tipo di widget
getResult()L'ultimo risultato, sia che l'abbia calcolato il visitatore sia che l'abbia prodotto calculate()
setBirthData(data)Dati di nascita usati da calculate()
calculate()Esegue il calcolo da script e mostra il risultato. Supportato per natal, transit (al momento attuale), moonphase e moon-calendar (mese corrente); gli altri tipi ricevono i dati dal visitatore e restituiscono un rifiuto con errore
destroy()Smonta il widget

onResult si attiva per ogni risultato mostrato dal widget, per tutti i tipi di widget. AstroWidget.version indica la build del SDK.

Domini

allowedDomains limita i siti in cui la chiave API del widget funziona, confrontandola con l'Origin della richiesta del browser. Sono supportati i caratteri jolly per i sottodomini (*.example.com) e www. viene trattato come il dominio senza prefisso. Con l'elenco vuoto la chiave funziona su qualsiasi dominio, quindi compilalo prima di pubblicare il codice di incorporamento.


API del Widget

Questi sono gli endpoint che il SDK chiama per conto di un visitatore. Sono elencati per permetterti di costruire il tuo frontend su un widget; il SDK è il client di riferimento.

L'autenticazione è la chiave API del widget nell'header X-Api-Key. L'anteprima nella dashboard usa invece una sessione.

EndpointCorpoTipo di widget
GET /api/widget-api/config/:widgetIdqualsiasi; pubblico, restituisce widgetType e la customization già unita
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 } (nome e parti della data di nascita)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=qualsiasi; ricerca di località per il modulo dei dati di nascita

birthData, person1 e person2 per i widget dei temi sono { dateTime, latitude, longitude, timezone, placeName? }, con dateTime come ora locale (1990-06-15T14:30:00) nel fuso timezone. Chiamare un endpoint per un widget di un altro tipo restituisce 400; un widget disabilitato restituisce 403; una richiesta da un dominio non incluso in allowedDomains restituisce 403 DOMAIN_NOT_ALLOWED.


Prossimi Passi

AstroAPI Documentation