Widget Incorporabili

Crea e gestisci widget incorporabili per il tuo sito web. I widget forniscono componenti UI pronti all'uso per le funzionalità astrologiche che possono essere integrati in qualsiasi pagina web con un singolo tag script.

Modulo Richiesto

Tutti gli endpoint dei widget richiedono che il modulo module:embeddable-widgets sia abilitato per la tua organizzazione.

I seguenti tipi di widget sono disponibili in base ai tuoi moduli attivi:

Tipo	Descrizione	Modulo Richiesto
`natal`	Tema natale interattivo	`natal:calc`
`synastry`	Tema di confronto di sinastria	`synastry:calc`
`transit`	Sovrapposizione del tema di transito	`transit:calc`
`composite`	Tema composito relazionale	`composite:calc`
`moonphase`	Visualizzazione della fase lunare	`moonphase:calc`
`daily-horoscope`	Oroscopo giornaliero per tutti i segni	`module:daily-report`
`numerology`	Modulo del profilo numerologico	`module:numerology`
`compatibility`	Compatibilità del segno solare	`compatibility:calc`
`moon-calendar`	Calendario lunare mensile	`moon-calendar:calc`

bash

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

bash

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

I widget vengono creati usando il formato JSON:API:

bash

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

bash

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

bash

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

json

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

Rigenera la Chiave API

Rigenera la chiave API incorporata del widget. Usala se la chiave è stata compromessa:

bash

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

Rotazione della Chiave

Dopo aver rigenerato la chiave, gli incorporamenti esistenti che usano la vecchia chiave smetteranno di funzionare immediatamente. Non è necessario aggiornare il codice di incorporamento — l'ID del widget rimane lo stesso.

Recupera i tipi di widget disponibili per la tua organizzazione in base ai tuoi moduli attivi:

bash

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

Risposta

json

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

Funzionalità del Piano

Funzionalità	Descrizione
`canRemoveBranding`	Se il branding di AstroAPI può essere nascosto
`canUseCustomLogo`	Se un logo personalizzato può essere mostrato al posto di quello predefinito
`canUseCustomCss`	Se CSS personalizzato può essere iniettato nel widget
`maxDomains`	Numero massimo di domini consentiti per widget

Oggetto di Personalizzazione

L'oggetto customization controlla l'aspetto e il comportamento del widget:

json

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

Campi di Personalizzazione

Campo	Tipo	Descrizione
`colors.primary`	string	Colore di accento principale (hex)
`colors.secondary`	string	Colore di accento secondario (hex)
`colors.background`	string	Colore di sfondo del widget (hex)
`colors.text`	string	Colore del testo principale (hex)
`colors.border`	string	Colore del bordo (hex)
`fonts.family`	string	Valore CSS font-family
`fonts.size`	string	Dimensione base del carattere (valore CSS)
`borders.radius`	string	Raggio del bordo per schede e input (valore CSS)
`borders.width`	string	Larghezza del bordo (valore CSS)
`spacing.padding`	string	Padding interno (valore CSS)
`spacing.gap`	string	Spazio tra gli elementi (valore CSS)
`shadows.card`	string	CSS box-shadow per gli elementi scheda
`layout`	string	Stile di layout del widget (vedi sotto)
`interaction.allowUserInput`	boolean	Se gli utenti possono inserire i propri dati di nascita
`interaction.showTooltips`	boolean	Mostra tooltip al passaggio del mouse
`branding.showPoweredBy`	boolean	Mostra il badge "Powered by AstroAPI"
`branding.logoUrl`	string \| null	URL del logo personalizzato (richiede `canUseCustomLogo`)
`language`	string	Codice lingua di visualizzazione
`customCss`	string \| null	Iniezione CSS personalizzata (richiede `canUseCustomCss`)
`widgetOptions.showAspects`	boolean	Mostra le linee degli aspetti sui temi
`widgetOptions.showPoints`	boolean	Mostra i simboli dei pianeti sui temi
`widgetOptions.showHouses`	boolean	Mostra le divisioni delle case sui temi
`widgetOptions.chartSize`	number	Dimensione del tema in pixel
`widgetOptions.theme`	string	Tema colore (`"light"` o `"dark"`)

Opzioni di Layout

Valore	Descrizione
`compact`	Spazio minimo, adatto per barre laterali
`card`	Scheda arrotondata con ombra (predefinito)
`full`	Larghezza intera, senza bordi
`minimal`	Nessuno sfondo, senza bordi

Dopo aver creato un widget, copia il embedCode dalla risposta e incollalo nell'HTML del tuo sito web:

html

<!-- Place this where you want the widget to appear -->
<div id="astroapi-widget-container"></div>

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

Lista dei Domini Consentiti

I widget si caricheranno solo sui domini elencati in allowedDomains. Assicurati di aggiungere tutti i domini (incluse le varianti www) dove prevedi di incorporare il widget.

Widget Incorporabili

Tipi di Widget

Gestione dei Widget

Elenca i Widget

Ottieni un Widget

Crea un Widget

Aggiorna un Widget

Elimina un Widget

Risposta del Widget

Rigenera la Chiave API

Opzioni di Widget Disponibili

Risposta

Funzionalità del Piano

Oggetto di Personalizzazione

Campi di Personalizzazione

Opzioni di Layout

Incorporare un Widget

Widget Incorporabili ​

Tipi di Widget ​

Gestione dei Widget ​

Elenca i Widget ​

Ottieni un Widget ​

Crea un Widget ​

Aggiorna un Widget ​

Elimina un Widget ​

Risposta del Widget ​

Rigenera la Chiave API ​

Opzioni di Widget Disponibili ​

Risposta ​

Funzionalità del Piano ​

Oggetto di Personalizzazione ​

Campi di Personalizzazione ​

Opzioni di Layout ​

Incorporare un Widget ​

Widget Incorporabili

Tipi di Widget

Gestione dei Widget

Elenca i Widget

Ottieni un Widget

Crea un Widget

Aggiorna un Widget

Elimina un Widget

Risposta del Widget

Rigenera la Chiave API

Opzioni di Widget Disponibili

Risposta

Funzionalità del Piano

Oggetto di Personalizzazione

Campi di Personalizzazione

Opzioni di Layout

Incorporare un Widget