Widgets Intégrables
Créez et gérez des widgets intégrables pour votre site web. Les widgets fournissent des composants UI prêts à l'emploi pour les fonctionnalités astrologiques qui peuvent être intégrés dans n'importe quelle page web avec une seule balise script.
Module Requis
Tous les endpoints de widgets nécessitent que le module module:embeddable-widgets soit activé pour votre organisation.
Types de Widgets
Les types de widgets suivants sont disponibles selon vos modules actifs :
| Type | Description | Module Requis |
|---|---|---|
natal | Thème natal interactif | natal:calc |
synastry | Thème de comparaison de synastrie | synastry:calc |
transit | Superposition de thème de transit | transit:calc |
composite | Thème composite relationnel | composite:calc |
moonphase | Affichage de la phase lunaire | moonphase:calc |
daily-horoscope | Horoscope quotidien pour tous les signes | module:daily-report |
numerology | Formulaire de profil de numérologie | module:numerology |
compatibility | Compatibilité des signes solaires | compatibility:calc |
moon-calendar | Calendrier lunaire mensuel | moon-calendar:calc |
Gestion des Widgets
Lister les Widgets
bash
curl "https://api.astroapi.cloud/api/widgets" \
-H "X-Api-Key: your-api-key"Obtenir un Widget
bash
curl "https://api.astroapi.cloud/api/widgets/wgt_abc123" \
-H "X-Api-Key: your-api-key"Créer un Widget
Les widgets sont créés en utilisant le format 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"
}
}
}
}
}'Mettre à Jour un Widget
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"
}
}
}
}'Supprimer un Widget
bash
curl -X DELETE "https://api.astroapi.cloud/api/widgets/wgt_abc123" \
-H "X-Api-Key: your-api-key"Réponse du Widget
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"
}
}
}Régénérer la Clé API
Régénérez la clé API intégrée du widget. Utilisez ceci si la clé a été compromise :
bash
curl -X POST "https://api.astroapi.cloud/api/widgets/wgt_abc123/regenerate-key" \
-H "X-Api-Key: your-api-key"Rotation de Clé
Après la régénération de la clé, les intégrations existantes utilisant l'ancienne clé cesseront de fonctionner immédiatement. Vous n'avez pas besoin de mettre à jour le code d'intégration — l'ID du widget reste le même.
Options de Widgets Disponibles
Récupérez les types de widgets disponibles pour votre organisation selon vos modules actifs :
bash
curl "https://api.astroapi.cloud/api/widgets/options" \
-H "X-Api-Key: your-api-key"Réponse
json
{
"data": {
"availableTypes": ["natal", "moonphase", "daily-horoscope"],
"planFeatures": {
"canRemoveBranding": false,
"canUseCustomLogo": false,
"canUseCustomCss": true,
"maxDomains": 5
}
}
}Fonctionnalités du Plan
| Fonctionnalité | Description |
|---|---|
canRemoveBranding | Si la marque AstroAPI peut être masquée |
canUseCustomLogo | Si un logo personnalisé peut être affiché à la place du logo par défaut |
canUseCustomCss | Si du CSS personnalisé peut être injecté dans le widget |
maxDomains | Nombre maximum de domaines autorisés par widget |
Objet de Personnalisation
L'objet customization contrôle l'apparence et le comportement du 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"
}
}Champs de Personnalisation
| Champ | Type | Description |
|---|---|---|
colors.primary | string | Couleur d'accent principale (hex) |
colors.secondary | string | Couleur d'accent secondaire (hex) |
colors.background | string | Couleur de fond du widget (hex) |
colors.text | string | Couleur principale du texte (hex) |
colors.border | string | Couleur de bordure (hex) |
fonts.family | string | Valeur CSS font-family |
fonts.size | string | Taille de police de base (valeur CSS) |
borders.radius | string | Rayon de bordure pour les cartes et les entrées (valeur CSS) |
borders.width | string | Largeur de bordure (valeur CSS) |
spacing.padding | string | Rembourrage interne (valeur CSS) |
spacing.gap | string | Espace entre les éléments (valeur CSS) |
shadows.card | string | CSS box-shadow pour les éléments de carte |
layout | string | Style de mise en page du widget (voir ci-dessous) |
interaction.allowUserInput | boolean | Si les utilisateurs peuvent saisir leurs propres données de naissance |
interaction.showTooltips | boolean | Afficher des infobulles au survol |
branding.showPoweredBy | boolean | Afficher le badge "Powered by AstroAPI" |
branding.logoUrl | string | null | URL du logo personnalisé (nécessite canUseCustomLogo) |
language | string | Code de langue d'affichage |
customCss | string | null | Injection CSS personnalisée (nécessite canUseCustomCss) |
widgetOptions.showAspects | boolean | Afficher les lignes d'aspects sur les thèmes |
widgetOptions.showPoints | boolean | Afficher les symboles planétaires sur les thèmes |
widgetOptions.showHouses | boolean | Afficher les divisions de maisons sur les thèmes |
widgetOptions.chartSize | number | Taille du thème en pixels |
widgetOptions.theme | string | Thème de couleurs ("light" ou "dark") |
Options de Mise en Page
| Valeur | Description |
|---|---|
compact | Espace minimal, adapté aux barres latérales |
card | Carte arrondie avec ombre (défaut) |
full | Pleine largeur, sans bordures |
minimal | Pas de fond, sans bordures |
Intégrer un Widget
Après avoir créé un widget, copiez le embedCode de la réponse et collez-le dans le HTML de votre site web :
html
<!-- Placez ceci là où vous voulez que le widget apparaisse -->
<div id="astroapi-widget-container"></div>
<!-- Chargez le script du widget -->
<script
src="https://cdn.astroapi.cloud/widget.js"
data-widget-id="wgt_abc123">
</script>Liste Blanche de Domaines
Les widgets se chargeront uniquement sur les domaines listés dans allowedDomains. Assurez-vous d'ajouter tous les domaines (y compris les variantes www) où vous prévoyez d'intégrer le widget.