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.
| Tipo | Descrizione | Moduli richiesti |
|---|---|---|
natal | Modulo dei dati di nascita con tema, posizioni e aspetti | module:natal |
synastry | Due moduli dei dati di nascita, tema di sinastria e aspetti incrociati | module:natal, module:synastry |
transit | Dati di nascita più un momento di transito, tema a doppia ruota | module:natal, module:transits |
composite | Due moduli dei dati di nascita, tema composito | module:natal, module:composite |
moonphase | Fase lunare attuale con l'illuminazione | module:moon |
daily-horoscope | Selettore del segno con l'oroscopo di oggi | module:daily-report |
numerology | Modulo con nome e data di nascita e i numeri principali | module:numerology |
compatibility | Due persone, punteggio di compatibilità numerologica | module:numerology, module:compatibility |
moon-calendar | Calendario mensile con fasi, sorgere e tramontare della Luna | module:moon |
Gestione dei Widget
Tutti gli endpoint di gestione sono JSON:API e usano il tipo di risorsa widget.
Elenca i Widget
curl "https://api.astroapi.cloud/api/widgets" \
-H "X-Api-Key: your-api-key"Ottieni un Widget
curl "https://api.astroapi.cloud/api/widgets/wgt_abc123" \
-H "X-Api-Key: your-api-key"Crea un Widget
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.
{
"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.
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
curl -X DELETE "https://api.astroapi.cloud/api/widgets/wgt_abc123" \
-H "X-Api-Key: your-api-key"Rigenera la chiave API del widget
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
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 }
}
]
}
}
}Funzionalità del Piano
| Funzionalità | Descrizione |
|---|---|
canRemoveBranding | branding.showPoweredBy può essere impostato a false |
canUseCustomLogo | branding.logoUrl e branding.companyName possono essere impostati |
canUseCustomCss | customCss viene servito al widget |
maxDomains | Numero 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.
{
"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
| Campo | Tipo | Descrizione |
|---|---|---|
colors.* | string | Dieci colori CSS, applicati come variabili CSS sul widget |
fonts.family | string | Valore CSS font-family |
fonts.sizeBase / sizeHeading / sizeSmall | number | Dimensioni dei caratteri in pixel |
fonts.weightNormal / weightBold | number | Spessori dei caratteri |
borders.radius / width | number | Pixel; usati dai campi di input, dai pulsanti e dal layout a scheda |
borders.style | string | solid, dashed, dotted o none |
spacing.padding / margin | number | Pixel; i layout card e compact usano padding |
shadows.preset | string | none, sm, md, lg o xl (layout a scheda) |
shadows.custom | string | null | Un box-shadow CSS che sovrascrive il preset |
layout.variant | string | Vedi Varianti di layout |
interaction.tooltipEnabled | boolean | Tooltip al passaggio del mouse su righe dei pianeti, righe degli aspetti e giorni del calendario |
interaction.animationsEnabled | boolean | Animazioni di ingresso; sempre disattivate per i visitatori che preferiscono meno movimento |
interaction.clickThroughEnabled | boolean | Rende il tema renderizzato un link verso clickThroughUrl |
interaction.clickThroughUrl | string | null | Si apre in una nuova scheda |
chartSettings | object | Un tema grafico parziale unito al tema predefinito: colori per segno, punto e aspetto, spessori delle linee, showDegrees, showRetrograde e così via |
labels | object | Sostituzioni per qualsiasi chiave di etichetta; vedi Lingue ed etichette |
language | string | Uno dei 13 codici lingua supportati |
branding.showPoweredBy | boolean | Richiede canRemoveBranding per impostarlo a false |
branding.logoUrl / companyName | string | null | Richiedono canUseCustomLogo |
customCss | string | null | Iniettato nella pagina per il widget; richiede canUseCustomCss |
widgetOptions.showAspects / showPoints | boolean | Mostra le tabelle degli aspetti e delle posizioni sotto un tema |
widgetOptions.showHouses | boolean | Mostra i numeri delle case sul tema |
widgetOptions.chartSize | string | number | small (300), medium (450), large (600) oppure una larghezza in pixel |
widgetOptions.theme | string | light, dark, cosmic, custom o auto |
numerologyOptions.* | boolean | Quali numeri mostra il widget di numerologia |
dailyHoroscopeOptions.autoRefresh | boolean | Riservato |
moonCalendarOptions.* | boolean | Quali dettagli mostra un giorno del calendario e quali fasi vengono evidenziate |
compatibilityOptions.* | boolean | Anello del punteggio, descrizione e numeri del sentiero di vita |
Varianti di layout
| Valore | Descrizione |
|---|---|
card | Superficie con bordo e con raggio, padding e ombra configurati (predefinito) |
compact | Metà del padding e caratteri leggermente più piccoli, per le barre laterali |
full | Da bordo a bordo, solo padding verticale |
minimal | Nessuna 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:
{ "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
<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
<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
| Membro | Descrizione |
|---|---|
id, type | ID 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.
| Endpoint | Corpo | Tipo di widget |
|---|---|---|
GET /api/widget-api/config/:widgetId | — | qualsiasi; 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
- Aggiungere Widget al Tuo Sito Web — istruzioni passo passo per WordPress, Wix, Squarespace, Shopify e Webflow
- Rendering dei Temi — l'oggetto tema accettato da
chartSettings - Chatbot IA — il chatbot ha un proprio widget incorporabile